PDA

View Full Version : Animated Collapsible Div: div renders in wrong spot



JBauerisGod
07-23-2009, 03:28 AM
1) Script Title: Animated Collapsible Div v2.4

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

3) Describe problem:

http://img269.imageshack.us/img269/9119/problem4.gif

The above picture kinda shows what happens in IE when I click another link to toggle the div. Sometimes it renders in the correct spot (as the top figure shows in the picture) but many times it renders as if the top div never collapsed (as the bottom figure shows in the pic). Everything occurs correctly in Firefox.

Here's the relevant code:
HTML

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

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('news1', 'fade=0,speed=400,group=news,persist=0')
animatedcollapse.addDiv('news2', 'fade=0,speed=400,group=news,persist=0,hide=1')
animatedcollapse.addDiv('news3', 'fade=0,speed=400,group=news,persist=0,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>

---------------------------------------

<div id="mcNews">
<h1><a href="#">News</a></h1>
<div id="mcNewsHL">
<ul>
<li><a href="#" rel="toggle[news1]">School to shut down?</a></li>
<li><a href="#" rel="toggle[news2]">School to shut down?</a></li>
<li><a href="#" rel="toggle[news3]">School to shut down?</a></li>
</ul>
</div>
<div id="mcNewsStory">
<div id="news1">
<a href="#">School to shut down?</a>
<h4>by Justin Jett</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis - <a href="#">>> Read More</a></p>
</div>

<div id="news2">
<a href="#">School to shut down?</a>
<h4>by Justin Jett</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis - <a href="#">>> Read More</a></p>
</div>

<div id="news3">
<a href="#">School to shut down?</a>
<h4>by Justin Jett</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis - <a href="#">>> Read More</a></p>
</div>
</div>
</div>


CSS


#mcNews{
clear: both;
width: 605px;
border-style: solid;
border-color: #bdbdbd;
border-width: 1px;
margin: 5px 8px 5px 5px;
position: relative;
height: 100%;
padding: 0 5px;
overflow: auto;
}

#mcNews h1 a{
color: #009690;
font-size: 1.1em;
border-style: dashed;
border-width: 0 0 1px 0;
border-color: #dfdfdf;
text-decoration: none;
}

#mcNewsHL{
float: left;
width: 250px;
margin: 5px;
}

#mcNewsHL ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#mcNewsHL li{
overflow: hidden;
background: url('images/dot.gif') 0 10px no-repeat;
padding: 0;
}

#mcNewsHL li a{
font-size: 0.82em;
color: black;
font-weight: bold;
text-decoration: none;
padding: 0 0 0 10px;
overflow: hidden;
margin: 0;
height: 1em;
line-height: 0.9em;
}

#mcNewsStory{
float: right;
width: 331px;
margin: 5px;
}

#mcNewsStory a{
color: #009690;
font-size: 1.22em;
text-decoration: none;
font-family: Georgia, Times, "Times New Roman", serif;
font-weight: bold;
display: inline;
}

#mcNewsStory p a{
font-size: 0.8em;
}

#news1, #news2, #news3{
font-size: 0.84em;
border-width: 0 0 0 1px;
border-style: solid;
border-color: #dfdfdf;
padding-left: 5px;
}