Question about Suckerfish IE6 Hover?

Forum Moderators: open

Message Too Old, No Replies

Question about Suckerfish IE6 Hover?

ewwatson

11:58 am on Jul 9, 2008 (gmt 0)

So... the below code makes the "input" hover in IE6. How do I add a textarea hover to that as well? The only way I found was to copy/paste the code all over again (a duplicate) and put in "textarea" instead of input. But that's double the amount of code - there's got to be a way to combine them right? Thanks!

sfHover = function() {
var sfEls = document.getElementById("content").getElementsByTagName("input");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Fotiman

4:50 pm on Jul 9, 2008 (gmt 0)

This is in no way Suckerfish related.
But to answer your question:


sfHover = function() { 
  function attach(arr) { 
    for (var i=0; i<arr.length; i++) { 
      arr[i].onmouseover = function() { 
        this.className += " hover"; 
      } 
      arr[i].onmouseout = function() { 
        this.className = this.className.replace(new RegExp(" hover\\b"), ""); 
      } 
    } 
  } 
  var elContent = document.getElementById('content'); 
  var elInputs = elContent.getElementsByTagName('input'); 
  var elTextareas = elContent.getElementsByTagName('textarea'); 
  attach(elInputs); 
  attach(elTextareas); 
}

ewwatson

7:34 pm on Jul 9, 2008 (gmt 0)

Thanks bro! But it doesn't work? What do you think?

Fotiman

7:54 pm on Jul 9, 2008 (gmt 0)

Works for me. Here's a full example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
<style type="text/css"> 
.hover { 
 background-color: #c00; 
} 
</style> 
<title>Untitled</title> 
</head> 
<body> 
<div id="content"> 
 <input><textarea></textarea> 
</div> 
<script type="text/javascript"> 
sfHover = function() {  
 function attach(arr) {  
  for (var i=0; i<arr.length; i++) {  
   arr[i].onmouseover = function() {  
    this.className += " hover";  
   }  
   arr[i].onmouseout = function() {  
    this.className = this.className.replace(new RegExp(" hover\\b"), "");  
   }  
  }  
 }  
 var elContent = document.getElementById('content');  
 var elInputs = elContent.getElementsByTagName('input');  
 var elTextareas = elContent.getElementsByTagName('textarea');  
 attach(elInputs);  
 attach(elTextareas);  
} 
if (window.attachEvent) window.attachEvent("onload", sfHover);  
</script> 
</body> 
</html>

ewwatson

8:55 pm on Jul 9, 2008 (gmt 0)

Your right - it does work. Awesome bro - thank you very much! I've been working on this in a couple of forums for a few days now. You've been a big help. Have a good one!