PDA

View Full Version : Animated Collapsible DIV - broken images



geofffranklin1
11-10-2010, 08:02 PM
Using : animated collapsible div v2.4

Link to site : http://www.cwitsolutions.com/sample/test.html

Basically I've got all the toggles working and everything appears fine when i preview it in Dreamweaver CS5. But when I upload the page to my server all the images are broken. I've checked all of the urls. Everything is correct. I've even tried using the full image path. Any one have any issues with this?? Feel free to check out the code on the page.... Thanks for any help guys (or girls.)....

[code]

<!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>CWIT Solutions</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/animatedcollapse.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('maintoggle', 'speed=400,fade=0,group=links')
animatedcollapse.addDiv('aboutustoggle', 'speed=400,fade=0,group=links')
animatedcollapse.addDiv('graphicdesigntoggle', 'speed=400,fade=0,group=links')
animatedcollapse.addDiv('webdesigntoggle', 'speed=400,fade=0,group=links')
animatedcollapse.addDiv('computersupporttoggle', 'speed=400,fade=0,group=links')
animatedcollapse.addDiv('contacttoggle', 'speed=400,fade=0,group=links')
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>


</head>

<body>

<div id="container" align="center">
<div id="header">
<div><a href="#" rel="toggle[maintoggle]"><img src="images/header.jpg" width="700" height="154" alt="header.jpg" border="0" /></a></div>
</div>


<div id="container2" align="center" >
<div id="maintoggle" class="toggle" align="center">
ALL THE INFO GOES HERE
</div>

<div id="aboutus">
<div><a href="#" rel="toggle[aboutustoggle]"><img src="images/aboutus.jpg" width="700px" height="40px" alt="aboutus.jpg" "border="0" /></a></div>
<div id="aboutustoggle" class="toggle" align="center">
ALL THE INFO GOES HERE
</div>
</div>



<div id="graphicdesign">
<div><a href="#" rel="toggle[graphicdesigntoggle]"><img src="images/graphicdesign.jpg" width="700px" height="40px" alt="graphicdesign.jpg" border="0" /></a></div>
<div id="graphicdesigntoggle" class="toggle" align="center">
ALL THE INFO GOES HERE
</div>
</div>


<div id="webdesign">
<div><a href="#" rel="toggle[webdesigntoggle]"><img src="images/webdesign.jpg" width="700px" height="40px" alt="webdesign.jpg" border="0" /></a></div>
<div id="webdesigntoggle" class="toggle" align="center">
ALL THE INFO GOES HERE
</div>
</div>


<div id="computersupport">
<div><a href="#" rel="toggle[computersupporttoggle]"><img src="images/computersupport.jpg" width="700px" height="40px" alt="computersupport.jpg" border="0" /></a></div>
<div id="computersupporttoggle" class="toggle" align="center">
ALL THE INFO GOES HERE
</div>
</div>
<div id="contact">
<div><a href="#" rel="toggle[contacttoggle]"><img src="images/contact.jpg" width="700px" height="40px" alt="contact.jpg" border="0" /></a></div>
<div id="contacttoggle" class="toggle" align="center">
ALL THE INFO GOES HERE
</div>
</div>

</div>
</div>

</body>
</html>

[code]

geofffranklin1
11-10-2010, 10:37 PM
I fixed the issue..... I was missing the image link toggle....

[code]

<div><a href="#" rel="toggle[maintoggle]" data-openimage="images/header.jpg" data-closedimage="images/header.jpg"><img src="images/header.jpg" width="700" height="154" alt="header.jpg" border="0" /></a></div>