Hi There,
I have a webpage with link of useful websites. Rather than loading the websites in a new window, I would an "inline frame/window" to be opened just ow the link I clicked on so that I can preview/interact with the webpage.
Does anyone know how this can be done ?
Here's a reference link I found. http://clusty.com (do a search then click on teh magnifying glass icon)
Thanks in advance.
hi sean,
i am looking to create this URL preview on a site i am creating, on a mouse over event.
After finding this thread and noticing it does exactly what i want i am really looking to see some code on how it works or if there is a place i can be referred to in order to get this solution?
Thanks zensmitty
Did you mean loading an iframe dynamically or static?
Did you mean loading an iframe dynamically or static?
I think it would be more efficient to make it dynamic since you don't want to have to load many iframes.
Try: preview.js
function preview(obj) {
if (obj.innerHTML)
closePreview(obj);
if (obj.href)
var src = obj.href;
else
return false;
var iframe = document.createElement("iframe");
iframe.src = src;
iframe.id = "iframe_" + obj.innerHTML;
iframe.style.height = "200px";
iframe.style.width = "400px";
iframe.style.whiteSpace = "nowrap";
iframe.style.position = "absolute";
// Next line takes the number value of link.style.bottom (decimals included) and converts it to a number
var botPad = /^(\d*[^(px)])*/.exec(obj.style.bottom)[0] / 1;
botPad += 20; // Amount of px above link
iframe.style.bottom = botPad + "px";
document.body.insertBefore(iframe, obj);
}
function closePreview(obj) {
if (obj.innerHTML)
var id = "iframe_" + obj.innerHTML;
else
return false;
if (document.getElementById(id)) {
var iframe = document.getElementById(id);
iframe.parentNode.removeChild(iframe);
}
} search.html
<html>
<head>
<script type="text/javascript" src="preview.js">
// Script created by itsjareds (KnifeySpooney)
// Script free to use and modify
</script>
</head>
<body>
<a href="http://www.google.com" onMouseover="preview(this);" onMouseout="closePreview(this);" style="position:absolute;bottom:5px;">Gooooogle!</a>
</body>
</html>Can someone else figure out how to keep the iframe from disappearing when you move the mouse into the iframe?
The following concept has not been formalized! I'll try to add patches as soon as i get my time.
All codes is as follows:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Getting Javascript Variable and Display into Table Cell</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
background-color : #ccc;
color : #405060;
font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
min-height : 600px;
text-align : center;
height : auto;
width : auto; }
body .m-title {
background-color : #444;
border-top : 2px solid #000;
border-bottom : 2px solid #000;
color : #757575;
margin-top : 0;
padding : .100em 1em .100em 1em;
text-align : left;
width : auto; }
div#main {
background-color : #f0f0f0;
margin : 0 auto;
height : inherit !important;
padding : 0;
width : 100%; }
div.tube {
border : 1px solid;
background-color : inherit;
height : inherit !important;
clear : both;
padding : 1em;
margin : 0;
overflow : hidden; }
table {
border-top : 1px solid;
border-bottom : 1px solid;
border-collapse;
margin : 1em auto 0 auto;
padding : 0;
text-align : left;
width : 100%; }
td {
font : normal normal normal 10pt Verdana, Arial, sans-serif;
border-bottom : 1px solid;
letter-spacing : 1px;
line-height : 1.4;
vertical-align : middle;
padding : .300em 1em .300em 1em; }
ul {
list-style : none;
margin : 1em 0 1em 0;
padding : 0; }
td:first-child {
border-right : 1px solid;
vertical-align : top;
text-align : left;
width : 25%; }
iframe {
display : block;
border : 1px solid #405060;
height : auto;
width : 100%; }
.show {
display : block; }
.hide {
display : none; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var howLong = 5; // Specify the seconds for the iframe to be displayed on the screen. Currently set to 5secs.
// DO NOT ALTER-->
var $tagNames;
$tagNames = Boolean( document.getElementsByTagName );
var showframe;
showframe = function( obj ) {
clearInterval( time );
(( obj.className !== "hide" ) ? obj.className = "hide" : div );
};
var generate;
generate = function( url, tar ) {
iframe = (( document.getElementById ) ? document.getElementById("iframed") : (( document.all ) ? document.all.iframed : document.layers.iframed ));
try {
iframe.target = tar;
iframe.location.href = url;
} catch( e1 ) {
iframe.target = tar;
iframe.src = url; }
};
var timer;
timer = function( delay ) {
div = (( document.getElementById ) ? document.getElementById("win") : (( document.all ) ? document.all.win : document.layers.win ));
div.className = "show";
delay *= 1000;
time = setInterval( "showframe( div )", delay );
};
var preview;
preview = function( ) {
$a = (( $tagNames ) ? document.getElementsByTagName("a") : document.all.tags("a") );
try {
if ( $a ) {
for ( var x = 0; x < $a.length; x++ ) {
$a[ x ].onclick = function() {
this.target = "iframed";
generate( this.href, "_seft" );
timer( howLong ); };
}
}
} catch( e ) { // You can add EventListener from here.
}
};
window.onload = preview;
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">
<h2 class="m-title">Dynamic Iframe</h2>
<table id="data" frame="void" rules="none" summary="Form Field Validation">
<tr>
<td>
<ul><li><a href="http://www.google.com/">Google Site</a></li>
<li><a href="http://www.daniweb.com/">Dani Community</a></li>
<li><a href="http://www.w3.org/">Web Standards</a></li></ul></td><td><div id="win" class="hide"><iframe src="iframe1.html" id="iframed" name="iframed" scrolling="auto"></iframe></div></td>
</tr>
</table>
</div>
</div>
</body>
</html>Just simply add all the links you need inside the document.
I've been having a go at this one too. Persistent errors in IE made it rather tough but I think I'm on top of them now.
Try this, it seems reliable in IE6 and FF 3.0.10. It's basically Itsjareds code with a bit of heavy refactoring into a namespace, plus there's only ever one iframe which is reused and which is positioned relative to mouse pos rather than the mouseover-link. I came to the conclusion that you either hide the iFrame onmouseout or you have a close button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Style-Type" content="text/css">
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#wrapper { position:absolute; display:none; }
#wrapper iframe { width:400px; height:200px; }
#wrapper a { display:block; padding-right:10px; font-family:verdana,arial; color:gray; font-weight:bold; font-size:9pt; text-decoration:none; text-align:right; }
#wrapper a:hover { color:black; }
</style>
<script>
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 = '402px';//For IE6 these need to be set here rather than in CSS.
wrapper.style.height = '225px';//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();
}
</script>
</head>
<body>
<a style="float:left;" href="http://www.google.com" onMouseover="iframePreviewer.preview(this);" onMouseout="iframePreviewer.stopMouseCapture();">Gooooogle!</a>
<a style="float:right;" href="http://www.google.com" onMouseover="iframePreviewer.preview(this);" onMouseout="iframePreviewer.stopMouseCapture();">Gooooogle!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a style="float:left;" href="http://www.google.com" onMouseover="iframePreviewer.preview(this);" onMouseout="iframePreviewer.stopMouseCapture();">Gooooogle!</a>
<a style="float:right;" href="http://www.google.com" onMouseover="iframePreviewer.preview(this);" onMouseout="iframePreviewer.stopMouseCapture();">Gooooogle!</a>
</body>
</html>Look at the code in calcPopupCoords(). I wrote it a few weeks ago and have been looking forward to using it again. It's one of those many-liners that eventually boiled down to something neat.
Airshow
It's more fun with different urls in the four links. Try these:
<body>
<a style="float:left;" href="http://www.google.com" onMouseover="iframePreviewer.preview(this);" onMouseout="iframePreviewer.stopMouseCapture();">Gooooogle!</a>
<a style="float:right;" href="http://www.daniweb.com" onMouseover="iframePreviewer.preview(this);" onMouseout="iframePreviewer.stopMouseCapture();">Daniweb!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a style="float:left;" href="http://www.shieldwall.co.uk/" onMouseover="iframePreviewer.preview(this);" onMouseout="iframePreviewer.stopMouseCapture();">Shieldwall</a>
<a style="float:right;" href="http://www.carltoncycles.me.uk/home.htm" onMouseover="iframePreviewer.preview(this);" onMouseout="iframePreviewer.stopMouseCapture();">Carlton Enthusiast</a>
</body>Airshow
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.