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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ray-solomonCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.