Month: June 2007

After looking for a jquery plugin that will emulate a windows wizard I decided to make my own (with the help of cody lindley’s css step menu). I am using Jquery which can be found here and css step menu found here.

The code:

First we need a simple javascript function will hide and display a div, this method is used with jquery and you can learn how to use this here

function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");}

Next the html code, notice how each step is wrapped in the ID wizardwrapper and each div is assigned a class for the corresponding step number.

 
 

Step 1
 

 
        Back  

       Next  

best home loan deals
Step 1: XXXXXXXXEt nequ a quam turpis duisi
	
Step 2: XXXXXXXXEt nequ a quam turpis duisi
	
Step 3: XXXXXXXXEt nequ a quam turpis duisi
	
Step 4: XXXXXXXXEt nequ a quam turpis duisi
Step 5: XXXXXXXX Et nequ a quam turpis duisi

 

Step 2
 

 
        Back  

       Next  

Step 1: XXXXXXXXEt nequ a quam turpis duisi
Step 2: XXXXXXXXEt nequ a quam turpis duisi
	
Step 3: XXXXXXXXEt nequ a quam turpis duisi
	
Step 4: XXXXXXXXEt nequ a quam turpis duisi
Step 5: XXXXXXXX Et nequ a quam turpis duisi

 

Step 3
 

 
        Back  

       Next  

Step 1: XXXXXXXXEt nequ a quam turpis duisi
Step 2: XXXXXXXXEt nequ a quam turpis duisi
Step 3: XXXXXXXXEt nequ a quam turpis duisi
	
Step 4: XXXXXXXXEt nequ a quam turpis duisi
Step 5: XXXXXXXX Et nequ a quam turpis duisi

 

Step 4
 

 
        Back  

       Next  

Step 1: XXXXXXXXEt nequ a quam turpis duisi
Step 2: XXXXXXXXEt nequ a quam turpis duisi
Step 3: XXXXXXXXEt nequ a quam turpis duisi
Step 4: XXXXXXXXEt nequ a quam turpis duisi
Step 5: XXXXXXXX Et nequ a quam turpis duisi

 

Step 5
 

 
        Back  

       Finish  

Step 1: XXXXXXXXEt nequ a quam turpis duisi
Step 2: XXXXXXXXEt nequ a quam turpis duisi
Step 3: XXXXXXXXEt nequ a quam turpis duisi
Step 4: XXXXXXXXEt nequ a quam turpis duisi
Step 5: XXXXXXXX Et nequ a quam turpis duisi

A Demo of the wizard