nachumk Posted November 6, 2009 Share Posted November 6, 2009 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted November 6, 2009 Share Posted November 6, 2009 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 More sharing options...
nachumk Posted November 6, 2009 Author Share Posted November 6, 2009 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?? Link to comment Share on other sites More sharing options...
nachumk Posted November 6, 2009 Author Share Posted November 6, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.