Jquery Wizard Plugin

by

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


 



 
       

      



 



Step 2


 



 
       

      



 



Step 3


 



 
       

      



 



Step 4


 



 
       

      



 



Step 5


 



 
       

 

A Demo of the wizard

38 thoughts on “Jquery Wizard Plugin”

  3. A further comment from me: if too much page text or photos are added then the step menu is forced downwards necessitating use of the scroll bar to see the menu.However I am sure that I can work around this somehow.Guys like yourself are invaluable time savers and very much appreciated!

  4. Hey thanks for the kind words Ted, you can modify the css of the step menu by opening up the css file and modifying the following css code

    #wizardcontent {
    height:300px
    }

    let me know if you need anymore help 🙂

  5. Press NEXT really fast. All the windows pop up. Need to have it set so when an animation is loading, nothing else can be clicked.

  6. hey for a quick fix use this, when you use fast animation it has no chance to load

    function loadnext(divout,divin){$(“.” + divout).hide();$(“.” + divin).fadeIn(“fast”);}

  7. Hi,

    About Justin comment you could try using LimitQueue.

    I haven’t try yet. I’ll let you know if it works for me.

    You can also wait for jQuery 1.2, I think this could help Queue Control

    Anyway, really nice. I’m already using it 😀

    bye

  8. A small bug catch…you can’t click step 3 when you’re on step 5 and it go correctly, so I tried clicking the “back” button (in the form, not browser back), but I did it too quickly, repeatedly, and it messes the flow up a bit. But really nice, otherwise. Very excellent!

    Found you from AjaxRain.

  9. there is also a large and comprehensive database of 800+ ajax scripts available with over at

    ajaxflakes’s ajax scripts compound

    thought i should add it might be helpful to others…

    here

  10. one thing though bro..when i put some forms, the next button is not going to next..and also when u put it inside the div tag wrapper…the next button will not go to the next… 🙂

  17. Thanks for this nice demonstration. It will be great if you add go-back functionality to Wizard link. So this will help users to navigate steps in between.

    Could you help to do that?

  18. A fix for clicking fast is to change the div id to a class thateverything loads in or just dont click fast 😉

  19. Hi, there is still problem when fast clicking next/back .I look at source and there is “function loadnext(divout,divin){$(”.” + divout).hide();$(”.” +divin).fadeIn(”fast”);}” like you suggested . Is there any way to repair this , i want to use this wizard in one of my project. Thanks.

  20. Nice concept but the page fails validation miserably due to all the duplicate IDs.

    This makes it impractical for real world use.

    Is there a way around this?

    Chuck

  24. Hiya!

    I’m just writing to let y’all know that I enjoyed your idea for this jQuery wizard so much that I refactored it to eliminate redundancy, validate the markup, and dramatically reduce the LOC required.

    Let me know what you think! You can read more about it on this blog post
    Cheers.

    -Jerod Santo

  26. Hi

    i just followed the procedure as mentioned and got the steps correctly, but i am getting the step boxes as rectangular not angled on right margins. how can i fix this ?

  31. wizard control is working fine.
    But if I put dojo dialog control inside the steps, the dojo dialog control is not working.

    can you please help.

  36. Pretty great pοst. Ι simply ѕtumbleԁ upon
    your blog anԁ wiѕhed to mention that I have truly еnjoyeԁ browsing your blog posts.

    Afteг all ӏ’ll be subscribing in your rss feed and I hope you write once more soon!

Leave a Comment