Worcester Web Site Development Blog

+ Almost all quality improvement comes via simplification of design, manufacturing... layout, processes, and procedures.

September 7, 2008, 10:23 am

Categories

Archives

Latest

-
-

Jquery Wizard Plugin

June 4, 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

Code (javascript)
  1.  
  2. 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.

Code (html)
  2. <p id="wizardwrapper"> </p>
  3. <p class="1"> </p>
  5. <h3>Step 1</h3>
  6. <p id="wizardcontent"> </p>
  8. <p class="buttons">
  9.       <button type="submit" disabled="true" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  11.       <button type="submit" onclick="loadnext(1,2);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  12. <ul id="mainNav" class="fiveStep">
  13. <li class="current"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  14.         <li><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  15.         <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  16.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  17. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  18. </ul>
  19. <p id="wizardpanel" class="2"> </p>
  21. <h3>Step 2</h3>
  22. <p id="wizardcontent"> </p>
  24. <p class="buttons">
  25.       <button type="submit" onclick="loadnext(2,1);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  27.       <button type="submit" onclick="loadnext(2,3);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  28. <ul id="mainNav" class="fiveStep">
  29. <li class="lastDone"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  30. <li class="current"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  31.         <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  32.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  33. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  34. </ul>
  35. <p id="wizardpanel" class="3"> </p>
  37. <h3>Step 3</h3>
  38. <p id="wizardcontent"> </p>
  40. <p class="buttons">
  41.       <button type="submit" onclick="loadnext(3,2);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  43.       <button type="submit" onclick="loadnext(3,4);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  44. <ul id="mainNav" class="fiveStep">
  45. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  46. <li class="lastDone"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  47. <li class="current"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  48.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  49. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  50. </ul>
  51. <p id="wizardpanel" class="4"> </p>
  53. <h3>Step 4</h3>
  54. <p id="wizardcontent"> </p>
  56. <p class="buttons">
  57.       <button type="submit" onclick="loadnext(4,3);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  59.       <button type="submit" onclick="loadnext(4,5);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  60. <ul id="mainNav" class="fiveStep">
  61. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  62. <li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  63. <li class="lastDone"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  64. <li class="current"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  65. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  66. </ul>
  67. <p id="wizardpanel" class="5"> </p>
  69. <h3>Step 5</h3>
  70. <p id="wizardcontent"> </p>
  72. <p class="buttons">
  73.       <button type="submit" onclick="loadnext(5,4);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  75.       <button type="submit" onclick="submit()" class="next"> Finish <img src="/images/arrow_right.png" /> </button>
  76. <ul id="mainNav" class="fiveStep">
  77. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  78. <li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  79. <li class="done"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  80. <li class="lastDone"><a href="/"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  81. <li class="mainNavNoBg current"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  82. </ul>
  83.  

A Demo of the wizard

Posted by Anthony LeBoeuf under jquery |

25 Comments »

  1. Thanks nice job!

    Comment by steven riley — June 5, 2007 @ 1:23 pm

  2. Brilliant! Thank you so much!

    Comment by Ted Ellis — July 15, 2007 @ 3:01 pm

  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!

    Comment by Ted Ellis — July 15, 2007 @ 3:12 pm

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

    Comment by Anthony LeBoeuf — July 15, 2007 @ 5:51 pm

  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.

    Comment by Justin — July 17, 2007 @ 7:30 pm

  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”);}

    Comment by Anthony LeBoeuf — July 17, 2007 @ 7:59 pm

  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

    Comment by Jose Montiel — August 7, 2007 @ 11:49 pm

  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.

    Comment by Will B. — August 28, 2007 @ 1:29 pm

  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

    Comment by startoy — October 26, 2007 @ 1:35 am

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

    Comment by jerrymiah — November 6, 2007 @ 1:02 am

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

    Comment by Ivan Vianna — December 8, 2007 @ 7:18 pm

  12. Exelente trabajo, muchas gracias

    Comment by ctraos — January 28, 2008 @ 10:48 am

  13. thank you

    Comment by komik — February 22, 2008 @ 5:22 pm

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

    Comment by David Jacques-Louis — February 23, 2008 @ 7:06 am

  15. gracias muy buen trabajo

    Comment by ctraos — March 7, 2008 @ 11:28 am

  16. really cool thank you

    Comment by sumit — April 16, 2008 @ 10:28 pm

  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?

    Comment by Shaiju — May 25, 2008 @ 3:36 am

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

    Comment by James — May 28, 2008 @ 7:08 am

  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.

    Comment by BuCzO — June 19, 2008 @ 6:23 am

  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

    Comment by Chuck — July 15, 2008 @ 5:48 am

  21. Hi,

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

    Comment by shopping cart — July 15, 2008 @ 7:49 am

  22. yes where?

    Comment by bedrijfskleding — July 21, 2008 @ 10:33 am

  23. Here you go

    http://worcesterwideweb.com/jquery/wizard/style.css

    Comment by Anthony LeBoeuf — July 21, 2008 @ 10:38 am

  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

    Comment by Jerod Santo — August 9, 2008 @ 7:24 pm

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

    Comment by Rob — August 11, 2008 @ 11:09 am

RSS feed for comments on this post. | Trackback

Leave a comment

XHTML ( You can use these tags): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> .

*
To prove that you're not a bot, enter this code
Anti-Spam Image

« Create Custom google maps    mysql update from another table »

Copyright © 2008 Worcester Web Site Development Blog | RSS Feed | CSS and XHTML
Powered by Wordpress | Design by Worcester Wide Web