jscott
12-12-2005, 02:55 PM
Greetings,
I have a web application where I need to have some content appear next to where a user clicks. I think...easy enough. I'll get the positon of the event and have a hidden div on layer 5 appear next to the clickable item.
I have the positioning code working in IE6, FF 1.5, Safari. My problem is if the user scrolls down the page to the clickable item positioning occurs at the proper location but the browser scrolls back up the top.
Any idea why positioning a div in this way causes the browser to scroll up.
Here is a test page I'm using to try and figure out what's going on. Note "item1" is the clickable object:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<!-- <link rel="stylesheet" type="text/css" href="css/default.css"> -->
<script language="javascript" src="FloatLayer.js"></script>
<script type="text/javascript">
function doPopDiv(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
obj = document.getElementById("saveDiv");
var xpos;
var ypos;
if (document.all) {
xpos = evt.clientX + document.body.scrollLeft;
ypos = evt.clientY + document.body.scrollTop;
}
else {
xpos = evt.pageX;
ypos = evt.pageY;
}
obj.style.top = ypos + "px";
obj.style.left = xpos + "px";
obj.style.zIndex = 5;
obj.style.display = "";
}
</script>
</head>
<body>
<div id="saveDiv" style="position:absolute; top:30; left:30; height:300px; width:200px; border:2px solid #000000; z-index:0; overflow:auto; background-color:#FFFFFF;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<span class="Content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>
</td>
</tr>
</table>
</div>
<div class="bodyContent">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="moduleBorder">
<tr class="moduleHeader">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" style="padding-left:4px;">
</td>
<td class="portletHeaderWhite" style="padding-left:4px;">module title</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div id="tabSet" style="position:inherit; float:right;">
<div style="width:100px;" onclick="doPopDiv(event)"><a href="#" class="tabSetNotSelected" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 1</a></div>
<div class="tabSetSelected" style="width:100px;">item 2</div>
<div style="width:100px;"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 3</a></div>
<div style="width:100px;"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 4</a></div>
<div style="clear:both"></div>
</div>
</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td class="Content" style="padding:10px;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="moduleBorder">
<tr class="moduleHeader">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" style="padding-left:4px;">
</td>
<td class="portletHeaderWhite" style="padding-left:4px;">module title</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div id="tabSet" style="position:inherit; float:right;">
<div style="width:100px;" onclick="doPopDiv(event)"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 1</a></div>
<div class="tabSetSelected" style="width:100px;">item 2</div>
<div style="width:100px;"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 3</a></div>
<div style="width:100px;"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 4</a></div>
<div style="clear:both"></div>
</div>
</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td class="Content" style="padding:10px;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
</tr>
</table>
</div>
</body>
</html>
I have a web application where I need to have some content appear next to where a user clicks. I think...easy enough. I'll get the positon of the event and have a hidden div on layer 5 appear next to the clickable item.
I have the positioning code working in IE6, FF 1.5, Safari. My problem is if the user scrolls down the page to the clickable item positioning occurs at the proper location but the browser scrolls back up the top.
Any idea why positioning a div in this way causes the browser to scroll up.
Here is a test page I'm using to try and figure out what's going on. Note "item1" is the clickable object:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<!-- <link rel="stylesheet" type="text/css" href="css/default.css"> -->
<script language="javascript" src="FloatLayer.js"></script>
<script type="text/javascript">
function doPopDiv(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
obj = document.getElementById("saveDiv");
var xpos;
var ypos;
if (document.all) {
xpos = evt.clientX + document.body.scrollLeft;
ypos = evt.clientY + document.body.scrollTop;
}
else {
xpos = evt.pageX;
ypos = evt.pageY;
}
obj.style.top = ypos + "px";
obj.style.left = xpos + "px";
obj.style.zIndex = 5;
obj.style.display = "";
}
</script>
</head>
<body>
<div id="saveDiv" style="position:absolute; top:30; left:30; height:300px; width:200px; border:2px solid #000000; z-index:0; overflow:auto; background-color:#FFFFFF;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<span class="Content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</span>
</td>
</tr>
</table>
</div>
<div class="bodyContent">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="moduleBorder">
<tr class="moduleHeader">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" style="padding-left:4px;">
</td>
<td class="portletHeaderWhite" style="padding-left:4px;">module title</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div id="tabSet" style="position:inherit; float:right;">
<div style="width:100px;" onclick="doPopDiv(event)"><a href="#" class="tabSetNotSelected" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 1</a></div>
<div class="tabSetSelected" style="width:100px;">item 2</div>
<div style="width:100px;"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 3</a></div>
<div style="width:100px;"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 4</a></div>
<div style="clear:both"></div>
</div>
</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td class="Content" style="padding:10px;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="moduleBorder">
<tr class="moduleHeader">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" style="padding-left:4px;">
</td>
<td class="portletHeaderWhite" style="padding-left:4px;">module title</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-right:10px;">
<div id="tabSet" style="position:inherit; float:right;">
<div style="width:100px;" onclick="doPopDiv(event)"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 1</a></div>
<div class="tabSetSelected" style="width:100px;">item 2</div>
<div style="width:100px;"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 3</a></div>
<div style="width:100px;"><a class="tabSetNotSelected" href="#" onmouseover="this.className='tabSetOver'" onmouseout="this.className='tabSetNotSelected'">item 4</a></div>
<div style="clear:both"></div>
</div>
</td>
</tr>
<tr><td height="10"></td></tr>
<tr>
<td class="Content" style="padding:10px;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
</tr>
</table>
</div>
</body>
</html>