Results 1 to 2 of 2

Thread: ddaccordion.js and IE7

  1. #1
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ddaccordion.js and IE7

    Spent hours trying to sort this out but need help. Using the ddaccordion script with IE8, FF and the rest works fine but using it with IE7 causes large spaces between the menu items and when it expands it overlaps and blocks out the next menu itms on the list.

    See www.eventridersassociation.org/indexuk.php for what I mean. Any help would be much appreciated (I have tried just about eveything and am now at a complete loss!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Put this in the head of your page, right before the closing </head> tag:

    Code:
    <!--[if IE 7]>
    <style type="text/css">
    .submenu, .submenuheader {
    	display: inline-block;
    }
    </style>
    <![endif]-->
    Also, if you want the hover effects for the:

    Code:
    <a class="menuitem submenuheader" href="#">Organisation</a>
    items to work, give them each the throwaway href attribute as shown (highlighted).

    Now, in your js/menu.js file, all you really need is:

    Code:
    ddaccordion.init({
    	headerclass: "submenuheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //Shared CSS class name of contents group
    	collapseprev: false, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["suffix", "<img src='../images/plus.gif' class='statusicon' />", "<img src='../images/minus.gif' class='statusicon' />"], //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, isclicked){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    You don't have any of those other menus, so might as well get rid of their init calls.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •