Seeking help on js popup repositioning behaviour

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Jun 2005
Posts: 3
Reputation: Sliv is an unknown quantity at this point 
Solved Threads: 0
Sliv Sliv is offline Offline
Newbie Poster

Seeking help on js popup repositioning behaviour

 
0
  #1
Jun 9th, 2005
Hello:

I'm looking for some assistance with a third-party script I'm using that incorporates onmouseover popups. If the content of the popup is too large to appear within the visible window just below the onmouseover spot, two different behaviours occur in firefox and IE 6:

IE 6 will elongate the browser window via scrolling to allow the popup to be viewed - but you must physically scroll the window further down after doing the onmouseover.

Firefox will reposition the popup elsewhere in the visible window.

I think the repositioning behaviour is the preferred user experience (although I'd like it to still be anchored to the onmouseover spot, not far away), but my js knowledge is far too limited to understand why these two different behaviours are happening.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. </head>
  7. <body>
  8. <script language="JavaScript" type="text/javascript">
  9. <!--
  10. // define possible timers globally
  11. for( var h = 1; h < 16; h++ ) {
  12. eval( 'var timer' + h + '=false' );
  13. }
  14.  
  15. function showPopup( slot, tall, high ){
  16. // hide any other currently visible popups
  17. for ( var i = 1; i < 16; i++ ) {
  18. if ( i != slot ) {
  19. cancelTimer(i);
  20. hidePopup(i);
  21. }
  22. }
  23.  
  24. // show current
  25. var ref = document.all ? document.all["popup" + slot] : document.getElementById ? document.getElementById("popup" + slot) : null;
  26.  
  27. if ( ref ) {ref = ref.style;}
  28.  
  29. if ( ref.visibility != "show" && ref.visibility != "visible" ) {
  30. ref.top = ( tall + high ) < 0 ? 0 : ( tall + high + 1 );
  31. ref.zIndex = 8;
  32. ref.visibility = "visible";
  33. }
  34. }
  35.  
  36. function setTimer(slot) {
  37. eval( "timer" + slot + "=setTimeout(\"hidePopup(" + slot + ")\",500);");
  38. }
  39.  
  40. function cancelTimer(slot) {
  41. eval( "clearTimeout(timer" + slot + ");" );
  42. eval( "timer" + slot + "=false;" );
  43. }
  44.  
  45. function hidePopup(slot) {
  46. var ref = document.all ? document.all["popup" + slot] : document.getElementById ? document.getElementById("popup" + slot) : null ;
  47. if (ref) { ref.style.visibility = "hidden"; }
  48. eval("timer" + slot + "=false;");
  49. }
  50. //-->
  51. </script>
  52. <span class='header'>MacAleese James Anderson</span><br />
  53. <span class="normal"><img src="images/tng_male.gif" width="11" height="11" border="0" alt="" style="vertical-align: -1px;"/>&nbsp;1829 - 1900</span><br />
  54. <br clear="all" />
  55. <p class="smaller"> <a href="index.php" target="_top" title="Home"><img src="images/tng_home.gif" width="16" height="15" border="0" class="tngmenuicon" vspace="0" hspace="1" alt="Home"/>Home</a>&nbsp;&nbsp;<a href="searchform.php" title="Search"><img src="images/tng_search.gif" width="16" height="15" border="0" class="tngmenuicon" vspace="0" hspace="1" alt="Search"/>Search</a>&nbsp;&nbsp;<a href="login.php" title="Login - User: anonymous"><img src="images/tng_log.gif" width="16" height="15" border="0" class="tngmenuicon" vspace="0" hspace="1" alt="Login - User: anonymous"/>Login</a></p>
  56. <form style="margin:0px" action="pedigree.php" name="form1" id="form1">
  57. <table border="0" cellspacing="1" cellpadding="0" width="100%">
  58. <tr>
  59. <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  60. <tr>
  61. <td nowrap="nowrap"><ul id="tngnav">
  62. <li><a id="a0" href="getperson.php?personID=I0071&amp;tree=mac"><img src="images/tng_ind.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Individual</a></li>
  63. <li><a id="a1" href="pedigree.php?personID=I0071&amp;tree=mac" class="here"><img src="images/tng_ped.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Ancestors</a></li>
  64. <li><a id="a2" href="descend.php?personID=I0071&amp;tree=mac"><img src="images/tng_desc.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Descendants</a></li>
  65. <li><a id="a3" href="relateform.php?primaryID=I0071&amp;tree=mac"><img src="images/tng_rel.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Relationship</a></li>
  66. <li><a id="a4" href="timeline.php?primaryID=I0071&amp;tree=mac"><img src="images/tng_time.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Timeline</a></li>
  67. <li><a id="a5" href="gedform.php?personID=I0071&amp;tree=mac"><img src="images/tng_ged.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>GEDCOM</a></li>
  68. </ul></td>
  69. </tr>
  70. <tr>
  71. <td valign="top" class="fieldnameback" style="padding: 0.2em 0em 0.2em .7em; border-right: 1px solid #777; border-bottom: 1px solid #777;"><span class="fieldname"><span class="smaller"> Generations: &nbsp;
  72. <select name="generations" style="font-size:9px">
  73. <option value="1">1</option>
  74. <option value="2">2</option>
  75. <option value="3">3</option>
  76. <option value="4" selected="selected">4</option>
  77. <option value="5">5</option>
  78. <option value="6">6</option>
  79. <option value="7">7</option>
  80. <option value="8">8</option>
  81. </select>
  82. &nbsp;&nbsp;&nbsp; <a href="pedigree.php? personID=I0071&amp;tree=mac&amp;parentset=0&amp;display=standard" class="lightlink3" onclick="this.href += '&amp;generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Standard</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="ultraped.php? personID=I0071&amp;tree=mac&amp;parentset=0&amp;display=compact" class="lightlink" onclick="this.href += '&amp;generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Compact</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="pedigree.php? personID=I0071&amp;tree=mac&amp;parentset=0&amp;display=box" class="lightlink" onclick="this.href += '&amp;generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Box</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="pedigreetext.php? personID=I0071&amp;tree=mac&amp;parentset=0" class="lightlink" onclick="this.href += '&amp;generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Text</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="ahnentafel.php? personID=I0071&amp;tree=mac&amp;parentset=0" class="lightlink" onclick="this.href += '&amp;generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Ahnentafel</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="extrastree.php? personID=I0071&amp;tree=mac&amp;parentset=0&amp;showall=1" class="lightlink" onclick="this.href += '&amp;generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Photos &amp; Histories</a> </span></span> </td>
  83. </tr>
  84. </table></td>
  85. </tr>
  86. </table>
  87. <br/>
  88. </form>
  89. <p> (Notes: You may have to scroll down or right to see chart. <img src="images/ArrowDown.gif" width="25" height="8" alt="" /> = Additional information&nbsp;&nbsp;<img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /> &nbsp; = New pedigree) </span></p>
  90. <div align="left" style="position:relative;">
  91. <!-- box for MacAleese James Anderson -->
  92. <div style="position:absolute; background-color:#95b3de; top:250px; left:10px; height:61px; width:151px; z-index:5; clip:rect(auto, auto, 61px, auto)">
  93. <table border="0" cellpadding="5" cellspacing="0" align="center">
  94. <tr>
  95. <td align="center" class="pboxname" height="61"><span style="font-size:12pt"><a href="getperson.php?personID=I0071&amp;tree=mac">MacAleese James Anderson</a></span></td>
  96. </tr>
  97. </table>
  98. </div>
  99. <!-- popup for MacAleese James Anderson -->
  100. <div style="position:absolute; top:317px;left:72px;z-index:7;cursor:pointer"><a href="#" onmouseover="showPopup(1, 250,61)">popup</a></div>
  101. <div id="popup1" style="position:absolute; visibility:hidden; background-color:#DDDDDD; left:11px;z-index:8" onmouseover="cancelTimer(1)" onmouseout="setTimer(1)">
  102. <table style="border: 1px solid #000000;" cellpadding="1" cellspacing="0">
  103. <tr>
  104. <td><table border="0" cellspacing="0" cellpadding="1">
  105. <tr>
  106. <td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">B:&nbsp;</span></td>
  107. <td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">1829</span></td>
  108. </tr>
  109. <tr>
  110. <td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">&nbsp;&nbsp;</span></td>
  111. <td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">Antrim, Ireland</span></td>
  112. </tr>
  113. <tr>
  114. <td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">M:&nbsp;</span></td>
  115. <td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">20 Dec 1855</span></td>
  116. </tr>
  117. <tr>
  118. <td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">&nbsp;&nbsp;</span></td>
  119. <td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">Dover, Westmorland, New Brunswick, Canada</span></td>
  120. </tr>
  121. <tr>
  122. <td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">D:&nbsp;</span></td>
  123. <td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">1 Mar 1900</span></td>
  124. </tr>
  125. <tr>
  126. <td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">&nbsp;&nbsp;</span></td>
  127. <td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">Moncton, Westmorland, New Brunswick, Canada</span></td>
  128. </tr>
  129. <tr>
  130. <td class="pboxpopup" valign="top" colspan="4"><span style="font-size:10pt"><b>Family:</b> [<a href="familygroup.php?familyID=F0002&amp;tree=mac">Group Sheet</a>]</span></td>
  131. </tr>
  132. <tr>
  133. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><b>1</b></span></td>
  134. <td class="pboxpopup" valign="top" nowrap="nowrap" colspan="2"><span style="font-size:10pt"><a href="getperson.php?personID=I0082&amp;tree=mac">O'Neal Mary Jane</a></span></td>
  135. <td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt">&nbsp;<a href="pedigree.php?personID=I0082&amp;tree=mac&amp;display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
  136. </tr>
  137. <tr>
  138. <td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">&nbsp;&nbsp;</span></td>
  139. <td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt"><b>Children</b></span></td>
  140. </tr>
  141. <tr>
  142. <td valign="top" nowrap="nowrap"><span style="font-size:10pt">&nbsp;</span></td>
  143. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">&bull;&nbsp;</span></td>
  144. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0027&amp;tree=mac">MacAleese Margaret</a></span></td>
  145. <td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt">&nbsp;<a href="pedigree.php?personID=I0027&amp;tree=mac&amp;display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
  146. </tr>
  147. <tr>
  148. <td valign="top" nowrap="nowrap"><span style="font-size:10pt">&nbsp;</span></td>
  149. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">&bull;&nbsp;</span></td>
  150. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0038&amp;tree=mac">MacAleese Daniel</a></span></td>
  151. <td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt">&nbsp;<a href="pedigree.php?personID=I0038&amp;tree=mac&amp;display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
  152. </tr>
  153. <tr>
  154. <td valign="top" nowrap="nowrap"><span style="font-size:10pt">&nbsp;</span></td>
  155. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">&bull;&nbsp;</span></td>
  156. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0049&amp;tree=mac">MacAleese John J.</a></span></td>
  157. <td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt">&nbsp;<a href="pedigree.php?personID=I0049&amp;tree=mac&amp;display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
  158. </tr>
  159. <tr>
  160. <td valign="top" nowrap="nowrap"><span style="font-size:10pt">&nbsp;</span></td>
  161. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">&bull;&nbsp;</span></td>
  162. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0060&amp;tree=mac">MacAleese Annie Jane</a></span></td>
  163. <td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt">&nbsp;<a href="pedigree.php?personID=I0060&amp;tree=mac&amp;display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
  164. </tr>
  165. <tr>
  166. <td valign="top" nowrap="nowrap"><span style="font-size:10pt">&nbsp;</span></td>
  167. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">&bull;&nbsp;</span></td>
  168. <td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0001&amp;tree=mac">MacAleese William Stuart</a></span></td>
  169. <td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt">&nbsp;<a href="pedigree.php?personID=I0001&amp;tree=mac&amp;display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
  170. </tr>
  171. </table></td>
  172. </tr>
  173. </table>
  174. </div>
  175. <!-- box outline and shadow for MacAleese James Anderson -->
  176. <div style="position:absolute; background-color:#000000; top:249px;left:9px;height:63px;width:153px;z-index:4"></div>
  177. <div style="position:absolute; background-color:#999999; top:253px;left:13px;height:63px;width:153px;z-index:1"></div>
  178. <div style="position:absolute;background-color:#000000; top:280px;left:161px;height:1px;width:16px;z-index:3;clip:rect(auto auto 1px auto)"></div>
  179. <div style="position:absolute;background-color:#999999; top:285px;left:166px;height:1px;width:16px;z-index:1;clip:rect(auto auto 1px auto)"></div>
  180. </div>
  181. </body>
  182. </html>
  183.  
Reply With Quote Quick reply to this message  
Join Date: Jun 2005
Posts: 3
Reputation: Sliv is an unknown quantity at this point 
Solved Threads: 0
Sliv Sliv is offline Offline
Newbie Poster

Re: Seeking help on js popup repositioning behaviour

 
0
  #2
Jun 9th, 2005
one solution I found is to change:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. ref.top = ( tall + high ) < 0 ? 0 : ( tall + high + 1 );

to this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. ref.top = 0;

...but it would be nicer if the popup anchored to the onmouseover spot...
Reply With Quote Quick reply to this message  
Join Date: Jun 2005
Posts: 3
Reputation: Sliv is an unknown quantity at this point 
Solved Threads: 0
Sliv Sliv is offline Offline
Newbie Poster

Re: Seeking help on js popup repositioning behaviour

 
0
  #3
Jun 9th, 2005
solution was to add "px" to the end of the top property assignment - IE dynamically adds this if it is missing, but w3c dom standard apparently does not (firefox), so firefox would just position the popups at y offset 0.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC