Javascript

Introduction

Loops

Objects

Arrays

Fade In and Out

Light Box Plugin

Animate

Collapsible Panels

Jquery Form

Jquery Gallery

Slide Up Nav

Light Box Plugin

A lightbox is a jquery plugin that allows you to view an image in full when clicking on it in a nice styled window. This is a very common and well known plugin, so I thought I should cover it.

First we need to include jquery and after you have done
import the CSS and jS files

add in the following HTML

<a href="/images/designImage.png" class="lightbox" ><img border="0" src="images/designImage.png" width="50" height="50" /></a>
click the image

and then the javascript

$(document).ready(function(){
$('a.lightbox').lightBox();
});

What's happening is we are setting up the class lightbox to run the lightbox function and we declare the class in the anchor tag in the HTML

Tabbed Content Area

Lets have a go at making a tabbed content area, this tutorial requires you to have the jquery framework installed. To do this we are going to make it using the heading tabs using the unordered list tag and the content will be wrapped in divs, As the user clicks on a new tab the content will fade in and out.

To start make a wrapper tag and style it along with the body like so

and then add the following CSS

body
{
background-color: #414141;
}
#wrapper
{
width: 300px;
background-color: #f0f0f0;
margin: auto;
margin-top: 100px;
border: 3px solid #5a5a5a;
}

this is going to be our basic shape so now add the HTML for the tabs and content

<ul class="tabs">
<li class="active"><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
<div style="clear:both"></div>
</ul>
<div class="tab_container">
<div id="tab1" class="tabContent">
Tab1 content
</div>
<div id="tab2" class="tabContent">
Tab2 content
</div>
<div id="tab3" class="tabContent">
Tab3 content
</div>
</div>

This is going to work by fading in and out the div content tabs. Each of these represents different content and will be shown/hidden based on user input.

The top tabs which select the content are made from using a list and we use a class called active and assign it to the one that is currently being shown.

The href is for the javascript to gather which tab we are going to when a user clicks on one.

Now lets add the CSS to style it

ul.tabs
{
width: 300px;
margin: 0px;
padding: 0px;
}
ul li
{
width: 100px;
height: 30px;
float: left;
list-style-type: none;
background-color: #bbbbbb;
}
a
{
text-decoration: none;
color: #808080;
}
.active
{
background-color: #cccccc;
width: 98px;
border-bottom: none;
}
.tab_container
{
height: 300px;
background-color: #cccccc;
}

this is pretty standard styling we set the width of the list to 300px to span is across. remove style formatting made by default and set each li to float left so they are next to each other. The active class is the styling for the tab that is currently selected. The tab container is the containing element over the main content.

Now you should see it coming to life but we can currently see all of the content and its not separated so now we are going to use javascript to change that and fade the content in and out.

$(document).ready(function() {
$(".tabContent").hide();
$(".tabContent:first").fadeIn("slow");
});

Okay so we hide all the content and then fade in the first element in the tab content which is the first tab, now lets add in the event of when a tab is pressed and put this new javasvcript code just after the fade in so we are still inside the document ready.

$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").fadeOut("slow",function(){
$(activeTab).fadeIn("slow");
});
var activeTab = $(this).find("a").attr("href");
});

Okay so whats happening here is when we click on the tab at the top we remove the active class from the current tab and add it to the tab we just pressed

Next we fade out the old content and when the animation is complete we callback the fadeIn method to fade in the new content from the new tab.

Lastly we assign the variable activeTab to the tab we are currently using by the href attribute of the anchor tab.