SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    The Omnipresent [ArcanE]'s Avatar
    Join Date
    Mar 2005
    Location
    Belgium
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Prototype addClassName and Internet Explorer

    Anyone knows why this code doesn't work in Internet Explorer? The method isn't supported by IE it says but apparently it does work in some circumstances.

    Code:
    var zebraTables = Class.create();
    zebraTables.prototype = {
    	triggerClass: "hoverRows",
    	tables: Object,
    	/** INITIALIZE FUNCTION **/
    	initialize: function () {
    		this.tables = document.getElementsByClassName(this.triggerClass);
    		this.tables.each(function(item, index) {
    			rows = item.getElementsByTagName('tr');
    			this.applyRowsHover(rows);
    		}.bind(this));
    	},
    	/** FUNCTION WALKS OVER THE TABLE ROWS **/
    	applyRowsHover: function(rows) {
    		tableRows = $A(rows);
    		tableRows.each(function(row, index){
    			Event.observe(row, 'mouseover', function() { this.addClassName('over');    }, false);
    			Event.observe(row, 'mouseout' , function() { this.removeClassName('over'); }, false);
    		}.bind(this));
    	}
    }
    
    Event.observe(window, 'load', function() { var zebraTable = new zebraTables(); zebraTable.initialize; }, false);
    Pastebin: http://pastebin.ca/135994

    I've tried changing the this.addClassName() into Element.addClassName("over", this); but that doesn't seem to work either.
    Webdevelopment : Skyrocket Concepts Inventis Web Architects
    Ain't got time for the future or the past.
    Live for the moment, make it last.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I read your code correctly, the this keyword in your event handler will not be applied to the row, but to the zebraTables object.

    You could use function.bindAsEventListener() and use Event to find the event target.

    This might even work:
    Code:
    function () { Element.addClassName(row, "over"); }
    Birnam wood is come to Dunsinane

  3. #3
    The Omnipresent [ArcanE]'s Avatar
    Join Date
    Mar 2005
    Location
    Belgium
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Omg, thanks AC! I accidentaly switched the arguments on the Element.addClassName method. Thanks for pointing out, it works fine now.
    Webdevelopment : Skyrocket Concepts Inventis Web Architects
    Ain't got time for the future or the past.
    Live for the moment, make it last.


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
  •