SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    event handlers,event listeners?

    Hi there,

    I want a way to allow me to run one function when an element is moused over and another when the element id moused out. At present i have an onmouseover event handler running a function like so:

    Code JavaScript:
    <p id="message" style="display:none;" onmouseover="get_message();"><?php echo $message_id; ?></p>

    Now could anyone tell me whats the best, most concise, cross browser way to achieve more than one function for more than one event on one element?...part of my getmessage() function is changing the p tags style from diplsay: none to block....what i want is for the element to go back to display none on mouseout.

    Ive read some conflicting info on how to do this and im a little confused....could anyone point me in the right direction?

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When an HTML element is set to display:none, it's not visible in the browser. It's gone, you can't see it, the place it was before is now filled with other content... Gone... Still in the DOM, but not visible. And something that's not visible, cannot be hovered with the mouse and therefore can't be clicked either.
    What you can use, is visibility:hidden... But that doesn't really hides the element, it hides all the visible parts of the element, but their is just an empty space. No other content will fill the gasp.

    To bind multiple function to an event of one specific element, you can use Scott Andrew's window.addEvent function. It's also handy to bind a function to an onload event which works even for browsers that don't support binding a function directly to window.onload.
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hexburner View Post
    To bind multiple function to an event of one specific element, you can use Scott Andrew's window.addEvent function.
    That one is very primitive. I recommend Dean Edwards' event manipulation functions.

    Quote Originally Posted by hexburner View Post
    It's also handy to bind a function to an onload event which works even for browsers that don't support binding a function directly to window.onload.
    Which browsers don't support that?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats great thanks guys...that function is pretty sweet!


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
  •