PDA

View Full Version : Help moving close button on javascript iframe popup



mharrison
Jan 12th, 2013, 03:41 AM
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:

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:


<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>

vwphillips
Jan 12th, 2013, 07:10 AM
#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; }







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();
},