Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Onload and mouse event problems

    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.
    Mike

    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.

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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?

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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,
    Mike


  •  

    Posting Permissions

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