SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Wizard Dean C's Avatar
    Join Date
    Mar 2003
    Location
    England, UK
    Posts
    2,906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AttachEvent problems in IE7

    http://phrogz.net/JS/AttachEvent_js.txt

    I am using this AttachEvent function like so:

    AttachEvent(myElement, 'mouseover', doHover1, false);

    function doHover1 { alert(this.innerHTML); }

    This works in FF, but not IE. Am I missing something obvious?

  2. #2
    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)
    The problem is your use of this, which with Microsoft's attachEvent always refers to the window object, rather than the element the event happened to, as the more useful W3C model (addEventListener) stipulates. It is a huge drawback of Microsoft's implementation. See this (haha). I feel the same way as that man and prefer to never use attachEvent.

    Therefore I would suggest not using your AttachEvent function and instead going oldschool:
    Code:
    myElement.onmouseover = doHover1;
    function doHover1 { alert(this.innerHTML); }
    That is cross-browser.

  3. #3
    SitePoint Wizard Dean C's Avatar
    Join Date
    Mar 2003
    Location
    England, UK
    Posts
    2,906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles. Another question now. I have the following code:

    Code:
    	// assign hover event handlers
    	var hovers = getElementsByClassName("hover", "table", document);
    	for(var i = 0; i < hovers.length; i++)
    	{
    		hovers[i].onmouseover = doHover1;
    		hovers[i].onmouseout = doHover2;
    	}
    
    function doHover1()
    {
    	var children = this.getElementsByTagName('td');
    	for(var j = 0; j < 2; j++)
    	{
    		if(children[j].tagName == 'TD')
    		{
    			children[j].style.background = '#eee';
    		}
    	}
    }
    
    function doHover2()
    {
    	var children = this.getElementsByTagName('td');
    	for(var j = 0; j < 2; j++)
    	{
    		if(children[j].tagName == 'TD')
    		{
    			children[j].style.background = '';
    		}
    	}
    }
    What this does is look for any table with class of "hover" and then have an onmouseover and onmouseout event on it, which highlights all child <td> tags. This works fine in firefox, but there is a noticable lag in IE6 + IE7 when I have 5+ rows. Can you see any reason why this would happen?

  4. #4
    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)
    You should be using CSS for this and Javascript only for IE6. You can use conditional comments to target Javascript at IE6 only.

    The reason it is laggy is that every time you hover, the JS engine has to find all TD elements (which there could be several hundred of) for the mouseout event and then the same again for the mouseover event. This is quite a lot of processing. Instead, you should follow the route of using CSS as much as possible and then making up for IE6's deficiencies with Javascript.
    Code CSS:
    table:hover td {
      background-color:#EEE;
    }
    table.highlight td {
      background-color:#EEE; /* For IE6 */
    }
    For IE6, the Javascript would then simply give the table a class of "highlight" onmouseover and remove it onmouseout.

    Normally you would also serve IE6 a special stylesheet containing the second rule, also through conditional comments, so it can go hand in hand with your IE6-only javascript.

  5. #5
    SitePoint Wizard Dean C's Avatar
    Join Date
    Mar 2003
    Location
    England, UK
    Posts
    2,906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles. I'll take a look into that

  6. #6
    SitePoint Wizard Dean C's Avatar
    Join Date
    Mar 2003
    Location
    England, UK
    Posts
    2,906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did exactly as you said, but even the CSS solution in IE7 has the same lag as you described. We've decided (against my better judgement) to keep it as an enhancement to those users whose browsers can perform the hover quickly (i.e. not IE ).

  7. #7
    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)
    Perhaps your javascript is still a bit convoluted. All it needs to be is this:
    Code:
    var hovers = getElementsByClassName("hover", "table", document);
    for(var i = 0, j = hovers.length; i < j; i++) {
      hovers[i].onmouseover = setHoverClass;
      hovers[i].onmouseout = removeHoverClass;
    }
    function setHoverClass() {
      this.className += ' highlight';
    }
    function removeHoverClass() {
      this.className.replace(' highlight', '');
    }
    Assuming that the first line gets all table elements with the class hover.


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
  •