Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2144 | Replies: 2
 |
•
•
Join Date: Jun 2005
Posts: 3
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
// define possible timers globally
for( var h = 1; h < 16; h++ ) {
eval( 'var timer' + h + '=false' );
}
function showPopup( slot, tall, high ){
// hide any other currently visible popups
for ( var i = 1; i < 16; i++ ) {
if ( i != slot ) {
cancelTimer(i);
hidePopup(i);
}
}
// show current
var ref = document.all ? document.all["popup" + slot] : document.getElementById ? document.getElementById("popup" + slot) : null;
if ( ref ) {ref = ref.style;}
if ( ref.visibility != "show" && ref.visibility != "visible" ) {
ref.top = ( tall + high ) < 0 ? 0 : ( tall + high + 1 );
ref.zIndex = 8;
ref.visibility = "visible";
}
}
function setTimer(slot) {
eval( "timer" + slot + "=setTimeout(\"hidePopup(" + slot + ")\",500);");
}
function cancelTimer(slot) {
eval( "clearTimeout(timer" + slot + ");" );
eval( "timer" + slot + "=false;" );
}
function hidePopup(slot) {
var ref = document.all ? document.all["popup" + slot] : document.getElementById ? document.getElementById("popup" + slot) : null ;
if (ref) { ref.style.visibility = "hidden"; }
eval("timer" + slot + "=false;");
}
//-->
</script>
<span class='header'>MacAleese James Anderson</span><br />
<span class="normal"><img src="images/tng_male.gif" width="11" height="11" border="0" alt="" style="vertical-align: -1px;"/> 1829 - 1900</span><br />
<br clear="all" />
<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> <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> <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>
<form style="margin:0px" action="pedigree.php" name="form1" id="form1">
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap="nowrap"><ul id="tngnav">
<li><a id="a0" href="getperson.php?personID=I0071&tree=mac"><img src="images/tng_ind.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Individual</a></li>
<li><a id="a1" href="pedigree.php?personID=I0071&tree=mac" class="here"><img src="images/tng_ped.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Ancestors</a></li>
<li><a id="a2" href="descend.php?personID=I0071&tree=mac"><img src="images/tng_desc.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Descendants</a></li>
<li><a id="a3" href="relateform.php?primaryID=I0071&tree=mac"><img src="images/tng_rel.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Relationship</a></li>
<li><a id="a4" href="timeline.php?primaryID=I0071&tree=mac"><img src="images/tng_time.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>Timeline</a></li>
<li><a id="a5" href="gedform.php?personID=I0071&tree=mac"><img src="images/tng_ged.gif" width="16" height="15" border="0" alt="" class="tngmenuicon"/>GEDCOM</a></li>
</ul></td>
</tr>
<tr>
<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:
<select name="generations" style="font-size:9px">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected="selected">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<a href="pedigree.php? personID=I0071&tree=mac&parentset=0&display=standard" class="lightlink3" onclick="this.href += '&generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Standard</a> | <a href="ultraped.php? personID=I0071&tree=mac&parentset=0&display=compact" class="lightlink" onclick="this.href += '&generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Compact</a> | <a href="pedigree.php? personID=I0071&tree=mac&parentset=0&display=box" class="lightlink" onclick="this.href += '&generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Box</a> | <a href="pedigreetext.php? personID=I0071&tree=mac&parentset=0" class="lightlink" onclick="this.href += '&generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Text</a> | <a href="ahnentafel.php? personID=I0071&tree=mac&parentset=0" class="lightlink" onclick="this.href += '&generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Ahnentafel</a> | <a href="extrastree.php? personID=I0071&tree=mac&parentset=0&showall=1" class="lightlink" onclick="this.href += '&generations=' + document.form1.generations.options[document.form1.generations.selectedIndex].value;">Photos & Histories</a> </span></span> </td>
</tr>
</table></td>
</tr>
</table>
<br/>
</form>
<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 <img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /> = New pedigree) </span></p>
<div align="left" style="position:relative;">
<!-- box for MacAleese James Anderson -->
<div style="position:absolute; background-color:#95b3de; top:250px; left:10px; height:61px; width:151px; z-index:5; clip:rect(auto, auto, 61px, auto)">
<table border="0" cellpadding="5" cellspacing="0" align="center">
<tr>
<td align="center" class="pboxname" height="61"><span style="font-size:12pt"><a href="getperson.php?personID=I0071&tree=mac">MacAleese James Anderson</a></span></td>
</tr>
</table>
</div>
<!-- popup for MacAleese James Anderson -->
<div style="position:absolute; top:317px;left:72px;z-index:7;cursor:pointer"><a href="#" onmouseover="showPopup(1, 250,61)">popup</a></div>
<div id="popup1" style="position:absolute; visibility:hidden; background-color:#DDDDDD; left:11px;z-index:8" onmouseover="cancelTimer(1)" onmouseout="setTimer(1)">
<table style="border: 1px solid #000000;" cellpadding="1" cellspacing="0">
<tr>
<td><table border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">B: </span></td>
<td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">1829</span></td>
</tr>
<tr>
<td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">Antrim, Ireland</span></td>
</tr>
<tr>
<td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">M: </span></td>
<td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">20 Dec 1855</span></td>
</tr>
<tr>
<td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">Dover, Westmorland, New Brunswick, Canada</span></td>
</tr>
<tr>
<td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt">D: </span></td>
<td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">1 Mar 1900</span></td>
</tr>
<tr>
<td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt">Moncton, Westmorland, New Brunswick, Canada</span></td>
</tr>
<tr>
<td class="pboxpopup" valign="top" colspan="4"><span style="font-size:10pt"><b>Family:</b> [<a href="familygroup.php?familyID=F0002&tree=mac">Group Sheet</a>]</span></td>
</tr>
<tr>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><b>1</b></span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap" colspan="2"><span style="font-size:10pt"><a href="getperson.php?personID=I0082&tree=mac">O'Neal Mary Jane</a></span></td>
<td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt"> <a href="pedigree.php?personID=I0082&tree=mac&display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
</tr>
<tr>
<td class="pboxpopup" align="right" valign="top"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" colspan="3"><span style="font-size:10pt"><b>Children</b></span></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">• </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0027&tree=mac">MacAleese Margaret</a></span></td>
<td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt"> <a href="pedigree.php?personID=I0027&tree=mac&display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">• </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0038&tree=mac">MacAleese Daniel</a></span></td>
<td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt"> <a href="pedigree.php?personID=I0038&tree=mac&display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">• </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0049&tree=mac">MacAleese John J.</a></span></td>
<td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt"> <a href="pedigree.php?personID=I0049&tree=mac&display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">• </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0060&tree=mac">MacAleese Annie Jane</a></span></td>
<td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt"> <a href="pedigree.php?personID=I0060&tree=mac&display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"><span style="font-size:10pt"> </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt">• </span></td>
<td class="pboxpopup" valign="top" nowrap="nowrap"><span style="font-size:10pt"><a href="getperson.php?personID=I0001&tree=mac">MacAleese William Stuart</a></span></td>
<td class="pboxpopup" valign="top" align="right" nowrap="nowrap"><span style="font-size:10pt"> <a href="pedigree.php?personID=I0001&tree=mac&display=standard"><img src="images/Chart.gif" border="0" width="11" height="10" title=" = New pedigree" alt="" /></a></span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!-- box outline and shadow for MacAleese James Anderson -->
<div style="position:absolute; background-color:#000000; top:249px;left:9px;height:63px;width:153px;z-index:4"></div>
<div style="position:absolute; background-color:#999999; top:253px;left:13px;height:63px;width:153px;z-index:1"></div>
<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>
<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>
</div>
</body>
</html>
•
•
Join Date: Jun 2005
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
one solution I found is to change:
to this:
...but it would be nicer if the popup anchored to the onmouseover spot...
ref.top = ( tall + high ) < 0 ? 0 : ( tall + high + 1 );
to this:
ref.top = 0;
...but it would be nicer if the popup anchored to the onmouseover spot...
•
•
Join Date: Jun 2005
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
