PDA

View Full Version : Accordion menu opens very fast suddenly



D72
04-03-2008, 12:31 PM
1) Script Title: Accordion Menu script

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

3) Describe problem:
It's not a real problem, though i'm a bit annoyed about a behaviour of this menu.
I'm using this accordion for content and not as a menu.
In the demo, when a button is clicked and about to expand, it slides smoothly.
But when i have a larger amount with content in it, the accordion slides smoothly for a number of pixels in height and then suddenly it just collaps open without a smooth sliding effect anymore. Is there some kind of variable to change this so the slide of the accordion is always running smoothly till it's fully opened?
When you click on an active button (the one that is allready open) the closing slide is smoothly all the time, from the bottom all the way up till it's closed. It's only when the accordion opens. Why is that? I really would like to have the same smooth behaviour.

To see what i mean you can have a look in here:
http://www.studio25.nl/accordion/

- Second question is, i have a similar menu structure and this one has a nice bouncing effect when you click to open a button.
Is it possible to have such effect with the script mentioned above?
I thought the menu with the bouncing effect is based on jQuery.
To see the bouncing effect live you can take a look in here:
http://www.automaticmusic.nl/test/

Thanks.
Dave.

ddadmin
04-04-2008, 08:02 AM
From what I can gather, the problem is due to the fact that you're limiting the width of your Accordion Content to a specific width:


.arrowlistmenu{
width: 400px; /*width of accordion menu*/
}

Normally this is fine, but in this case with your contents containing a lot of text, some long words that don't line break well, it causes the jolting effect at the very end of the animation you see. If you remove the above from your CSS, you see the issue disappearing.

Regarding your second question, I may add additional animation behaviors to this script similar to the one you referenced, but right now, there's no quick way to do that.

D72
04-04-2008, 09:12 AM
Thanks ddAdmin!
As you mentioned it was a problem of the customized div around and in the accordion i tried something.
In the first place i had myy style sheets something like:

#content {
width:400px;
margin:0 auto;
}

p {
margin:5px 10px;
padding:0;
text-align:justify;
line-height:normal;
}

Now i've checked if it does make any difference when i wrap an extra div around my paragraph.
So i changed it to this:

#content {
width:400px;
margin:0 auto;
}

.text{
background:#FFF;
width:400px;
margin:0;
padding:0;
}

p {
margin:0;
padding:10px;
text-align:justify;
line-height:normal;
}

And now it's running smoothly.
Thanks for pointing me to this.
I thought in the first place it was something of an height setting in the accordion it self. I'm glad i could be easily solved by css.

Thank you!

Dave.