jQuery: A simple slider

This entry is part 33 of 33 in the series jQuery Tutorial

This is a simple jQuery slider and notice how I have used the if else statement to determine the state of the slider.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #hideme { 
                background:#de9a44; 
                width:120px;
                height:25px; 
                display:none; 
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <p>Hover On Me!</p>
        <div id="hideme"><h3>Rock & Roll</h3></div>

        <script>
            $(document.body).hover(function () {
                if ($("#hideme").is(":hidden")) {
                    $("#hideme").slideDown("slow");
                } else {
                    $("#hideme").hide();
                }
            });

        </script>

    </body>
</html>

Try The Code

 

Checking the width of an image file

There was a plugin in WordPress that I used which allows an image to be uploaded.  This part of the code was done in Javascript and not in PHP.  When the image file is uploaded, I want it to prompt a message if the width of the image is smaller than 700px.

In Javascript, once the file is uploaded, it is put into a file object.  As with any other object, we could get other properties of this file object such as its name.  If the file object is file, we could get the name by using file.name.

Making use of file object property file.name, this is how I get the full path of the image file and pass it to img.src to check its width.

var d = new Date();
var mth = d.getMonth() + 1;
var str1;
            
if (mth == 11) {
    str1 = '//localhost/wordpress/wp-content/uploads/2015/11/';
}
else if (mth == 12) {
    str1 = '//localhost/wordpress/wp-content/uploads/2015/12/';
}
                       
var str2 = str1.concat(file.name);

var img = new Image();
img.onload = function () {
    if (this.width < 700) {
        alert('The size of the photo is too small.');
    }
}
img.src = str2;

Javascript: A loosely typed language

This entry is part 9 of 27 in the series Javascript Tutorial

JavaScript is a loosely typed language, which means you do not declare the data types of variables explicitly.

In many cases JavaScript performs conversions automatically when they are needed.

You can use var to define string or integer, which are commonly used in Javascript.

<!DOCTYPE html>
<html>
 <head>
 <title>Variables</title>
 <script>
   function updateFunction()
   {
     var new_str = "I am a new string";
     var new_int = 15;

     document.getElementsByTagName("h4")[0].innerHTML=new_str;
     document.getElementsByTagName("p")[0].innerHTML=new_int;
    }
  </script>

 </head>
 <body>
  <h4>I am a string</h4>
  <p>I will be an integer</p>
 <br>
 <button onclick="updateFunction()">Click Me</button>
 </body>
</html>

button

The script above illustrates some important concepts about Javascript.

First, we can see that a variable can accept either a string or an integer. For a string, we need to use “” but not for integer.

In designing a web site using Javascript, it is always about accessing the DOM and updating it. In this case, we are accessing the <h4> and <p> tags and change the content inside the 2 tags.

We change them using

     document.getElementsByTagName("h4")[0].innerHTML=new_str;
     document.getElementsByTagName("p")[0].innerHTML=new_int;

Notice the [0] in both statements, these are related to array variables and will be explained in the later posts.

Javascript: A simple form

This entry is part 18 of 27 in the series Javascript Tutorial

A simple textbox input form.

<!DOCTYPE html>
<html>
<head>
    <title>Test input</title>
    <script>
        function submitForm(form) {
            var text_input = form.inputbox.value;
            document.getElementById("text_id").innerHTML=text_input;
        }
    </script>
</head>
<body>
<form>Enter something in the box: <br><br>
    <input type="text" name="inputbox" value=""><P>
        <input type="button" name="button" value="Click" onClick="submitForm(this.form)">
</form>
<p id="text_id">You typed</p>
</body>
</html>
Take note of how the text you typed into the text box is passed into variable text_input.
var text_input = form.inputbox.value;

Javascript: A good editor is needed

This entry is part 2 of 27 in the series Javascript Tutorial

Many Javascript related sites will tell you that you only need a notepad to write Javascript.

However, if you are new to coding Javascript or learning any other programming language, I would like to suggest that you invest in a good Javascript editor.

The main reason is that as a new developer, you will need an editor that supports Intellisense.

Intellisense is a context-aware code completion feature in the editor that speeds up the process of coding applications.

I have been using WebStorm Javascript editor and you can download a copy of it and try it out for a month.

webstorm