php Floating iframe adjusted to top of frame

I have an iframe that I want to use hover to display and position.  I have to know where it is on the screen and am trying to put two EE posts together but don't know enough to figure out how.
Hover works so much cleaner than mouseover, so we want to stay with that.   Please stay as close to our attached code as possible - if possible.  I included the function that EE says will position the iFrame to a position a certain amount of pixels from the top of the showing iFrame position (not the screen), but don't know how to use it without going to mouseover - I think what I need know is how to use a javascript function in the CSS on the iFrame component.
Thanks for any help.
<html>

<head>



function ShowDetails() 

{

    window.location.href="jobIn.html";

}

      function findTopPosition(elementID){

            var obj = document.getElementById(elementID);

            var top = obj.offsetTop;

            if(obj.parentElement){

                  while(obj.parentElement && obj.tagName!="BODY"){

                        obj = obj.parentElement;

                        top = top/1 + obj.offsetTop;

                  }            

            }

            

            return top;      

}      

</script>


  <style type="text/css">

  div.iframe-holder > div {

    position: absolute;

  /*  top: -999em;

    left: -999em; */

    display: none;

    width: 620px;

    height: 410px;

    z-index: 1000;

 /* Adjust these two to control

    distance from the element you

    mouseover and the iframe: */   

    margin-top: -20px;

    margin-left: 20px;  

  }

  div.iframe-holder > div > iframe {

    width: 100%;

    height: 100%;

    border:0;

 }

  div.iframe-holder:hover > div {

    display:inline-block; 

    top: auto; 

    left: auto; 

 } 



  </style>



</head>



<body>

<form method="POST"  enctype="multipart/form-data">

<div style="text-align:center;">

     <table cellpadding="0" cellspacing="0" class="tablesorter" id="myTable">

            <thead>

             <tr>

                  <th  style="text-align: center;" nowrap>Bid Date</th>

                  <th  nowrap>Project Description</th>

                  <th  nowrap>County</th>

                  <th  nowrap>Company</th>

             </tr>

           </thead>
          <tbody>





<?php 

//database access - fill $tmparr with data - Company code writes to text file $fp (cannot change this)  
include("/Php/Mysql.php");

SqlConnect();

SimpleQueryToFile("job_data_tab", "distinct key1", "key='P'", "/tmp/SimpleSqlTest.txt");

$fp=fopen("/tmp/SimpleSqlTest.txt", "r");

$i=0;

while($str=fgets($fp, 1024)) {

  $tmparr=explode("\t", $str);

  $ctr = count($tmparr);

    $dtarr=explode("/", $tmparr[3]);

    echo "

            <tr>

              <td class='center8'>$dtarr[1]/$dtarr[2]/$dtarr[0]</td>

              <td  id=date$i class='leftAlign'>";

    $tmp1=$tmparr[5];

    $tmp2=$tmparr[6];

    echo "

		  <div class='iframe-holder'>  

		    <b><a href='ex_1.php?tmp1=$tmp1&tmp2=$tmp2'' >

                    $tmparr[5]<BR>$tmparr[6]</font></a></b> 

                    <div>

			<iframe id='temp$i' src='Details.php?tmp1=$tmp1&tmp2=$tmp2'></iframe>

		    </div>

                  </div> 

               </td>

               <td class='alignLeft'>                 

		<strong>$tmparr[4]</strong>&nbsp;&nbsp;</td>

               <td class='leftAlign'>$tmparr[1]</td>



             </tr>

  ";

   $i=i++;



}

fclose($fp);

SqlDisConnect();

?>

Open in new window

dcassAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
perhaps change
<a href="ex_1_bid_info.php?tmp1=<?php echo $tmp1."&tmp2=".$tmp2."\" id=\"".$tmp; ?>"
to

<?php echo "<a href=\"ex_1_bid_info.php?tmp1=".$tmp1."&tmp2=".$tmp2."\"  id=".$tmp."\""; ?> onmouseover

But a URL to a test page would be better
0
 
dcassAuthor Commented:
i.e. how do I make this javascript work:
                <b><a href='ex_1_bid_info.php?tmp1=$tmp1&tmp2=$tmp2'  id=$tmp >

                    $tmparr[5]<BR>$tmparr[6]&nbsp;</font></a></b>  
                  <div style='margin-top:<javascript:findPos($tmp)>'>

                  <iframe  src='bbDetailsN.php?tmp1=$tmp1&tmp2=$tmp2' ></iframe>

                </div>

if I put the javascript on a mouseover on the a tag and put an alert in, the function is working the way it should.  I just don't know how to apply it inside the php on a style.
0
 
dcassAuthor Commented:
i.e. this works but I can't use the return curtop variable from the javascript (or don't know how):
<script type="text/javascript">

function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    curtop=curtop-100;
    return [curtop];
  }
}
</script>
<php
 echo="<div class='iframe-holder'  >  

                <b><a href='ex_1_bid_info.php?tmp1=$tmp1&tmp2=$tmp2'  id=$tmp onmouseover=findPos($tmp)>

                    $tmparr[5]<BR>$tmparr[6]&nbsp;</font></a></b>  
                  <div style='margin-top:????????????>'>

                  <iframe  src='bbDetailsN.php?tmp1=$tmp1&tmp2=$tmp2' ></iframe>

                </div>

                </div>
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Michel PlungjanIT ExpertCommented:
I do not understand what you mean by "hover works some much cleaner than mouseover"

One is CSS the other is JavaScript. If you need JavaScript to calculate what you need, you need to attach the calculation to a JavaScript event.
0
 
dcassAuthor Commented:
I have a list and want to display an iframe over it on mouseover/hover (looks like I need both).

Please look at the code and the two things I tried that didn't work and see if at least one of them is viable (especially the javascript display of that iframe). Also, will the javascript display of the iframe use the css already in place?

I'm working on this and if I get it first, then I'll close this out.  However, I don't know what I'm doing and it could take all day, so please take a look.

Thanks in advance.
0
 
dcassAuthor Commented:
My problem is that I have CSS, javascript to get the top position of the shown screen, and PHP and somewhere somehow I have to get the variables from each of these to run together.
0
 
Michel PlungjanIT ExpertCommented:
Like this?
<html>
<head>
<script>
function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    curtop=curtop-100;
    return [curtop];
  }
}
</script>
</head>
<body>
<php
<div class="iframe-holder">  
  <b><a href="ex_1_bid_info.php?tmp1=<?php echo $tmp1."&tmp2=".$tmp2."\" id=\"".$tmp; ?>" onmouseover="document.getElementById('x').style.top=findPos('<?php echo $tmp; ?>')+'px'">
<?php echo  $tmparr[5]."<br />".$tmparr[6]; ?>&nbsp;</font></a></b>
<div id="x">
  <iframe  src="bbDetailsN.php?<?php echo $tmp1."&tmp2=".$tmp2; ?>"></iframe>
</div>

                </div>

Open in new window

0
 
dcassAuthor Commented:
Exactly, but this doesn't work and I think it's just a small problem in:
<?php echo $tmp1."&tmp2=".$tmp2."\" id=\"".$tmp; ?>

(but I'm not sure.  This inline iframe display works, but it's not using the curtop from the function.
0
 
dcassAuthor Commented:
OK - maybe it's not there.  It's not doing this If:
  if (obj.offsetParent) {
0
 
Michel PlungjanIT ExpertCommented:
Ah

function findPos(objID) {
  var obj = document.getElementById(objID);
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    curtop=curtop-100;
    return [curtop];
  }
}
0
 
dcassAuthor Commented:
I see what you are doing - if you get the top position of the inside div (where you set id='x'), it will never work because it's not displayed until the hover, so the mouseover has to be set on either the parent div or the a tag, but I tried that and it doesn't work either because then the style is being set on the wrong thing.
0
 
dcassAuthor Commented:
Actually, with that change on the function, the first one on the list works.  The rest do not.  I'll try the other fix.
0
 
dcassAuthor Commented:
No, the other fix doesn't help.
0
 
Michel PlungjanIT ExpertCommented:
I think if I knew what you were trying to do I could help better


Make a picture before and after and perhaps put the code somewhere on the net
0
 
dcassAuthor Commented:
plus bbDetailsN.php?<?php echo $tmp1."&tmp2=".$tmp2; ?> is not working - vars are not being passed
0
 
dcassAuthor Commented:
It's basically loading an array, listing it in table format, then when the user hovers over one of the lines, the iframe pops-up (display-inline).  The only hard part is that I want the iframe to appear within the visible screen area - it's a large iframe and near the bottom of the list, only the top part of the iframe is visible.  Is that enough info or do you need more?
0
 
dcassAuthor Commented:
It is working on the first line displayed.
0
 
dcassAuthor Commented:
I think .top is not right - how do you put margin-top in js?

<a  href="ex_1_bid_info.php?tmp1=<?php echo $tmp1.'&tmp2='.$tmp2; ?>" id="<?php echo $tmp; ?>" onmouseover="document.getElementById('x').style.top=findPos('<?php echo $tmp; ?>')+'px'">
0
 
Michel PlungjanIT ExpertCommented:
...style.marginTop=number+'px'

0
 
dcassAuthor Commented:
That didn't work.
I'll have my boss look at it.

Where we are:
  It returns the right curtop every time, curtop just gets ignored after the first line in the table.

  So on hover over the first line, the iframe displays correctly using the curtop returned.
  On hover on every line after that, the iframe displays on auto (on the hover line) resulting in the bottom half of the iframe not being shown when the user is lower down on the page (of the listing).

Every example I have seen works this same way, but I know that automatic positioning on the screen and within the iframe (no matter where you've scrolled) can be done because all the Microsoft displays do it.  Is it that difficult?
0
 
dcassAuthor Commented:
OK - I see now there is no way to do this without calling another HTML, which you suggested, so I'll give you the points for your effort.
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.