Menu Flicker

nicksoni / 2008-07-29 22:39:27   

Hi I am running Ross Cairns' collapsing javascript menu, and have noticed that when clicking on exhibits the menu flickers in Firefox and is even visible for a moment, and flickers in general on Safari.

Does anyone know of a way to prevent this from happening?

/n

snoep / 2008-07-30 09:22:00   

Hi!

I am working on this as well. Right now I am using the script on my site and it works for me with FF3 on PC/MAC.

I also wanted to modify it to close each section, whenever a different one is clicked, but I failed (it was flickering like yours). As I Know so far, this has something to do with the whole page being reloaded, when an exhibit is clicked (because of the href).

Could you give me the link to your site?

Stefan.

nicksoni / 2008-07-31 02:29:35   

The script works okay for me as well. When a sub menu is opened and a exhibit is clicked, and THEN I click a new sub menu the nav no longer collapses until the new exhibit is click in a new section. Not too big of a deal I suppose. The flickering is annoying though.

My site is www.nicksoni.com

/n

AntoineLafontaine / 2008-07-31 08:30:32   


From my experience, this flickering is a common thing seen when doing javascript "animation".

The page is first displayed and then javascript (in this case jQuery+some custom script) handles the hiding of the menu items that are to be hidden and so on. This means that is is possible that the full page might be displayed (if only for a glimpse) before javascript kicks in and hides the desired parts.

jQuery does provide the $(document).ready() function to activate the javascript as soon as the document is available, but this is not a perfect world... loading page time, browser "qwirks" will always give some inconsistencies (without jQuery, you can't imagine the nightmare...).

You could use CSS and hide your items by default and then reveal them with javascript, but this is considered very bad practice since a user not using javascript won't get the content at all.

I think is a thing that web designer need to learn to live with most of the time. Trying to improve your page loading time, the order in which you do your javascript magic, caching, having less pictures or smaller pictures(pictures are though on the browser rendering engine) and so on might all improve performance and limit this flickering effect but often it is a lot of trouble for something that does not provide any big benefit.

Affecting smaller sections of the screen can also improve things considerably. Your menu does use most of the page length when collapsing...

So using js the get collapsible menu can provide some flare to a page, but it is to be used with parsimony I think.

This thread has been closed, thank you.