Advanced Search

Results 1 to 3 of 3

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

  1. #1
    Join Date
    Aug 2011
    Posts
    27
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

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

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

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

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    antonyf (01-24-2012)

  4. #3
    Join Date
    Aug 2011
    Posts
    27
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi ddadmin,
    Thank you for the replying.

    Your fix works perfectly.

    Thank you.
    rgs
    Tony

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •