SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Bubbling issue

  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Bubbling issue

    I have a div called 'options' which contains another called 'settings'. I want 'settings' to have a left border when the mouse is over 'options', but not when it's over 'settings'. I tried the code below but the style isn't being overwritten by the second onmouseover function.
    Code:
    function sett() {
      var o = document.getElementById('options');
      var s = document.getElementById('settings');
      if (o && s) {
        o.onmouseover = function() {
          s.style.borderLeft = '1px solid #88B216';
        }
        o.onmouseout = function() {
          s.removeAttribute('style');
        }
        s.onmouseover = function() {
          s.className = 'settingsactive';
          s.style.borderLeft = 'none';
        }
        s.onmouseout = function() {
          s.removeAttribute('className');
        }
      }
    }
    What can I do?

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An element's style is an object, not an attribute-you can't remove it, or set it to the empty string or null or undefined; any more than you could remove the element's tagName.

    s.style.borderLeft = '' will remove the borderStyle.

    but why not just change the className to something that reflects the style changes? Have an onmouseover class and an onmouseout class.

    s.removeAttribute('className') should be s.removeAttribute('class'),
    but IE doesn't get it.
    Use s.className='';

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I know it should be s.removeAttribute('class'), but this is an ie-only script so that's why I'm using it with className.

    Thanks for the advice and the clarification on the style object, I'll change my code.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you've indicated in your thread title, both of the 'settings' listeners need to stop the event from bubbling up to 'options'. They both need to call this:
    Code:
    function xStopPropagation(evt)
    {
      if (evt && evt.stopPropagation) evt.stopPropagation();
      else if (window.event) window.event.cancelBubble = true;
    }

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, I did this in the end:
    Code:
    function sett() {
      var o = document.getElementById('options');
      var s = document.getElementById('settings');
      if (o && s) {
        o.onmouseenter = function() {
          s.style.borderLeft = '1px solid #88B216';
        }
        o.onmouseleave = function() {
          s.style.borderLeft = '';
        }
        s.onmouseenter = function() {
          s.className = 'settingsactive';
          s.style.borderLeft = '';
        }
        s.onmouseleave = function() {
          s.removeAttribute('className');
        }
      }
    }
    Since it's an IE-only script, it's OK to use onmouseenter and onmouseleave. Not the cleanest method, but probably the simplest.


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
  •