Question

I am a total jQuery (and JS) beginner.

For my first attempt, I want a page which allows a user to specify something in 5 steps (with the option to cancel a step).

And I want to display this process horizontally.

Each step will have a choice of the next (combobox, listbox or radiogroup (which?)) which, when selected will display some text & maybe a graphic concerning the choice and offering the next choice.

Initially:

<choice>

User selects something …

                         <2nd choice>
<text 
 describing the choice>  <undo option>

<following text, describing what the user has selected so far>

user selects a second something …

                                               <3rd choice>
<text                    <text 
 describing the choice>  describing the choice> <undo option>

<following text, describing what the user has selected so far>

Questions:

1. What’s the best way to do this? A table? I know they can be A Bad Thing, but it sort of looks helpful here.

2. should I only allow undo of the last option? Actually all permutations of all 5 are valid, so maybe I should forget an undo button and just let the user make choices of anything – which would mean that I don’t reveal those choices one by one – they are always there (which sounds simpler)

3. since the choice affects the descriptive text (and maybe graphic) and these can be of differing size, how can I Prevent the following text from jumping around when a different choice is made? Or is that acceptable to the user?

I guess I could dimension them all to the size of the largest (I do not want to add scroll bars). But how to get that? I can’t use number of pixels in case user resizes screen(?) or switches CSS sheet (highly unlikely), so I guess percentages? but same problem?

4. table, divs or what for layout?

And if you have done four impossible things before breakfast, I’d like to to be cross browser with HTML 4 and CSS 2, please.

Answer 1

jQuery UI is a great choice to kill as many birds as possible with one Javascript stone. Creating a stepped horizontal input process sounds like you need tabs. There are many jQuery tab plugins but I have the most cross-browser success with jQuery UI although design changes can be more difficult because the themeroller takes some getting used to.

This article has a good illustration of how tabs could be used to make a multi-step form. http://pathfindersoftware.com/2008/03/jquery-form-and/

From the DOM point of view, I would recommend using DIV’s as your content containers because you can position them in anyway you want to and easily change the layout for different devices and feature detection like moderinzr. You can include tables inside the DIV’s when you want. Many people are pushing to use HTML5 containers like section and header but you’ll find those will start to fail quickly in older browsers.

The following is an outline of how you could arrange your page and some sample jquery to show you ways to toggle user defined selections which can include images, videos, text or anything you want to display. You could even make your list of available selections and then hide them with CSS, and only show those items when their corresponding form values have been selected.

One note is to remember the concept of id’s vs. classes. An ID should be a unique identifier, meaning it should only exist once per DOM. In CSS and jQuery ID’s are prefixed with with a hash or pound sign (#myID). Classes can exist multiple times in the DOM and are prefixed with a period (.myClass).

<div id="selectedValues">
    <p>Your progress:</p>
     <ul id="userSelections">
      <li><a rel="one" class="option remove">Option 1</a></li>
     </ul>

  </div>



<form id="tabbedForm">

 <div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Choice</a></li>
        <li><a href="#tabs-2">Second Choice</a></li>
        <li><a href="#tabs-3">Third Choice</a></li>
    </ul>
    <div id="tabs-1">
        <h2>First Choice Form Elements</h2>
            <a rel="one" class="option remove">Option 1</a>
            <a class="next" href="#">Next</a>

    </div>
    <div id="tabs-2">
        <h2>Second Choice Form Elements</h2>
            <a rel="two" class="option add">Option 2</a>
            <a class="next" href="#">Next</a>
    </div>
    <div id="tabs-3">
        <h2>Third Choice Form Elements</h2>
            <a rel="three" class="option add">Option 3</a>
            <input type="submit" value="Submit Form">
    </div>
 </div>

</div>

Once you get more involved with jQuery you can add and remove items from a list on the same page to show the user that options have been selected or deleted. The live() function allows jQuery to track dynamic elements on the page that didn’t exist in the DOM when the page was rendered.

// Basic jquery to show what the user has selected with animation
        $('.option').live('click', function(event) {
            event.preventDefault();

            // Get option/value/offering/product id, which can be stored in element attribute like rel
            var id = $(this).attr("rel");

            if( $(this).hasClass("remove") ){
                // Remove option
                $("#userSelections a[rel='"+ id +"']").fadeOut("fast");
                $("#userSelections a[rel='"+ id +"']").remove();
                // toggle class in the options list
                $("a[rel='"+ id +"']").toggleClass('add');
                $("a[rel='"+ id +"']").toggleClass('remove');
            }
            else {
                // Add option
                $(this).clone().appendTo("#userSelections").append('<li>');
            }

        });