Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Accordion Help

  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Accordion Help

    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!
    Last edited by niemie; 08-06-2008 at 10:44 PM.

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    You need to set your default height in the head of your document.
    Code:
    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:
    Code:
    .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;
    		}

  • Users who have thanked ninnypants for this post:

    niemie (08-06-2008)

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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:

    Code:
    .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;
    }

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Try adding an overflow hidden to it so that the div overflow doesn't effect the rest of the page.

  • #7
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, added that so now it is:

    Code:
    .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.

  • #8
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Did you add any elements inside those div's that would cause problems, and have you validated your markup?

  • #9
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Got it!

    Added this:

    #horizontal_container {
    overflow:hidden;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •