asked on

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

ray-solomon

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

imantas

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.

dcass

ASKER

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.

ray-solomon

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

dcass

ASKER

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?

ASKER CERTIFIED SOLUTION

imantas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

ray-solomon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dcass

ASKER

Both were very helpful