I've been working on some functions which are intended to load a bubble to the top left of the image which initiates the onclick event. The purpose is to provide a link for the user to add a product to the basket or return to the site. The page I am using it on to give you an idea of my goal is at http://loveall.stage.i-sitedigital.co.u ... ts_(test-b) .
The problems I am having are as follows:
When I click on the the image the function is called correctly but then if i click the same image again the box moves up and to the left each time, its like the mouse position is not resetting itself.
Also, in Internet Explorer I get an error "Invalid Argument" in IE which I can't get around... but it seems to be caused by the event that checks the mouse position.
Finally in Safari the box shows below the image rather than the top... This ones not crucial - its just a pain!
My code is as follows:
- Code: Select all
var posx;var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
//compliant mode vs. quirk mode
var sLeft=document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft;
var sTop=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
posx=ev.clientX+sLeft;
posy=ev.clientY+sTop;
}
else{return false;}//old browsers
document.getElementById('mydiv').firstChild.data='X='+posx+' Y='+posy;
}
document.onmousemove=getMouse;
function theFloater(id) {
var newdiv = document.createElement('div');
var divIdName = 'theFloater';
var winy = "130";
var winx = "230";
posx = posx - winx - 15;
posy = posy - winy - 15;
newdiv.setAttribute('id',divIdName);
newdiv.style.width = winx+"px";
newdiv.style.height = winy+"px";
newdiv.style.zIndex = "1000";
newdiv.style.top = posy+'px';
newdiv.style.left = posx+'px';
newdiv.style.position = "absolute";
newdiv.style.background = "#ffffff";
newdiv.style.border = "none";
newdiv.innerHTML = '<a href="javascript:closeTheFloater(\''+divIdName+'\')">Close Window</a><h1>' + id + '</h1>';
document.body.appendChild(newdiv);
document.getElementById(productCode).className='clear';
}
function closeTheFloater(id) {
var theDiv = document.getElementById(id);
theDiv.style.visibility = "hidden";
}
Any help would be so much appreciated... this is key to my sites spec so I need to find a way to make this work.
Thank you so much in advance
.
- Adam
