Full version: jsB@nk » Link » Tooltip » Position Layer with Scroll
URL: https://www.javascriptbank.com/position-layer-with-scroll.html
A relative-positioned div is placed in the right column. When the user hovers over a link, the amount of scroll is determined. That amount is used in calculating the vertical position of the write-layer so that it always appears at the same relative location in the window.
Full version: jsB@nk » Link » Tooltip » Position Layer with Scroll
URL: https://www.javascriptbank.com/position-layer-with-scroll.html
<style type="text/css"><!--body, td { font-family: verdana, arial, helvetica, sans-serif;font-size: 12px; }th { font-family: verdana, arial, helvetica, sans-serif;font-size: 16px; text-align:left}a:link { color:#33c }a:visited { color:#339 }/* specifications for write layer */#infoDiv { position:relative; z-index:10 }/* for infoDiv content - set width here to remind ns4 (this code will only work for ns4 if layer written to is positioned absolute) */.info{ width:140px; font-family: Verdana, arial, helvetica, sans-serif; font-size: 11px; color:#fff; }--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">//dw_layer.jslayerHandler = { getRefs: function (id) { var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null; if (el) el.css = el.style? el.style: el; return el; }, writeLayer: function (el, cntnt) { if (typeof el.innerHTML!="undefined") { el.innerHTML = cntnt; } else if (document.layers) { el.document.write(cntnt); el.document.close(); } }, shiftTo: function (el,x,y) { var px = (document.layers || window.opera)? 0: "px"; if (x != null) el.css.left = x + px; if (y != null) el.css.top = y + px; }, show: function (el) { el.css.visibility = "visible"; }, hide: function (el) { el.css.visibility = "hidden"; }}var imageHandler = { imgs: [], path: "", preload: function() { for (var i=0; arguments[i]; i++) { var img = new Image(); img.src = this.path + arguments[i]; this.imgs[this.imgs.length] = img; } }}// returns amount of vertical scrollfunction getScrollY() {var sy = 0;if (document.documentElement && document.documentElement.scrollTop)sy = document.documentElement.scrollTop;else if (document.body && document.body.scrollTop) sy = document.body.scrollTop; else if (window.pageYOffset)sy = window.pageYOffset;else if (window.scrollY)sy = window.scrollY;return sy;}// returns amount of horizontal scrollfunction getScrollX() {var sx = 0;if (document.documentElement && document.documentElement.scrollLeft)sx = document.documentElement.scrollLeft;else if (document.body && document.body.scrollLeft) sx = document.body.scrollLeft; else if (window.pageXOffset)sx = window.pageXOffset;else if (window.scrollX)sx = window.scrollX;return sx;}</script><script type="text/javascript"><!--//Copyright 2001-3 by Sharon Paine // resize fix for ns4var origWidth, origHeight;if (document.layers) {origWidth = window.innerWidth; origHeight = window.innerHeight;window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }}// layer content variablesvar msg1 = "Your links could be anywhere and don\'t need to be images.";var msg2 = "Read code comments for more information about implementing the code.";var msg3 = "When support for Netscape 4 is less of a priority, much leaner code will suffice.";var msg4 = "Put your message here.";var msg5 = "Your message here.";var page_loaded; // set true onload (avoid errors onmouseover/out before page loaded)function showInfo(id, sHTML) {if (!page_loaded) return; var el = layerHandler.getRefs(id); if (!el) return; layerHandler.hide(el); // just in case ...var cntnt = '<div class="info">' + sHTML + '</div>';var y = getScrollY(); layerHandler.shiftTo(el, null, y); layerHandler.writeLayer(el, cntnt); layerHandler.show(el);}function hideInfo(id) { if (!page_loaded) return; var el = layerHandler.getRefs(id); if (!el) return; layerHandler.hide(el);}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="page_loaded=true;"><table width="578" align="center" cellpadding="8" border="0" cellspacing="0"><tbody><tr><td width="100"><a href="javascript://" onmouseover="showInfo('infoDiv',msg1)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td><td valign="top" width="280" rowspan="4"><p>Hover over the images to the left and the links below and information will be written to the layer in the right column.</p><p>A relative-positioned div is placed in the right column. When the user hovers over a link, the amount of scroll is determined. That amount is used in calculating the vertical position of the write-layer so that it always appears at the same relative location in the window.</p><p>Scroll and hover over the images and links to see for yourself. Notice this is a centered table. </p><p>The code includes support for Netscape 4, but since the layer is positioned relative in this example, Netscape 4 fails silently.</p><p>Click or right click to download the <a href="dw_layer.js" onmouseover="showInfo('infoDiv','A small JavaScript file containing common functions.'); window.status=''; return true" onmouseout="hideInfo('infoDiv')">dw_layer.js</a> file used by most of the writing to layers examples. You can save or view this document's source code using your browser menu commands.</p></td><td width="150" valign="top" bgcolor="#333366" rowspan="5"><!-- here is the layer --><div id="infoDiv" style="top: 215px; visibility: hidden;"><div class="info">Put your message here.</div></div></td></tr><tr> <td><a href="javascript://" onmouseover="showInfo('infoDiv',msg2)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td></tr><tr> <td><a href="javascript://" onmouseover="showInfo('infoDiv',msg3)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td></tr><tr> <td><a href="javascript://" onmouseover="showInfo('infoDiv',msg4)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td></tr><tr> <td><a href="javascript://" onmouseover="showInfo('infoDiv',msg5)" onmouseout="hideInfo('infoDiv')"><img src="../image/logojs.gif" width="100" height="100" border="0" alt=""></a></td><td valign="bottom"> <p dir="ltr"> </td></tr><tr> <td></td> <td></td> <td><img src="pos-scroll2_files/clear.gif" width="150" height="1" alt="" border="0"></td></tr></tbody></table></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->