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>
Bookmarks