SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Registering events in IE

    This is my attempt to inject the mouse and focus events into a preview class of anchors in a page. The events are to trigger the descriptive tool tip for a given range of images in this class.

    The initial HTML looks something like this:
    HTML Code:
    <tr>
    <td>&nbsp;</td>
    <td><a href="1.jpg" rel="lightbox3" class="preview">1</a></td>
    <td>&nbsp;</td>
    <td>Item 1 description</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><a href="2.jpg" rel="lightbox3" class="preview">2</a></td>
    <td>&nbsp;</td>
    <td>Item 2 description</td>
    <td>&nbsp;</td>
    </tr>
    After running this script,
    Code:
    // requires DW ToolTip by Sharon Paine
    // loads using dss_addEvent() by Dynamic Site Solutions
    function attachToolTipEventAttributes() {
    if (!document.getElementsByTagName("a")) return;
    var anchors = new Array(), eventList = new Array(), actionList = new Array()
    var count = 0;
    anchors = document.getElementsByTagName("a");
    eventList = ['mouseover','mouseout','focus','blur'];
    for (i=0;i<anchors.length;i++) {
    	actionList = ['doTooltip(event,'+count+')','hideTip()','doTooltip(event,'+count+')','hideTip()'];
    	// www.howtocreate.co.uk
    	for( var x = 0; x < anchors[i].attributes.length; x++ ) {
    		if( anchors[i].attributes[x].nodeName.toLowerCase() == 'class' ) {
    			var className = anchors[i].attributes[x].nodeValue;
    			if(className=='preview') {
    				for(j=0;j<actionList.length;j++) {
    					// www.java2s.com
    					var newAttr = document.createAttribute("on" + eventList[j]);
      			  newAttr.nodeValue = actionList[j];
    					anchors[i].setAttributeNode(newAttr);
    					}
    				count = count + 1;
    				}
    			}
    		className ='';
    		}
    	}
    }
    the generated HTML looks something like this:
    HTML Code:
    <tr>
    <td>&nbsp;</td>
    <td><a onblur="hideTip()" onfocus="doTooltip(event,0)" onmouseout="hideTip()" onmouseover="doTooltip(event,0)" href="1.jpg" rel="lightbox3" class="preview">1</a></td>
    <td>&nbsp;</td>
    <td>Item 1 description</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><a onblur="hideTip()" onfocus="doTooltip(event,1)" onmouseout="hideTip()" onmouseover="doTooltip(event,1)" href="2.jpg" rel="lightbox3" class="preview">2</a></td>
    <td>&nbsp;</td>
    <td>Item 2 description</td>
    <td>&nbsp;</td>
    </tr>
    This page loads and runs the following scripts without conflict in IE 7 and FF:
    Universal Bookmark (Dynamic Site Solutions),
    Descriptive Tooltips by Sharon Paine (Dynamic Web Coding),
    Lightbox_plus by by Takuya Otani (SimpleBoxes),
    a simple script to insert a link to a javascript driven slideshow page,
    and a simple script to insert a tracking image. All are loaded with dss_addEVent() (Dynamic Site Solutions). But when I run my function above, the ToolTip quits functioning in IE.

    The problem is that these events won't fire in IE 7 (don't know about the rest) even though the attributes are present in the DOM's attribute list for the A element (using IE Developer toolbar).

    I've been perusing a lot a different articles on event handling and event listening but in the end I'm just as confused with this problem as when I started, maybe even more so. Can someone please offer advice that can be applied to the this real world example (as well as shoot whatever holes necessary through this amateur effort)? Thanks.

  2. #2
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A little cleanup later...

    I've given the script a little once over and refined the code somewhat...
    Code:
    // by tenfingers
    // requires DW ToolTip by Sharon Paine
    // depends on dss_addEvent() by Dynamic Site Solutions
    //
    function attachToolTipEventAttributes() {
     if (!document.getElementsByTagName("a")) return;
     var eventList = new Array();
     eventList = ['blur','focus','mouseout','mouseover'];
     var count = 0, className = '', action = '';
     var anchors = new Array();
     anchors = document.getElementsByTagName("a");
     for ( i = 0; i < anchors.length; i++ ) {
      for( var x = 0; x < anchors[i].attributes.length; x++ ) {
       if ( anchors[i].attributes[x].nodeName.toLowerCase() == 'class' ) {
        className = anchors[i].attributes[x].nodeValue;
        if ( className=='preview' ) {
         for ( j = 0; j < eventList.length; j++ ) {
          var newAttr = document.createAttribute("on" + eventList[j]);
          action = j &#37; 2 ? 'doTooltip(event,'+count+')' : 'hideTip()';
          newAttr.nodeValue = action;
          anchors[i].setAttributeNode(newAttr);
          // Is this where to attach the listener/handler???
         }
         count++;
        }
       }
       className ='';
      }
     }
    }
    The generated HTML now looks like this:
    HTML Code:
    <tr>
    <td>&nbsp;</td>
    <td><a onmouseover="doTooltip(event,0)" onmouseout="hideTip()" onfocus="doTooltip(event,0)" onblur="hideTip()" href="1.jpg" rel="lightbox3" class="preview">1</a></td>
    <td>&nbsp;</td>
    <td>Item 1 description</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><a onmouseover="doTooltip(event,1)" onmouseout="hideTip()" onfocus="doTooltip(event,1)" onblur="hideTip()" href="2.jpg" rel="lightbox3" class="preview">2</a></td>
    <td>&nbsp;</td>
    <td>Item 2 description</td>
    <td>&nbsp;</td>
    </tr>
    Last edited by tenfingers; Sep 7, 2007 at 22:17. Reason: Tweak.


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
  •