div/iframe parent child float

I have an HTML where I need the iframe to be positioned just below the onmouseover on each line (from the database).

I understand that I probably need a parent and child div, but don't know enough to get it right.
Thanks for your help.
<script>
function show(temp)
{
    document.getElementById(temp).style.display="inline";
}
function hide(temp) 
{
    document.getElementById(temp).style.display="none";
}
</script>
</head>

<div id="billboard_content" style="text-align:center;">
          <table cellpadding="0" cellspacing="0" class="tablesorter" id="myTable">
             <tr>
                  <th  style="text-align: center;" nowrap><img src=Images/desc.gif>Bid Date<img src=Images/asc.gif></th>
                  <th  nowrap><img src=Images/desc.gif>Project Description<img src=Images/asc.gif></th>
             
      </tr>
  <!-- this next section will be in a loop and load from the database. ctr=#records -->
     for ($i=0;$i > $ctr;i++)   {
     <tr>
       <td style="text-align: center">$Date$i</td>
       <td>
          <B><a onmouseover="show('temp'$i)" onmouseout="hide('temp'$i)">$Desc$i</a></b>   
       </td>
      </tr>
     }
     </table>
          <!-- where does the parent go?  Can the child stay here? -->
     <div style="width: 200px; position: relative; float: bottom;">  
   	    <div id='temp' style="position: absolute; z-index:0" >        
                   <iframe width="200" height="415" src="temp.html" scrolling="auto"></iframe>
            </div>
     </div>
</div>

Open in new window

dcassAsked:
Who is Participating?
 
imantasConnect With a Mentor Commented:
dcass, could you please provide some more details in what way do you want javascript to be used? Do you want to show/hide iframe with javascript instead of CSS or just need to call some additional javascript functions when mouse is over the link (and iframe is shown)?

If it's the second case, you just need to add onmouseover, onmouseout events on the link:
<b><a href="temp.html" onmouseover="functionToCallOnMouseOver(param)" onmouseout="functionToCallOnMouseOut(param)" onclick="return false">$Desc$i</a></b>

Open in new window


Whole code would look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Example page</title>
</head>
<body>
  <style type="text/css">
  div.iframe-holder > div {
    position: absolute;
    top: -999em;
    left: -999em;
    width: 200px;
    height: 415px;
    z-index: 1000;


 /* Adjust these two to control
    distance from the element you
    mouseover and the iframe: */
    
    margin-top: 10px;
    margin-left: 50px;
    
    
  }
  div.iframe-holder > div > iframe {
    width: 100%;
    height: 100%;
  }
  div.iframe-holder:hover > div {
    top: auto;
    left: auto;
  }
  </style>

  <script type="text/javascript">
  <!--
    function mouseOverLink(which) {
      document.getElementById('log').innerHTML = 'Mouse is over ' + which;
    }

    function mouseOutLink(which) {
      document.getElementById('log').innerHTML = 'Mouse has left ' + which;
    }
  //-->
  </script>
  <div id="billboard_content" style="text-align:center;">
    <table cellpadding="0" cellspacing="0" class="tablesorter" id="myTable">
      <tr>
        <th style="text-align: center;" nowrap><img src="Images/desc.gif" alt="" />Bid Date<img src="Images/asc.gif" alt="" /></th>
        <th nowrap="nowrap"><img src="Images/desc.gif" alt="" />Project Description<img src="Images/asc.gif" alt="" /></th>
      </tr>
      <!-- this next section will be in a loop and load from the database. ctr=#records -->
      for ($i=0;$i > $ctr;i++)   {
      <tr>
        <td style="text-align: center">$Date$i</td>
        <td>
          <div class="iframe-holder">
            <b><a href="temp.html" onmouseover="mouseOverLink('$Desc$i')" onmouseout="mouseOutLink('$Desc$i')" onclick="return false">$Desc$i</a></b>
            <div><iframe src="temp.html"></iframe></div>
          </div>
        </td>
      </tr>
      }
    </table>
  </div>

  <!-- to be removed -->
  <div id="log"></div>


</body></html>

Open in new window

0
 
ray-solomonCommented:
Here is an example I whipped up.


View it here:
http://pocourl.com/example1/

Download the code that is attached:
example1.zip


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	/* Execute sortable table */
	$("#myTable").tablesorter();
	
	/* Execute tooltip event */
	$('.toolTip').hover(
		function() {
		this.tip = $.ajax({
			type: "GET",
			url: 'fetchContent.php?id='+this.id,
			global: false,
			cache: false,
			dataType: "html",
			async: false,
			success: function(html) {
				return html;
			}
		}).responseText;
		$(this).append(
			'<div class="toolTipWrapper">'
				+'<div class="toolTipTop"></div>'
				+'<div class="toolTipMid">'
					+this.tip
				+'</div>'
				+'<div class="toolTipBtm"></div>'
			+'</div>'
		);
		this.title = "";
		this.width = $(this).width();
		$(this).find('.toolTipWrapper').css({left:this.width-22})
		$('.toolTipWrapper').fadeIn(300);
	},
	function() {
		$('.toolTipWrapper').fadeOut(100);
		$(this).children().remove();
			this.title = this.tip;
		}
	);
});
</script>
<style type="text/css">
/* tooltip */
.toolTip {
	padding-right: 20px;
	background: transparent url(images/help.gif) no-repeat right;
	color: #000;
	cursor: help;
	position: relative;
}
.toolTipWrapper {
	width: 175px;
	position: absolute;
	top: 20px;
	display: none;
	color: #FFF;
	font-weight: bold;
	font-size: 9pt;
	z-index:100;
}
.toolTipTop {
	width: 175px;
	height: 30px;
	background: transparent url(images/bubbleTop.gif) no-repeat;
}
.toolTipMid {
	padding: 8px 15px;
	background: #A1D40A url(images/bubbleMid.gif) repeat-x top;
}
.toolTipBtm {
	height: 13px;
	background: transparent url(images/bubbleBtm.gif) no-repeat;
}
/* tables */
table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	font-size: 8pt;
	width: 200px;
	text-align: left;
	margin:0 auto;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
	background-color: #8dbdd8;
}
</style>
</head>

<body>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Name</th> 
    </tr> 
</thead> 
<tbody> 
<tr> 
    <td><span class="toolTip" title="This is a title for John Smith" id="BLAH-10">John Smith</span></td> 
    </tr> 
<tr> 
    <td><span class="toolTip" title="This is a title for Frank Bach" id="BLAH-11">Frank Bach</span></td> 
    </tr> 
<tr> 
    <td><span class="toolTip" title="This is a title for Jason Doe" id="BLAH-12">Jason Doe</span></td> 
    </tr> 
<tr> 
    <td><span class="toolTip" title="This is a title for Tim Conway" id="BLAH-13">Tim Conway</span></td> 
    </tr> 
</tbody> 
</table> 
</body>
</html>

Open in new window



fetchContent.php

<?php

$id = isset($_GET['id']) ? trim($_GET['id']) : '';

/* Lookup ID in database and fetch a result */
if ($id == "BLAH-10") {
	echo '<p>I am fetching a result and displaying it.</p><p><img src="https://encrypted.google.com/images/logos/ssl_logo_beta_49.gif"></p>';
} else {
	echo 'No results found';
}

?>

Open in new window


example1.zip
0
 
imantasCommented:
Here is a "easier-to-use" example. You don't need javascript, but if you can ensure your document is declared as xHTML, ie document starts with these lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...

Open in new window

than you could use this simple example (it's your original code altered in a way to work like you desire):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Example page</title>
</head>
<body>
  <style type="text/css">
  div.iframe-holder > div {
    position: absolute;
    top: -999em;
    left: -999em;
    width: 200px;
    height: 415px;
    z-index: 1000;


 /* Adjust these two to control
    distance from the element you
    mouseover and the iframe: */
    
    margin-top: 10px;
    margin-left: 50px;
    
    
  }
  div.iframe-holder > div > iframe {
    width: 100%;
    height: 100%;
  }
  div.iframe-holder:hover > div {
    top: auto;
    left: auto;
  }
  </style>

  <div id="billboard_content" style="text-align:center;">
    <table cellpadding="0" cellspacing="0" class="tablesorter" id="myTable">
      <tr>
        <th style="text-align: center;" nowrap><img src="Images/desc.gif" alt="" />Bid Date<img src="Images/asc.gif" alt="" /></th>
        <th nowrap="nowrap"><img src="Images/desc.gif" alt="" />Project Description<img src="Images/asc.gif" alt="" /></th>
      </tr>
      <!-- this next section will be in a loop and load from the database. ctr=#records -->
      for ($i=0;$i > $ctr;i++)   {
      <tr>
        <td style="text-align: center">$Date$i</td>
        <td>
          <div class="iframe-holder">
            <B><a href="temp.html" onclick="return false">$Desc$i</a></b>   
            <div><iframe src="temp.html"></iframe></div>
          </div>
        </td>
      </tr>
      }
    </table>
  </div>
</body></html>

Open in new window


Please note that this is a full weg page, so you can save it as .html and preview/test.
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
dcassAuthor Commented:
Thanks for both - I needed both for comparison.
Imantas - we prefer yours but we need the javascript functionality because we'll be passing variables, so if you have a sec and can throw that back in, we'd really appreciate it.
0
 
ray-solomonCommented:
@imantas
Saying "easier-to-use" is misleading and customers will wrongly interpret that.

@dcass
If my code is not exactly what you expect, then say something. I will be happy to adjust it for you.
Is there a specific reason why you feel an iframe should be used?
0
 
dcassAuthor Commented:
Boss says "no ajax" - wants iframe with javascript.  

He decided to change the criteria, though, to absolute positioning instead of auto or relative.
If I have trouble with this, I'll let you know.

We both prefer the behavior of hover but have to have mouseover (or some event) to call javascript with variables.
Can you use both?
0
 
ray-solomonConnect With a Mentor Commented:
No-ajax.

Okay. no problem.

In my next example, it uses no ajax.

It utilizes onmouseover and onmouseout events, and iframes as you request.

View it here:
http://pocourl.com/example1/index2.html


Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	/* Execute sortable table */
	$("#myTable").tablesorter();
	
	/* Execute tooltip event */
	$('.toolTip').hover(
		function() {
		this.tip = this.title;
		$(this).append(
			'<div class="iframeWrapper">'
				+'<iframe src="fetchContent.php?id='+this.id+'&rand='+Math.random()+'" style="margin:0;width:300px;height:400px;overflow:auto;display:block;border:solid 1px #000;background-color:#FFF;">'
			+'</div>'
		);
		this.title = "";
		this.width = $(this).width();
		$(this).find('.toolTipWrapper').css({left:this.width-22})
		$('.toolTipWrapper').fadeIn(300);
	},
	function() {
		$('.toolTipWrapper').fadeOut(100);
		$(this).children().remove();
			this.title = this.tip;
		}
	);
});
</script>
<style type="text/css">
/* tooltip */
.toolTip {
	padding-right: 20px;
	background: transparent url(images/help.gif) no-repeat right;
	color: #000;
	cursor: help;
	position: relative;
}
.iframeWrapper {
	background-color:#FFF;
	width: 300px;
	height: 400px;
	position: absolute;
	top: 20px;
	color: #000;
	font-weight: bold;
	font-size: 9pt;
	z-index:100;
}
/* tables */
table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	font-size: 8pt;
	width: 200px;
	text-align: left;
	margin:0 auto;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
	background-color: #8dbdd8;
}
</style>
</head>

<body>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Name</th> 
    </tr> 
</thead> 
<tbody> 
<tr> 
    <td><span class="toolTip" title="This is a title for John Smith" id="BLAH-10">John Smith</span></td> 
    </tr> 
<tr> 
    <td><span class="toolTip" title="This is a title for Frank Bach" id="BLAH-11">Frank Bach</span></td> 
    </tr> 
<tr> 
    <td><span class="toolTip" title="This is a title for Jason Doe" id="BLAH-12">Jason Doe</span></td> 
    </tr> 
<tr> 
    <td><span class="toolTip" title="This is a title for Tim Conway" id="BLAH-13">Tim Conway</span></td> 
    </tr> 
</tbody> 
</table> 
</body>
</html>

Open in new window

0
 
dcassAuthor Commented:
Both were very helpful
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.