Apple Accordion menu item "flashing" on close

**jrattinger** · 09-03-2009, 12:55 AM

1) Script Title: Apple style Accordion Menu

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

3) Describe problem:

First off, I just want to say that I really like the "Apple style Accordion Menu", but I am having a few issues. I have been banging my head on and off for about a month now, so hopefully someone can point me in the right direction.

I am including the css and html from my project. I am using the Expression Engine CMS, so you might see some code that looks strange. I think you can ignore most of it though. I also have kept in some commented out code, just to show a few things that I have tried in the past.

These are show stoppers for my client...

Issue 1:
On the following page (http://www.crisloid.com/ee/index.php...mited-edition/), the accordion menu displays images or a flash item when an menu item is selected. I am configured so that one item will always be open. The problem is that when a different item is selected, the currently open item will "flash" its contents after it is closed. It almost looks like a "blink". For images, the problem only seems to occur on IE. With Flash, it happens on both IE and firefox, but works perfectly on Chrome. I have no clue how to fix this. I did just notice that this does not occur on the dynamic drive example page. The accordian will also exhibit a "bounce" if there are more than 2 menu items. This is highlighted in the next issue on another page of mine.

Issue 2:
On the following page (http://www.crisloid.com/ee/index.php/crisloid/products/), the accordion menu on the left has a "bounce" to it. As the list items fall to the bottom of the list, the items already there experience a slight bounce and sometimes you can even see the contents of the item flashed quickly. It's not a huge distraction, but enough of one to annoy my client. I assume this is a formatting/padding issue but all atempts have come up short. this behaviour is exibited on firefox, IE and chrome. I see many examples of this behaviour, including the dynamic drive page above. Any insight would be great.

Again, thanks for any help or incite.

Kind Regards,
John

**ddadmin** · 09-04-2009, 01:39 AM

With regards to the issues:

1) In IE and FF, when you change the height of a DIV, the height of the Flash doesn't/ cannot change with it. I'm not sure if there is a solution to this, but from a JavaScript standpoint, one less than ideal option is to hide the Flash content whenever the DIV is collapsed, then reveal it again once the parent DIV is fully expanded. To do this, you can use the onopenclose() event handler of the script, something like:

Code:

onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 if (state=="block"){ //if header is expanded
  flashobjectreference.style.display="block"
 else
  flashobjectreference.style.display="none" //hide Flash object if DIV is collapsed
 }
}

The above is obviously just pseudo code, but that's the idea anyway.

For #2, does it only occur in IE? If so, the problem is simply that your page is missing a valid doctype at the top, such as:

Code:

<!DOCTYPE HTML>

Thread: Apple Accordion menu item "flashing" on close

Thread Tools

Search Thread

Apple Accordion menu item "flashing" on close

Bookmarks

Bookmarks

Posting Permissions