Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    54
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Cannot close when mouseover goes away

    I found the following code to create a preview popup that loads what I tell it to in my link code. However, I am wanting to know if I can make the iframe popup close when the mouse moves off of the link that triggered it.

    Code:
    var iframePreviewer = function() {
    var mousePos = {x:0, y:0}, obj = null, previewTim = null;
    var wrapper = null;
    var iframe = null;
    return {
    init : function() {
    wrapper = document.createElement('div');
    wrapper.setAttribute('id', 'wrapper');
    wrapper.style.width = '600px';//For IE6 these need to be set here rather than in CSS.
    wrapper.style.height = '400px';//For IE6 these need to be set here rather than in CSS.
    var a = document.createElement('a');
    a.href = '';
    a.onfocus = function(){ this.blur(); };
    a.onclick = this.close;
    var txt = document.createTextNode('Close');
    a.appendChild(txt);
    iframe = document.createElement('iframe');
    wrapper.appendChild(iframe);
    wrapper.appendChild(a);
    document.body.appendChild(wrapper);
    this.close();
    },
    calcPopupCoords : function(coords) {
    //Apply offsets from mouse position to keep popup on screen
    var half = { x:Math.floor(document.body.clientWidth/2), y:Math.floor(document.body.clientHeight/2) };
    coords.x -= ((coords.x > half.x) ? 10+parseInt(wrapper.style.width) : -10);
    coords.y -= ((coords.y > half.y) ? 10+parseInt(wrapper.style.height) : -10);
    return coords;
    },
    preview : function(obj) {
    clearTimeout(previewTim);
    if (!iframe || !obj || !obj.href) { return false; }
    if (iframe.src != obj.href) { iframe.src = obj.href; }
    obj.onmousemove = this.getMouseXY;
    previewTim = setTimeout("iframePreviewer.move_n_show()", 50);//delay gives getMouseXY time to bite.
    },
    move_n_show : function() {
    var coords = this.calcPopupCoords(mousePos);
    wrapper.style.left = coords.x + 'px';
    wrapper.style.top = coords.y + 'px';
    wrapper.style.display = 'block';
    iframe.style.display = 'block';
    },
    close : function(obj) {
    iframe.setAttribute('src', 'about:blank');
    wrapper.style.display = 'none';
    return false;
    },
    getMouseXY : function(e) {
    e = e || event;
    mousePos.x = e.pageX || (e.clientX + document.body.scrollLeft);
    mousePos.y = e.pageY || (e.clientY + document.body.scrollTop);
    return true;
    },
    stopMouseCapture : function() {
    if(obj != null) { obj.onmousemove = null; }
    }
    }
    }();
    onload = function(){
    iframePreviewer.init();
    }
    onunload = function(){
    iframePreviewer.stopMouseCapture();
    iframePreviewer.close();
    }
    Right now the link code looks like this:
    Code:
    <a style=\"float:left;\" href=\"".$row['lnktxt']."\" target=_blank onMouseover=\"iframePreviewer.preview(this);\" onMouseout=\"iframePreviewer.stopMouseCapture();\">
    It is pulling in data from my database and previewing the link before the user clicks on it. As I said, the iframe popup opens and displays just fine, and I can click close at the bottom, but if the close link is overtop of another link, or I mouseover another link before I get to it, it will just move the mouseover event...I would like the window to close if I move off of the link, like going to the left or right where there is blankspace.

  • #2
    New Coder
    Join Date
    Dec 2012
    Posts
    54
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Solved my own problem here....my link was triggering 1 of 2 possible events on the onmouseout trigger....it was telling the iframepreviewer to stop capturing the mouse....I changed it to close and all is well.


    iframePreviewer.close()


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •