Javascript

Introduction

Loops

Objects

Arrays

Fade In and Out

Light Box Plugin

Animate

Collapsible Panels

Jquery Form

Jquery Gallery

Slide Up Nav

Animate

This tutorial requires the jquery framework. Lets look into more on the animate function because its a very fun function to play with. it changes the position of HTML elements and animates until it the given property is set. So if we set the width to 500px of a div it will span across in width till it hits the 500 mark set.

So for this tutorial we will make an animation effect that will do expand our div and push it using new set margins.
Start by typing the HTML

<div id="box">Refresh the page</div>

now add the CSS

width: 138px;
height: 138px;
background-color: #2e94c9;
border: 1px solid #267198;
padding: 5px;
color: #383838;

Here we are just going make a box and set the shape and font.

Next we will add the javascript to make all of the effects

$(function(){
$("#box").animate({width: "300px"});
$("#box").animate({height: "300px"});
$("#box").animate({marginLeft: "300px",marginTop: "300px"});
});

The animate function works by passing the parameters we want to change so first when the document object is ready we expand the width of the shape.

Now in jquey a function will not run until the previous one has ended. So after the width has expanded the height expands. Now to get them changed at the same time we change the properties in one function call like we have with the margins so that they change they same time so the div is pushed diagonally down instead of left then down.

Chain Functions

This tutorial requires the jquery framework. For this tutorial we will be looking into chaining functions together with jquery so we will be seeing functions to go off one at a time. This saves you writing different effects on different lines and combine them into one line.

Start by typing the HTML

<div id="box">Refresh the page</div>

and add the CSS

#box
{
width: 140px;
height: 140px;
background-color: #686868;
padding: 5px;
}

so we just make a basic box shape and now for the javascript

$(function(){
$("#box").fadeOut("slow").fadeIn("slow").animate({width: "600px"});
});

Here we are only apply 3 effects but they are chained together and run one after another.

Callback Functions

This tutorial requires the jquery framework. Callback is a way of javascript pointing to a new function after the current function is complete.

So lets have a simple animation effect and then pop up an alert box to tell the user the animation is complete.
Start by typing the HTML

and add the CSS

p
{
font-size: 16pt;
}

now for the javascript

$(function(){
$("p").fadeOut("slow",function(){
alert("the text has faded out");
});
});

We pass in a second parameter for the fadeOut() function which is another function and side that is the alert statement so when the fade out is complete the callback function called which runs the alert message.