Javascript

Introduction

Loops

Objects

Arrays

Fade In and Out

Light Box Plugin

Animate

Collapsible Panels

Jquery Form

Jquery Gallery

Slide Up Nav

Fade In and Out

so now lets have a go at fading in and out content, this tutorial requires the jquery framework

start by typing the following HTML code in the body tag

<button type="button" onclick="change()">Click Me</button>
<div id="box">fade me in and out</div>

add the CSS to make the box shape

div#box
{
width: 100px;
height: 100px;
background-color: red;
}

next add in the following javascript

var faded = false;

function change()
{
if (faded)
{
faded = false;
$("#box").fadeIn("slow");
}
else
{
faded = true;
$("#box").fadeOut("slow");
}
}

when the button is pressed the javascript function is called and we use the faded variable to detected whether or not the div is faded. Then we either fade in or fade out the div and then set the faded flag for next time the button is pressed.

Slide Content

Lets have a look at how to slide in some content, this tutorial requires the jquery framework.

Start by typing the following HTML code

<div id="box"></div>
<button type="button" onclick="slide()">Click Me</button>

add the CSS

div#box
{
width: 100px;
height: 100px;
background-color: red;
}

and add this javascript in

function slide()
{
$("#box").animate({marginLeft: 500},"slow");
}

the animate function has many different properties to it but for now we are going to just use the marginLeft to move the content to the right when the function is called.

Slide Panel

The slide panel works by clicking on the box and new content slides down. This tutorial requires the jquey framework

Start by typing up the HTML content

<div id="title">Click me</div>
<div id="drop">drop down content</div>

and add the CSS

div#title
{
width: 300px;
height: 30px;
background-color: #39a5cc;
border: 1px solid #1e93bd;
}
div#drop
{
width: 300px;
height: 300px;
background-color: #297f9e;
border: 1px solid #0a6485;
display: none;
}

now for the javascript code

$(document).ready(function(){
$("#title").click(function(){
$("#drop").slideToggle("slow");
});
});

when the document is ready as in all code has been processed by the web browser we have a click event which drops the hidden content by using the slide toggle method.