Advanced Search

Results 1 to 4 of 4

Thread: Accordion menu to equalize collumns on expand

  1. #1
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Accordion menu to equalize collumns on expand

    1) Script Title: Accordion menu script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

    3) Describe problem: I'm using the accordion menu script in a standard CSS-driven layout where I've used a navigation div tag that's been absolutely postioned on the left of the body content. In instances where there is not much content in the body area, the nav expands and overlaps the footer. Is there a way...maybe using the onexpandcollapse area of this script to insert javascipt to look at the heights of both the nav div and body div and make them equal...directly after the menu is expanded by the user? I need it triggered each time a section on the menu is expanded.

    -Cameron

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.


    Please include your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].


    Please to the above before we can proceed in helping you.
    Jeremy | jfein.net

  3. #3
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    An example page can be seen at http://www.berry.edu/provost/. If you expand the Programs and Resources page, you'll see what I mean.

    The nav bar list is saved as an include and is simply your standard set-up with some style tweaks.

    The include is placed in each page as follows:
    Code:
    <div id="contentwrapper">
    <div id="navcol">
      <!--#include virtual="/provost/bcconfig/bcnav.htm" --></div>
    <div id="maincol">
    ...body content
    </div>
    </div>
    The styles used are as follows:
    Code:
    #contentwrapper {
    	position: relative;
    	margin: 0 auto;
    	width: 795px;
    	text-align: left;
    	z-index: 1;
    	background-color: #FFFFFF;
    	border-right-width: 1px;
    	border-left-width: 1px;
    	border-right-style: solid;
    	border-left-style: solid;
    	border-right-color: #999999;
    	border-left-color: #999999;
    }
    #navcol {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	margin: 0px;
    	padding-top: 7px;
    	padding-left: 5px;
    	padding-bottom: 2px;
    	width:140px;
    	background-color:#FFFFFF;
    	/*height: auto;
    	min-height: auto;*/
    	z-index: 1;
    	}
    #maincol {
    	position: relative;
    	margin-left: 141px;
    	width: 634px;
    	background-color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	padding-top: 7px;
    	padding-right: 5px;
    	padding-bottom: 0px;
    	padding-left: 14px;	
                 /*height: auto;
    	min-height: auto;*/
    }
    The actual config for the menu looks like this:
    Code:
    ddaccordion.init({
    	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    	contentclass: "categoryitems", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [<%= navexpandindex %>], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: false, //persist state of opened contents within browser session?
    	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    		
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    		
    	}
    	
    })

  4. #4
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Still hoping

    I'm still hoping someone can assist with this issue. I posted the code last week but have seen no additional updates.

Bookmarks

Posting Permissions

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