Anim. Collapsible Div: content sliding up/down jerks

[amberdesignz]

1) Script Title: Animated Collapsible DIV v2.01

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

3) Describe problem:

I installed this script and it works almost perfect. For some reason it is not as smooth as it should be. When the Div is opening and closing the links sliding up and down jerk real bad at the beginning and at the end. I have 29 links and two of them work perfect. NGK and Motion Pro work fine.

http://justinsoule.com/bike4.html

Here is some of the CSS:
.popup-box { border: 5px solid #FF6600; padding: 5px; display: none; background: #FFFFFF; font: 10px Arial, Helvetica, sans-serif; width: 118px; }

#table5 { margin-left: 5px; padding-bottom: 50px; }

.col1 { float: left; }
.col2 { float: left; }
.col3 { float: left; }
.col4 { float: left; }
.col5 { float: left; }

.logossmall { list-style: none; }

.logossmall li { list-style: none; background-repeat: no-repeat; padding: 10px; }

.logossmall li a, .logossmall li a:visited { display: block; text-decoration: none; text-indent: -9000px; list-style: none; width: 125px; }

ul.logossmall { list-style:none; margin: 5px 0 5px 0; padding: 10px 2px 10px 2px; }


.astar-sm a { background: url(img/logos/logos-small/astar.png) no-repeat center center; width: 100px; height: 43px; }

.asterisk-sm a { background: url(img/logos/logos-small/asterisk.png) center center no-repeat; width: 75px; height: 61px; }

[ddadmin]

I tried tinkering with the HTML for a while, and from what I can tell, the problem is due to the fact that the DIVs you're collapsing contains an explicit border and padding. In your CSS, if you set "5px" to 0 below:


.popup-box { border: 0px solid #FF6600; padding: 0px; display: none; background: #FFFFFF; font: 10px Arial, Helvetica, sans-serif; width: 118px; }

The problem seems to be fixed in FF. The animation effect is handled by jQuery, so assuming that is the issue, try updating your jQuery reference on the page from version 1.2.2 to the lastest version:


<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

And see if that fixes the issue for you. Let me know.

[amberdesignz]

Well that worked. No padding or border. But now I don't like it without the padding. All that work- now I might use the "Drop down/ Overlapping Content script".

Thanks for the fast reply!

-Where do I find the latest jquery. At http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm it says updated 1.2.6 but the only one to download is the 1.2.2.

[amberdesignz]

okay found it. But it didn't make any difference.
Thanks-

Off to the Drop down/ Overlapping Content script

[ddadmin]

Ok, so the issue is a jQuery animation one it seems (rather than with the script itself). FYI you can most likely get around it by creating another DIV within the main DIV you're expanding/collapsing, and applying any border/padding to that inner DIV instead. Something like:


<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<div style="border:5px solid red">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>
</div>

[amberdesignz]

Well that is good to know. But I already changed it to the other script.
http://www.justinsoule.com/bike.html

But I do like the collapsible script- I'm sure I'll use it in another site.

Thanks so much-
Amber