homepage Welcome to WebmasterWorld Guest from 54.226.18.74
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Question about Suckerfish IE6 Hover?
ewwatson




msg:3694273
 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




msg:3694560
 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




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

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

Fotiman




msg:3694751
 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




msg:3694833
 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved