Results 1 to 2 of 2

Thread: Form Wizard. Change height and custom navigation

  1. #1
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Form Wizard. Change height and custom navigation

    jQuery Form to Form Wizard
    http://www.dynamicdrive.com/dynamici...formwizard.htm

    Problems:
    1) I use your wonderful script and very happy with it. But I have expanded area inside my form, and when it expands, height is changed and content becomes partially hidden under previous/next buttons area. How can I call some function or what piece of code I need to write to resize page in manner as formwizard animates it?

    2) I would like to use own next/previous buttons inside each page. How can I do it?

    3) When form page content longer than screen size and user scrolled down it will be better by clicking to the next button next page scrolled to top of form. Have you any suggestion how to do this?

    Thanks in advance!

  2. #2
    Join Date
    Aug 2004
    Posts
    9,895
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Hmm lets tackle things one issue at a time. For 1), what you could do is "reload" the current panel when content inside the panel is expanded that in turn changes its height, revealing the additional content as well. In order to enable this, first, inside the .js file, find the below line, and remove the code in red:

    Code:
    		if (this.currentsection!=i && i<this.sections.count && doload){ //if next section to show isn't the same as the current section shown
    With this change you can now call:

    Code:
    formwizardinstance.loadsection(panelnumber)
    to "reload" a panel so it's shown/animated into view again, where panelnumber is the panel to reload (0=1st panel, 1=2nd panel etc). The below is a compete example where clicking on a link adds new content to the first panel, plus reload the panel to show the newly added content:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="formwizard.css" />
    
    <script src="formwizard.js" type="text/javascript">
    
    /***********************************************
    * jQuery Form to Form Wizard- (c) Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var myform=new formtowizard({
    	formid: 'feedbackform',
    	persistsection: true,
    	revealfx: ['slide', 500]
    })
    
    </script>
    
    <body>
    
    <form id="feedbackform">
    
    <fieldset class="sectionwrap" id="d">
    <legend>Basic Information</legend>
    Name:<br /> <input id="username" type="text" size="35" /><br />
    Age:<br /> <input id="age" type="text" size="6" /><br />
    Sex: <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female 
    </fieldset>
    
    <fieldset class="sectionwrap">
    <legend>Shipping Address</legend>
    Country:<br /> <input id="country" type="text" size="35" /><br />
    State/Province:<br /> <input id="state" type="text" size="35" /><br />
    Address #1:<br /> <input id="addr1" type="text" size="35" /><br />
    Address #2:<br /> <input id="addr2" type="text" size="35" /><br />
    </fieldset>
    
    <fieldset class="sectionwrap">
    <legend>Comments</legend>
    Any additional instructions:<br /> <textarea id="feedback" style="width:350px;height:150px"></textarea><br />
    <input type="submit" />
    </fieldset>
    
    </form>
    
    <a href="#" onClick="jQuery('#d').append('<p>This is new content added.</p>'); myform.loadsection(0); return false">Add Content to 1st Panel</a>
    DD Admin

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
  •