0

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.

5
Contributors
6
Replies
8
Views
9 Years
Discussion Span
Last Post by Airshow
0

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

0

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?

0

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.

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.