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

    Help moving close button on javascript iframe popup

    I am using the following JavaScript code to create an iframe popup window to preview some links on my website. My question is this: Right now there is a closed link at the bottom right. This may also be controlled by the CSS code I am using in conjunction with the javascript, but I want to start here to see if there is a way I can move the Close text to the top right of the window.

    Here is the javascript:
    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();
    }
    Here is the CSS code:

    Code:
    <style type="text/css">
    #wrapper { position:absolute; display:none; }
    #wrapper iframe { width:600px; height:400px; background:white; }
    #wrapper a { display:block; padding-right:20px; font-family:verdana,arial; color:red; font-weight:bold; font-size:14pt; text-decoration:none; text-align:right; vertical-align:text-top; }
    #wrapper a:hover { color:black; }
    </style>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    #wrapper { position:absolute; }
    #wrapper iframe { width:600px; height:400px; background:white; }
    #wrapper a { display:block; padding-right:20px; font-family:verdana,arial; color:red; font-weight:bold; font-size:14pt; text-decoration:none; text-align:right; vertical-align:text-top; }
    #wrapper a:hover { color:black; }
    #wrapper .link{ position:relative;top:10px;left:20px;width:50px;height:30px; }
    Code:
    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 link = document.createElement('div');
    link.className='link';
    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(link);
    link.appendChild(a);
    wrapper.appendChild(iframe);
    document.body.appendChild(wrapper);
    document.Show.Show0.value=wrapper.outerHTML;
    this.close();
    },
    Last edited by vwphillips; 01-12-2013 at 08:13 AM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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