Jump to content

Onmouseover Stops Working... Very Strange


nachumk
 Share

Recommended Posts

Hi,I have a sample up at http://nkcorner.com/tmp.phpThe code has 3 comments. one in the internal style, one in the image.position code, and one which controls opacity. Any of those comments uncommented fix the problem. I don't understand why.The idea of the code is to bring up a floating div when mouse is over either link or floated div. floated div fades away over a period of 2 seconds, but is brought back fully if mouse is put back over link or over the float itself. This was working fine until I decided to control opacity through the div as opposed to the image. I want to control the div b/c I may want to do the same thing without an image. This change caused onmouseover to stop being called.Any help is appreciated,Thanks,Issue doesn't seem to exist in IE, only in chrome and firefox.HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"> <style type="text/css">.tmpItem {/* remove this to fix problem */float:left;}</style><script type="text/javascript">var visible = false;var clearing = false;var div;var image = null;var timer;var opControl;function popup(show) { if(show) { if(!visible) { div = document.createElement("div"); div.setAttribute("class", "floatingDownloadLink"); image = document.createElement("img"); image.style.width = "100px"; image.style.height = "100px"; image.style.border = "groove"; image.style.margin = "100px"; image.setAttribute("onmouseover", "popup(true)"); image.setAttribute("onmouseout", "popup(false)"); //image.style.position = "absolute"; div.appendChild(image); document.body.appendChild(div); visible = true; } if(clearing) { clearTimeout(timer); } opControl = div; //opControl = image; opControl.style.opacity = "1"; clearing = false; } else if(visible && !clearing) { clearing = true; clearPopup(); }}function clearPopup() { var num = new Number(opControl.style.opacity); if(num == 0) { div.removeChild(image); document.body.removeChild(div); visible = false; clearing = false; } else { timer = setTimeout(clearPopup, 20); opControl.style.opacity = num - .01; }}</script></head> <body><div class="tmpItem"><a href="tmp.php" onclick="window.open(this.href, '_blank'); return false;" onmouseover="popup(true); return true;" onmouseout="popup(false); return true;">makeFloat</a></div></body> </html>

Edited by nachumk
Link to comment
Share on other sites

It works correctly in Opera. In Firefox the CSS is a little messed up and in both Firefox and Safari it will only do the mouseover after it finishes fading. Are you saying that if you remove the CSS float that it works in IE?When you set a class in Javascript it's usually best to use className also, I think IE uses className. e.g.:div.setAttribute("class", "floatingDownloadLink");div.setAttribute("className", "floatingDownloadLink");Also, you're using setAttribute to assign mouseover and mouseout events. Events aren't attributes. To add an event you should use either attachEvent and addEventHandler:http://www.quirksmode.org/js/events_advanced.html

Link to comment
Share on other sites

It works correctly in Opera. In Firefox the CSS is a little messed up and in both Firefox and Safari it will only do the mouseover after it finishes fading. Are you saying that if you remove the CSS float that it works in IE?When you set a class in Javascript it's usually best to use className also, I think IE uses className. e.g.:div.setAttribute("class", "floatingDownloadLink");div.setAttribute("className", "floatingDownloadLink");Also, you're using setAttribute to assign mouseover and mouseout events. Events aren't attributes. To add an event you should use either attachEvent and addEventHandler:http://www.quirksmode.org/js/events_advanced.html
Thanks for the tips regarding className and the events. I will definitely fix up my code.This doesn't seem to work at all in IE. I have to check that later.Why would the fading affect the mouseover?? As I said previously if I use the image for the opacity then there is no problem, if I switch the div to not use float then there's no problem, and if I place the float absolute position then there is no problem. What is going on here?? Edited by nachumk
Link to comment
Share on other sites

Surprised myself that I missed something so obvious. I don't know why but the div is covering the link that I want to catch onmouseover for. I have to figure that out, but at least it's making sense. It's not an event issue. I guess I'm researching the div now.thanks for the feedback,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...