PDA

View Full Version : Problem with animatedcollapse in chrome



w0w
06-27-2010, 06:03 AM
1) Script Title: Animated Collapse DIV 2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: Working perfect n IE and Firefox but not in Google Chrome

Css


.table-blue{
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#000;
text-align:left;
border:1px solid #F00;
width:500px;
padding:2px;
margin:5px;
background-color:#FFFDF8;
}
.blue-bar-left{
margin-top:10px;
width:480px;
height:20px;
background-color:#034DBD;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-stretch:extra-expanded;
font-weight:bold;
margin-left:10px;
}
.table-info2{
width:480px;
margin-left:10px;
}
.text-spacing{
margin-top:3px;
margin-bottom:3px;
text-align:left;
}

Head tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $my_web. ' - ' .$page_title ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="js/default.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightwindow.js"></script>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/animatedcollapse.js">

</script>


<script type="text/javascript">
animatedcollapse.addDiv('newjob','fade=1,speed=400,group=prof,hide=1')
animatedcollapse.init()
</script>
</head>
<body>

Animated

<div style="margin:2px;"><a href="#" rel="toggle[newjob]">ADD NEW JOB</a></div>
<form name="newjob1" action="#" method="post" enctype="multipart/form-data">
<div class="table-blue" id="newjob">
<div class="blue-bar-left">POST NEW JOB</div>
<div class="spacer" style="margin-top:10px;"></div>
<div class="table-info2">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150"><div class="text-spacing"><strong>Position</strong></div></td>
<td width="450"><div class="text-spacing"><strong>:&nbsp;</strong><input name="position" type="text" class="txtfield" id="position" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Location/Country</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><select name="country" class="selectfield" />
<option value="Please select one..." selected="selected">Please select one...</option>
<option value="USA">USA</option>
<option value="Singapore">Singapore</option>
</select></div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Gender</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><select name="gender" class="select2" id="gender">
<option value="<?php echo $civil_status;?>" selected="selected">Male</option>
<option value="Single">Female</option>
<option value="Married">Any</option>
</select></div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Age</strong></div></td>
<td><div class="text-spacing"><strong>&nbsp;&nbsp;</strong><input name="age" type="text" class="txtfield" id="age" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Education</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><input name="education" type="text" class="txtfield" id="education" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Work Experience</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><input name="work_ex" type="text" class="txtfield" id="work_ex" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Pricipal Project</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><input name="principal_project" type="text" class="txtfield" id="principal_project" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Contact Person</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><input name="contact_person" type="text" class="txtfield" id="contact_person" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Skills</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><input name="skills" type="text" class="txtfield" id="skills" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>No. of Vacancy</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><input name="vacancy" type="text" class="txtfield" id="vacancy" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Salary</strong></div></td>
<td><div class="text-spacing"><strong>:&nbsp;</strong><input name="salary" type="text" class="txtfield" id="salary" />
</div></td>
</tr>
<tr>
<td><div class="text-spacing"><strong>Job Description</strong></div></td>
<td><div class="text-spacing"><strong>&nbsp;&nbsp;</strong><textarea name="description" cols="40" rows="3" class="txtfield" id="description"></textarea>
</div></td>
</tr>
<tr>
<td colspan="2"><div class="text-spacing"><input name="submitbtn" type="Submit" value="Submit" class="btn2" /></div></td>
</tr>
</table>
</div>
<div class="table-bottom-profile"></div>
</div>
</form>

Any Idea please help.. THanks

ddadmin
06-28-2010, 07:52 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.

w0w
06-29-2010, 02:50 PM
Thanks for the reply,

here's the test site.

http://crizdesign.com/test/test.htm

ddadmin
06-29-2010, 07:44 PM
Hmm I suspect the problem is a conflict between this script and one of the other scripts on your page. To start, what happens if you add the following in red near the top of animatedcollapse.js:


jQuery.noConflict()

var animatedcollapse={
"
"

? If that doesn't fix the issue, next thing to try is to disable all other scripts on your page except jQuery and the Collapsible script.

w0w
06-30-2010, 01:02 AM
Thanks, i've fixed it, just disabled the other script. :)