Entry
How do I move a layer where an element was clicked?
How do I move a layer where an element was clicked?
Example doesh't work in Opera 5
Oct 16th, 2002 05:21
Martin Honnen, Charlie Brown,
The problem is to do that cross browser, as different browsers have
different event properties giving the click coordinates, and as these
coordinates are sometimes (with NN4 event.pageX/pageY and with Opera 6
event.clientX/clientY) absolute in relation to the top left corner of
the page while with IE5+ and NN6+ event.clientX/clientY are relative
to the current scroll position of the page so you need to access the
scroll position too. The latter is quite a hassle with IE6 as
depending on whether IE is in strict layout mode you have to access
either document.documentElement.scrollLeft/scrollTop or
document.body.scrollLeft/scrollTop.
Thus the following example page contains two functions,
getScrollCoords, and moveLayer. The page has been tested to work with
IE6/Win (with both quirks mode and strict layout mode), with Netscape
7, with Netscape 4 and Opera 6, all on Win. It should work with
Netscape 4, Netscape 6+, IE5+, and Opera 6 on all platforms.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
layer positioning
</title>
<style type="text/css">
#pictureContainer {
position: absolute;
left: 766px; top: 574px;
}
</style>
<script type="text/javascript">
function getScrollCoords () {
if (typeof window.pageXOffset != 'undefined')
return {x: window.pageXOffset, y: window.pageYOffset};
else if ((!document.compatMode || document.compatMode
== 'BackCompat')
&& document.body && typeof document.body.scrollLeft !
= 'undefined')
return {x: document.body.scrollLeft, y: document.body.scrollTop};
else if (document.compatMode == 'CSS1Compat' &&
document.documentElement && typeof
document.documentElement.scrollLeft != 'undefined')
return {x: document.documentElement.scrollLeft, y:
document.documentElement.scrollTop};
else
return null;
}
function moveLayer (layerId, evt) {
if (document.layers)
document.layers[layerId].moveTo(evt.pageX, evt.pageY);
else {
var scrollCoords = getScrollCoords();
var layer;
if (document.all)
layer = document.all[layerId];
else if (document.getElementById)
layer = document.getElementById(layerId);
if (window.opera && layer) {
layer.style.left = evt.clientX + 'px';
layer.style.top = evt.clientY + 'px';
}
else if (layer && scrollCoords) {
layer.style.left = scrollCoords.x + evt.clientX + 'px';
layer.style.top = scrollCoords.y + evt.clientY + 'px';
}
}
}
</script>
</head>
<body>
<p>
<img name="image0"
src="kiboInside.gif"
width="300" height="200"
alt="Kibo Inside"
onclick="moveLayer('pictureContainer', event);"
/>
<script type="text/javascript">
if (document.layers) {
document.image0.onmousedown = function (evt) {
moveLayer('pictureContainer', evt);
};
}
</script>
</p>
<p>
<script type="text/javascript">
for (var i = 0; i < 100; i++)
document.write(i + ' Kibology<br \/>');
</script>
</p>
<p>
<img name="image1"
src="kiboInside.gif"
width="150" height="450"
onclick="moveLayer('pictureContainer', event);"
/>
<script type="text/javascript">
if (document.layers) {
document.image1.onmousedown = function (evt) {
moveLayer('pictureContainer', evt);
};
}
</script>
</p>
<span id="pictureContainer"><img src="buttonon.gif" /></span>
</body>
</html>
