Custom Quotes: 1-508-471-4711

Jquery Wizard Plugin

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

34 Comments
  1. Thanks nice job!

  2. Brilliant! Thank you so much!

  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 :D

    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… :)

  11. Nice job, preaty beautifull style.
    Where can I find the CSS style file?
    Thanks!

  12. Exelente trabajo, muchas gracias

  13. thank you

  14. This is one I will use on my site.

  15. gracias muy buen trabajo

  16. really cool thank you

  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

  21. Hi,

    Thanks for such nice post.
    Where i can find the CSS file.

  22. yes where?

  23. 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

  24. Inspired by your script I made one myself. It’s completely unobstrusive (no extra markup needed) and fully customizable.
    My Step-By-Step Wizard

  25. 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 ?

  26. You have an outstanding good and well structured site. I enjoyed browsing through it.I

  27. I enjoy your site very much! THANK YOU

  28. Your work is marvelous!!

  29. Could you please help me? I would really appreciate it.
    Thank you.

  30. 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.

  31. Nice Post
    Informative & Useful One
    Thanks for great stuff
    Nimesh

  32. 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!

  33. Thanks…

Leave a Reply