Advanced Search

Results 1 to 5 of 5

Thread: Problem with animatedcollapse in chrome

  1. #1
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Problem with animatedcollapse in chrome

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,863
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  3. #3
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply,

    here's the test site.

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

  4. #4
    Join Date
    Aug 2004
    Posts
    9,863
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  5. #5
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, i've fixed it, just disabled the other script.

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
  •