Top

Jquery Wizard Plugin

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

anthony@worcesterwideweb.com

34 Comments
  • steven riley
    June 5, 2007 at 1:23 pm

    Thanks nice job!

  • Ted Ellis
    July 15, 2007 at 3:01 pm

    Brilliant! Thank you so much!

  • Ted Ellis
    July 15, 2007 at 3:12 pm

    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!

  • Justin
    July 17, 2007 at 7:30 pm

    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.

  • Jose Montiel
    August 7, 2007 at 11:49 pm

    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

  • Will B.
    August 28, 2007 at 1:29 pm

    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.

  • startoy
    October 26, 2007 at 1:35 am

    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

  • jerrymiah
    November 6, 2007 at 1:02 am

    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… 🙂

  • Ivan Vianna
    December 8, 2007 at 7:18 pm

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

  • ctraos
    January 28, 2008 at 10:48 am

    Exelente trabajo, muchas gracias

  • komik
    February 22, 2008 at 5:22 pm

    thank you

  • David Jacques-Louis
    February 23, 2008 at 7:06 am

    This is one I will use on my site.

  • ctraos
    March 7, 2008 at 11:28 am

    gracias muy buen trabajo

  • sumit
    April 16, 2008 at 10:28 pm

    really cool thank you

  • Shaiju
    May 25, 2008 at 3:36 am

    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?

  • James
    May 28, 2008 at 7:08 am

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

  • BuCzO
    June 19, 2008 at 6:23 am

    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.

  • Chuck
    July 15, 2008 at 5:48 am

    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

  • shopping cart
    July 15, 2008 at 7:49 am

    Hi,

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

  • bedrijfskleding
    July 21, 2008 at 10:33 am

    yes where?

  • Jerod Santo
    August 9, 2008 at 7:24 pm

    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

  • Rob
    August 11, 2008 at 11:09 am

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

  • Deepak
    September 23, 2008 at 2:58 am

    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 ?

  • Melissa
    October 4, 2008 at 10:53 am

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

  • Albert
    October 5, 2008 at 7:30 pm

    I enjoy your site very much! THANK YOU

  • lhuv
    October 12, 2008 at 3:26 am

    Your work is marvelous!!

  • kalsit
    November 18, 2008 at 9:14 am

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

  • Ramesh
    November 27, 2008 at 5:12 am

    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.

  • Nimesh – Perception System
    July 24, 2009 at 6:33 am

    Nice Post
    Informative & Useful One
    Thanks for great stuff
    Nimesh

  • facebook
    February 15, 2013 at 10:32 am

    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!

  • Udeh
    March 8, 2013 at 8:19 am

    Thanks…

Post a Comment