...

View Full Version : Accordion Help



niemie
08-06-2008, 08:13 PM
We've implemented an accordion script (http://stickmanlabs.com/accordion/) on a site in development, and found that the footer beneath it is "bouncing" for accordion elements that have more than just a few characters of text (the first 2 basically).

The accordion is at the bottom and if you have the footer in view you can see what I am talking about when you manipulate the first few bars. I've found that this happens in FF and in Safari, but not on IE7..... can't seem to figure it out. Any help would be awesome!

ninnypants
08-06-2008, 08:35 PM
Try hiding you text before the accordion animation takes place It appears to be that the height of your element grows and pushes your footer out of the way.

niemie
08-06-2008, 08:38 PM
Is there a specific way to go about doing this in the js? Sorry, I'm not much on js and the dev wasn't able to figure out a way around it.

ninnypants
08-06-2008, 08:55 PM
You need to set your default height in the head of your document.


function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});

Or it's in the CSS here:


.horizontal_accordion_toggle {
/* REQUIRED */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */

display: block;
height: 100px;
width: 30px;
background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
color: #ffffff;
text-decoration: none;
outline: none;
border-right: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}

niemie
08-06-2008, 08:58 PM
I saw that a few minutes back and changed it so the height is in there, same as it is in the CSS (133px - was at a100 but now they are both 133px). Same thing is happening though.


function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
height: 133,
width : 290
},
direction : 'horizontal'
});

CSS:


.horizontal_accordion_content {
/* REQUIRED */
height: 133px; /* We need to define a height for the accordion as it stretches the width */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */

overflow: hidden;
/* background-color: #ffffff;*/
color: #444444;
}

ninnypants
08-06-2008, 09:10 PM
Try adding an overflow hidden to it so that the div overflow doesn't effect the rest of the page.

niemie
08-06-2008, 09:25 PM
Ok, added that so now it is:


.horizontal_accordion_toggle {
/* REQUIRED */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */

display: block;
height: 133px;
width: 26px;
background: #95a1a4;
color: #ffffff;
text-decoration: none;
outline: none;
border-right: 1px solid #eaeced;
cursor: pointer;
margin: 0 0 0 0;
overflow: hidden;
}

Same thing though.

ninnypants
08-06-2008, 09:32 PM
Did you add any elements inside those div's that would cause problems, and have you validated your markup?

niemie
08-06-2008, 09:41 PM
Not to my knowledge - i was pretty sure it was just a js thing. There might be something obvious but we haven't been able to find it.

niemie
08-06-2008, 10:43 PM
Got it!

Added this:

#horizontal_container {
overflow:hidden;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum