jQuery Form to Form Wizard (v1.1) style steps individually

[antonyf]

1) Script Title: jQuery Form to Form Wizard (v1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex16/formwizard.htm

3) Describe problem: Firstly thanks for another excellent script it solved a lot of space problems for me, and simplified my forms Greatly.

I am trying to style the steps individually, but im not having much success. I was specifically trying to replace the "Step 1" text with images or custom text and then make the width of each step box according to the text inside, instead of all 120px.

Is there a way to do this individually? And where should i begin to look?
rgs
Tony

[ddadmin]

To change the default "Step 1", "Step 2" etc text at the top of the form, you'll have to modify the .js file for that, specifically, the following line:


var $thestep=$('<div class="step disabledstep" />').data('section', i).html('Step '+(i+1)+'<div class="smalltext">'+$section.find('legend:eq(0)').text()+'</div>').appendTo($stepsguide)

Lets say you wish to change the text to images in the form of "step1.gif", "step2.gif" etc. You'd change the above line to:


var $thestep=$('<div class="step disabledstep" />').data('section', i).html('<img src="step'+(i+1)+'.gif" /><div class="smalltext">'+$section.find('legend:eq(0)').text()+'</div>').appendTo($stepsguide)

Regarding your related question, you can get the container for each "step" to be flexible, instead of hardcoded to a number such as 120px by editing the CSS for it. Instead of:


div.stepsguide .step{ /*div that wraps around each "steps" text */
width:120px; /*width of each "steps" text*/
font: bold 24px Arial;
float:left;
}

Try changing that to:


div.stepsguide .step{ /*div that wraps around each "steps" text */
font: bold 24px Arial;
display:inline-block;
margin-right: 5px;
}

[antonyf]

Hi ddadmin,
Thank you for the replying.

Your fix works perfectly.

Thank you.
rgs
Tony