[SOLVED] IE JS Bug

[yzerman]

ok, I am at a loss here.

 

First the code (majority of which is courtesy of labs.mininova.org:

<script type="text/javascript">
<!--
var pop = document.getElementById('popup');

var xoffset = 15;
var yoffset = 10;

document.onmousemove = function(e) {
var x, y, right, bottom;

try { x = e.pageX; y = e.pageY; } // FF
catch(e) { x = event.x; y = event.y; } // IE

right = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth);
bottom = (window.scrollY || document.documentElement.scrollTop || document.body.scrollTop) + (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight);

x += xoffset;
y += yoffset;

if(x > right-pop.offsetWidth)
x = right-pop.offsetWidth;

if(y > bottom-pop.offsetHeight)
y = bottom-pop.offsetHeight;

pop.style.top = y+'px';
pop.style.left = x+'px';
}
function popup(title, text, img) {
pop.innerHTML = "<p><h1>" + title + "</h1><p><img width='100' height='75' src='http://www.mysite.com/uploads/" + img + "'/>" + text + "</p>";
pop.style.display = 'block';
}
function popout() {
pop.style.display = 'none';
}

//-->
</script>

 

here is the code for the popup:

<style type="text/css">
#popup {
background-color:#EEEEEE;
border:1px solid #00CC66;
display:none;
font-size:xx-small;
opacity:0.95;
position:absolute;
width:400px;
z-index:30;
}
</style>
<div class="popup" id="popup" style="display:none;"></div>
<a class="10" onmouseover="popup('The Title','The body Text','theimage.jpg')" onmouseout="popout()">More Info</a>

 

When I implement this code into the website, and hover over the More Info link, the page jumps around but the div doesnt show unless I hit a certian sweet spot. IE is the problem, Firefox it works just fine. Any ideas?

 

[phpQuestioner]

do this instead:

 

<script type="text/javascript">
<!--
//var pop = document.getElementById('popup');

var xoffset = 15;
var yoffset = 10;

document.onmousemove = function(e) {
var x, y, right, bottom;

try { x = e.pageX; y = e.pageY; } // FF
catch(e) { x = event.x; y = event.y; } // IE

right = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth);
bottom = (window.scrollY || document.documentElement.scrollTop || document.body.scrollTop) + (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight);

x += xoffset;
y += yoffset;

if(x > right-document.getElementById('popup').offsetWidth)
x = right-document.getElementById('popup').offsetWidth;

if(y > bottom-document.getElementById('popup').offsetHeight)
y = bottom-document.getElementById('popup').offsetHeight;

document.getElementById('popup').style.top = y+'px';
document.getElementById('popup').style.left = x+'px';
}
function popup(title, text, img) {
document.getElementById('popup').innerHTML = "<p><h1>" + title + "</h1><p><img width='100' height='75' src='http://www.mysite.com/uploads/" + img + "'/>" + text + "</p>";
document.getElementById('popup').style.display = 'block';
}
function popout() {
document.getElementById('popup').style.display = 'none';
}

//-->
</script>


<style type="text/css">
#popup {
background-color:#EEEEEE;
border:1px solid #00CC66;
display:none;
font-size:xx-small;
opacity:0.95;
position:absolute;
width:400px;
z-index:30;
}
</style>
<div class="popup" id="popup" style="display:none;"></div>
<a class="10" onmouseover="popup('The Title','The body Text','theimage.jpg')" onmouseout="popout()">More Info</a>

 

 

PS: Do Not Double Post The Same Thread

[yzerman]

um, what did you change? BTW, I tried your code, and it doesn't work. Same issue.

[yzerman]

oh - and sorry about the double post ken. 

[yzerman]

got it working, thanks for the help.