Redcurb
asked on
Animated Collapsible DIV IE Browser compatibility issue
I used a popular script from the following site which was supposed to be fully browser compatible on my website for my search page (see code and link)
This is where we got the code form originally:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
In FireFox everything works fine but in IE only the last section will open when clicked. All other sections (or tabs) open for a spit second and instantly close again.
We are at our whits end on this one and really need a solution fast for our client otherwise we look really bad as you can imagine when we open up the site in IE and it does not work!
We've created a test page here for you to see the exact issue, also attached is all code we used to create this function. You can see what we are talking about here:
http://bit.ly/cRtkgB
Could you please let us know what to change in our code to make this work properly in IE so that all tabs can be opened at one time (like they do in firefox)?
Thank you.
This is where we got the code form originally:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
In FireFox everything works fine but in IE only the last section will open when clicked. All other sections (or tabs) open for a spit second and instantly close again.
We are at our whits end on this one and really need a solution fast for our client otherwise we look really bad as you can imagine when we open up the site in IE and it does not work!
We've created a test page here for you to see the exact issue, also attached is all code we used to create this function. You can see what we are talking about here:
http://bit.ly/cRtkgB
Could you please let us know what to change in our code to make this work properly in IE so that all tabs can be opened at one time (like they do in firefox)?
Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<script>
function consultantContact(act, form) {
//var form = document.getElementById("businessProfileForm");
// form.action_name.value = act;
form.submit();
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">
</script>
<script type="text/javascript">
animatedcollapse.addDiv('business-school', 'fade=1,height=220px')
animatedcollapse.addDiv('personal-info', 'fade=1,height=200px')
animatedcollapse.addDiv('experience', 'fade=1,height=310px')
animatedcollapse.addDiv('interests', 'fade=1,height=250px')
animatedcollapse.addDiv('preferences', 'fade=1,height=160px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<body>
<div id="main-content">
<div id="header-spacer1"></div>
<!-- begin of searchForm -->
<form enctype="multipart/form-data" action="{$config.web_location}/index.php" method="post" name="searchForm" id="searchForm">
<input type="hidden" name="p" value="{$p}">
<input type="hidden" name="action" value="search">
<div id="accordion-holder">
<div style="width: 900px; height:175px; background-color:#E3F1F4;">
<table width="960" cellpadding="10" cellspacing="10" class="search-personal-information search-headings">
<tr>
<td>
<label>Keyword Search<br />
<input type="text" size="50" name="keyword" value="{$typeData.keyword}" id="keyword" />
</label><br /><br />
</td>
<td>
<label>Project Format <br />
<select name="project_format" id="project_format" size="7" multiple="multiple" >
<option>Valuation</option>
<option>Marketing</option>
<option>Finance</option>
</select>
</label>
</td>
<td>
<label>Industry <br />
<select name="industry" id="industry" size="7" multiple="multiple" >
<option>Industry 1</option>
<option>Industry 2</option>
<option>Industry 3</option>
</select>
</label>
</td>
</tr>
</table>
</div>
<a class="search-category-buttons" href="javascript:animatedcollapse.toggle('business-school')">Business School ↓</a>
<div id="business-school" style="width: 900px; background: #E3F1F4; display:none">
<table cellpadding="10" cellspacing="10" class="search-business-school search-headings">
<tr>
<td>
Test<br />
<select name="mba_school" size="10" multiple="multiple">
<option value=""></option>
<option value="Harvard University" {if $typeData.organization_affiliation == "Harvard University"}selected{/if}>Harvard University</option>
<option value="Columbia University" {if $typeData.organization_affiliation == "Columbia University"}selected{/if}>Columbia University</option>
<option value="Cornell University" {if $typeData.organization_affiliation == "Cornell University"}selected{/if}>Cornell University</option>
</select>
</td>
<td>
test
</td>
</tr>
</table>
</div>
<a class="search-category-buttons" href="javascript:animatedcollapse.toggle('personal-info')">Personal Information ↓</a>
<div id="personal-info" style="width: 900px; background: #E3F1F4; display:none">
<table cellpadding="10" cellspacing="10" class="search-personal-information search-headings">
<tr>
<td valign="top">
<label>Name<br />
<input type="text" name="name" id="name" />
</label><br /><br />
<label>Email<br />
<input type="text" name="email" value = "{$typeData.email}" id="Email" />
</label><br /><br />
</td>
<td valign="top">
<!--Populate from whatever is a city -->
<label>City<br />
<input type="text" name="city" value = "{$typeData.city}" id="City" />
</label><br /><br />
</td>
<td valign="top">
<label>Country<br />
<select name="country" id="Country" >
<option value=""></option>
{foreach from=$countryData item=data key=idx}
<option value="{$data.c_name}" {if $typeData.country == $data.c_name}selected{/if}>{$data.c_name}</option>
{/foreach}
</select>
</label><br /><br />
<label>Languages Spoken<br />
<select name="Language" id="Language" >
<option>English</option>
<option>Spanish</option>
<option>French</option>
</select>
</label>
</td>
</tr>
</table>
</div>
<a class="search-category-buttons" href="javascript:animatedcollapse.toggle('experience')">Experience ↓</a>
<div id="experience" style="width: 900px; background: #E3F1F4; display:none">
<table cellpadding="10" cellspacing="10" class="search-experience search-headings">
<tr>
<td valign="top">
<label>Industry of Experience 1<br />
<select name="industry_of_experience1" id="industry_of_experience1" size="10" multiple="multiple" >
<option value=""></option>
<option value="Option 1" {if $typeData.industry_of_experience1 == "Option 1"}selected{/if}>Option 1</option>
<option value="Option 2" {if $typeData.industry_of_experience1 == "Option 2"}selected{/if}>Option 2</option>
<option value="Option 3" {if $typeData.industry_of_experience1 == "Option 3"}selected{/if}>Option 3</option>
</select>
</label>
</td>
<td valign="top">
<label>Job Function of Experience 1<br />
<select name="job_function_of_experience1" id="job_function_of_experience1" size="10" multiple="multiple" >
<option value=""></option>
<option value="Option 1" {if $typeData.job_function_of_experience1 == "Option 1"}selected{/if}>Option 1</option>
<option value="Option 2" {if $typeData.job_function_of_experience1 == "Option 2"}selected{/if}>Option 2</option>
<option value="Option 3" {if $typeData.job_function_of_experience1 == "Option 3"}selected{/if}>Option 3</option>
</select>
</label>
</td>
<td valign="top">
<label>Region of Experience<br />
<select name="Region of Experience" id="Region of Experience" size="10" multiple="multiple" >
<option>Europe</option>
<option>MENA</option>
<option>Africa</option>
<option>Asia</option>
</select>
</label><br /><br />
</td>
<td valign="top">
<label>City of Experience<br />
<input type="text" name="City" id="City" />
</label>
<br />
<br />
<label>State of Experience<br />
</label>
<br />
<br />
<label>Country<br />
<select name="country1" id="country" >
<option value=""></option>
{foreach from=$countryData item=data key=idx}
<option value="{$data.c_name}" {if $typeData.country1 == $data.c_name}selected{/if}>{$data.c_name}</option>
{/foreach}
</select>
</label>
<br />
<br />
<label>Previous Companies <br />
<input type="text" name="Previous Companies" id="Previous Companies" />
</label><br /><br />
</td>
</tr>
</table>
</div>
<a class="search-category-buttons" href="javascript:animatedcollapse.toggle('interests')">Interests ↓</a>
<div id="interests" style="width: 900px; background: #E3F1F4; display:none">
<table cellpadding="10" cellspacing="10" class="search-experience search-headings">
<tr>
<td valign="top">
<label>Industry of Interests 1<br />
<select name="industry_of_interest1" id="industry_of_interest1" size="10" multiple="multiple" >
<option value=""></option>
<option value="Option 1" {if $typeData.industry_of_interest1 == "Option 1"}selected{/if}>Option 1</option>
<option value="Option 2" {if $typeData.industry_of_interest1 == "Option 2"}selected{/if}>Option 2</option>
<option value="Option 3" {if $typeData.industry_of_interest1 == "Option 3"}selected{/if}>Option 3</option>
</select>
</label>
</td>
<td valign="top">
<label>Job Function of Interests 1<br />
<select name="job_function_of_interest1" id="job_function_of_interest1" size="10" multiple="multiple" >
<option value=""></option>
<option value="Option 1" {if $typeData.job_function_of_interest1 == "Option 1"}selected{/if}>Option 1</option>
<option value="Option 2" {if $typeData.job_function_of_interest1 == "Option 2"}selected{/if}>Option 2</option>
<option value="Option 3" {if $typeData.job_function_of_interest1 == "Option 3"}selected{/if}>Option 3</option>
</select>
</label>
</td>
<td valign="top">
<label>Region of Interests<br />
<select name="Region of Interests" id="Region of Interests" size="10" multiple="multiple" >
<option>Europe</option>
<option>MENA</option>
<option>Africa</option>
<option>Asia</option>
</select>
</label><br /><br />
</td>
<td valign="top">
<label>City of Interests<br />
<input type="text" name="city1" value="{$typeData.city1}" id="City" />
</label>
<br />
<br />
<label>State of Interests<br />
</label>
<br />
<br />
<label>Country<br />
<select name="country2" id="country" >
<option value=""></option>
{foreach from=$countryData item=data key=idx}
<option value="{$data.c_name}" {if $typeData.country2 == $data.c_name}selected{/if}>{$data.c_name}</option>
{/foreach}
</select>
</label><br /><br />
</td>
</tr>
</table>
</div>
<a class="search-category-buttons" href="javascript:animatedcollapse.toggle('preferences')">Preferences ↓</a>
<div id="preferences" style="width: 900px; background: #E3F1F4; display:none">
<table cellpadding="10" cellspacing="10" class="search-preferences search-headings">
<tr>
<td valign="top">Hours want to work per week
<select name="hours_you_want">
<option value=""></option>
<option value="1-4" {if $typeData.hours_you_want == "1-4"}selected{/if}>1-4</option>
<option value="4-8" {if $typeData.hours_you_want == "4-8"}selected{/if}>4-8</option>
<option value="8+" {if $typeData.hours_you_want == "8+"}selected{/if}>8+</option>
</select>
</td>
<td valign="top">
<label>Project type preference 1<br />
<select name="project_type_preference1" id="project_type_preference1" size="3" multiple="multiple" >
<option value=""></option>
<option value="One-To-One" {if $typeData.project_type_preference1 == "One-To-One"}selected{/if}>One-To-One</option>
<option value="Team" {if $typeData.project_type_preference1 == "Team"}selected{/if}>Team</option>
<option value="Competition" {if $typeData.project_type_preference1 == "Competition"}selected{/if}>Competition</option>
</select>
</label>
</td>
<td valign="top">Previous Education 1<br /> <input name="previous_education1" value="{$typeData.previous_education1}" type="text" size="25" /></td>
</tr>
</table>
</div>
</div>
<input name="search" type="submit" value="Search" /><br /><br />
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
it works in IE 6
4.htm