Chapter 2: JQuery Effects

Chapter 1 gave you the basic understanding about what is jquery and its syntax, lets check out some jquery functions which will produce effects on your screen.
Remember the example.js we have asked you to include in Chapter 1 for no reason? We will have to work on that in this chapter. Open this exmaple.js in your text editor and paste the following code in it and save it.

function myCallback(msg){
    $("#spCallback").html("I was called after " + msg + " effect!").hide("fast").delay(800).fadeIn(400);
}

function btnClick(){
    var effect = $("#ddEffects").val();
        switch(effect){
            case "hide" :
                jqHide();
            break;
            case "show" :
                jqShow();
            break;
            case "toggle" :
                jqToggle();
            break;
            case "slidedown" :
                jqSlideDown();
            break;
            case "slideup" :
                jqSlideUp();
            break;
            case "slidetoggle" :
                jqSlideToggle();
            break;
            case "fadeout" :
                jqFadeOut();
            break;
            case "fadein" :
                jqFadeIn();
            break;
            case "fadeto" :
                jqFadeTo();
            break;
            case "animate" :
                jqAnimate();
            break;
        }

}

function jqHide(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Name of the callback function
        $("div#myPara").hide('normal',myCallback('Hide'));
    });
}

function jqShow(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Name of the callback function
        $("div#myPara").show('normal',myCallback('Show'));
    });
}

function jqToggle(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Name of the callback function
        $("div#myPara").toggle('normal',myCallback('Toggle'));       
    });
}

function jqSlideDown(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Name of the callback function
        $("div#myPara").slideDown('normal',myCallback('SlideDown'));
    });
}

function jqSlideUp(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Name of the callback function
        $("div#myPara").slideUp('normal',myCallback('SlideUp'));
    });
}

function jqSlideToggle(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Name of the callback function
        $("div#myPara").slideToggle('normal',myCallback('SlideToggle'));
    });
}

function jqFadeOut(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Name of the callback function
        $("div#myPara").fadeOut('normal',myCallback('FadeOut'));
    });
}

function jqFadeIn(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Name of the callback function
        $("div#myPara").fadeIn('normal',myCallback('FadeIn'));
    });
}

function jqFadeTo(){
    $(document).ready(function(){
        //@param 1 - slow, normal, fast, milliseconds
        //@param 2 - Opacity, allows fading to a given opacity. Values can be between 0 to 1 ex - 0.25, 0.50, 0.75, etc
        //@param 3 - Name of the callback function
        $("div#myPara").fadeTo('normal',0.3,myCallback('FadeTo'));
    });
}


function jqAnimate(){
    $(document).ready(function(){
        //@param 1 - styles (height, width, wordspacing, etc)
        //@param 2 - speed (slow, normal, fast, milliseconds)
        //@param 3 - easing (swing, linear)
        //@param 4 - Name of the callback function
        $("div#myPara").animate({wordSpacing:"15px"},"slow","linear",myCallback('Animate'));
    });
}

The first function you will notice is myCallback. This function will be called after every jquery effect. I am calling this function after every jquery effect just to let you know how call back function works and when it is getting called.
Next, you will see btnClick() function. This function is called on the onclick event of the submit button. This function gets the selected value from the effects dropdown and calls the appropriate jquery effects function.

Try playing with these functions and their parameters. Also notice the .delay() function used in myCallback().

Chapter 2 ends here. We will see some advance topics in coming chapters.

Chapter 1: Introduction to jQuery

This jquery tutorial (actually a crash course) will give you a basic understanding of jquery and its effects functions. I assume you are new to jquery but not to the web technologies. This means you should have a basic understanding about HTML, Javascript and CSS to understand this tutorial.
Lets start with the basic question - What is jQuery?
As said on their website, "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."
This simply means it is a javascript library which helps you to implement javascript functionality in a very simple way. You can implement various effects like slide-in, slide-out, fade-in, fade-out, etc in no time. Let get our hands dirty with jquery.
First lets create our environment.
1. Create a valid HTML File index.html as shown below and save it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery Tutorial</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="examples.js"></script>
</head>
<body>
<div id="myPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget sapien laoreet purus auctor molestie. In hendrerit, nisi pretium vestibulum facilisis, tellus velit sodales lacus, non congue massa erat scelerisque libero. Quisque iaculis libero sit amet lacus ornare et fermentum dui venenatis. In bibendum ligula eget dui ullamcorper nec vulputate augue pretium. Donec sit amet tortor justo. Duis hendrerit bibendum vestibulum. Curabitur feugiat nisi et mauris cursus tempus. Integer eu ipsum sem. Phasellus a ipsum ac turpis ultrices dictum ullamcorper et lectus. Morbi condimentum lobortis neque, sit amet luctus dolor aliquet sed. Pellentesque rutrum, felis ac venenatis rutrum, orci purus ullamcorper libero, id lacinia justo ipsum sit amet dolor. Curabitur libero nulla, laoreet in elementum ac, vulputate vitae tellus. Cras quis feugiat velit.</div><br/><br/>

Select the effect below from the dropdown and click submit to see the effect in action.<br/></br/>
<select id="ddEffects">
    <option value="hide" selected="selected">Hide</option>
    <option value="show">Show</option>
    <option value="toggle">Toggle</option>
    <option value="slideup">SlideUp</option>
    <option value="slidedown">SlideDown</option>
    <option value="slidetoggle">SlideToggle</option>
    <option value="fadeout">FadeOut</option>
    <option value="fadein">FadeIn</option>
    <option value="fadeto">FadeTo</option>
    <option value="animate">Animate</option>
</select>

<button id="btnClick" onclick="javascript: btnClick()">Submit</button><br/><br/>
<span id="spCallback"></span><br/>
 </body>
 </html>
 2. Create a blank examples.js file and include it in your index.html as shown above. We are going to play with jquery functions in this file. You will be working on this file in chapter 2 of this tutorial.

Now some theory part before we actually get into action.

jQuery Syntax
The basic syntax is - $(selector).action()
Where -   
             '$' sign ís used to define jQuery. You can change the '$' sign to anything you like using jQuery noConflict() method to avoid name conflicts. For this tutorial keep the '$' sign as it is.
              (selector) to find HTML element(s).
              action() is an "action" to be performed on the element(s).

Following examples will make it clear
    $("div").hide() - hides all the div tags.
    $("div.someclass").hide() - hides all the div tags with class="someclass"
    $("div#myDiv").hide() - hides all the div tags with id="myDiv".   
    $(this).hide() use "this" to refer to the current element.

Always rememeber to put your jQuery code in document.ready() function. This prevents your jquery code from executing before the page is finished loading.

$(document).ready(function(){
   // your code here..
});

Now that you have got the basic understanding on jQuery, Chapter 2 will teach you some simple jQuery effects.

The 10 Commandments of Egoless Programming

The 10 Commandments of Egoless Programming

1. Understand and accept that you will make mistakes.
2. You are not your code.
3. No matter how much "karate" you know, someone else will always know more.
4. Don't rewrite code without consultation.
5. Treat people who know less than you with respect, deference, and patience.
6. The only constant in the world is change.
7. The only true authority stems from knowledge, not from position.
8. Fight for what you believe, but gracefully accept defeat.
9. Don't be "the guy in the room."
10. Critique code instead of people -- be kind to the coder, not to the code.

--Jerry Weinberg