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/dynamici...edcollapse.htm

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

Css

Code:

.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

Code:

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

Code:

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

Code:

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.

Thread: Problem with animatedcollapse in chrome

Thread Tools

Search Thread

Problem with animatedcollapse in chrome

Bookmarks

Bookmarks

Posting Permissions