View Full Version : Onload and mouse event problems

Nov 13th, 2006, 02:57 AM
I'm designing a page for personal bio's for company exec's. It's a single page with separate div's (each with a unique id tag) to contain each bio. What I'm trying to do is onload hide all but the CEO's bio and use a show/hide script to change the content.

Initially I had the extra divs hidden using CSS display: none; set. This is perfect visually, but if javascript is disabled there's no way (that I've thought of) to ever display those hidden divs. So I moved on to try using JavaScript and the setAttribute() method to change the className (I created two classes, one display: none and the other display: block) onload to hide the extra divs. This way if js is disabled all the bios would be displayed and simply follow each other in a list. The problem is the entire page loads to screen, showing all divs and then they're hidden, creating a weird visual hiccup on load.

My question, is there a way to get the script to do its thing first (setting the display properties for all divs) before anything is displayed on screen?

Second problem, I've created rollover effects for onmouseover and onmouseout. I also created a onclick effect (to set the rollover) I run into a problem after the onclick when the mouse exits it triggers the onmouseout event and overrides the onclick. My thought again is to use classes to overcome this. Are there any other options (simpler) to fix this?

Thank you in advance for your help.

PS: I've been working my way through Jeremy Keith's Dom Scripting book and have found it very helpful. Particularly his teaching style, explaining how to think through the process. Are there other books that take this approach. I have 3 other books that just give the nuts and bolts with little regard for concept. I'm having as much trouble planning the scripts as actually writing them.

Nov 13th, 2006, 08:54 AM
There is a way for javascript to do it's thing before the page is rendered. You have the javascript render the elements using document.createElement and the like, then, in noscript tags you put the unhidden markup.

but there's no way for javascript to .setAttribute on your elements before they are rendered.

I'm not sure what you mean by onmouseover overriding the onclick event. Do you mean you press the mouse button down then slide the pointer off the element?

Nov 14th, 2006, 02:36 PM
Thanks Beagle for your reply. If that's the case with setAttribute() method then I may be forced into some code I don't want to do. And yes, that is a correct assessment of the mouseout problem. I haven't got back to that part of my problem yet, but I'm still thinking that the only solution is to employ some class name change tactic to solve the problem. Any other ideas?

Again, thank you for your advice,