»
EnglishFrenchVietnamese

Print - Position Layer with Scroll - JavaScriptBank.com

Full version: jsB@nk » Link » Tooltip » Position Layer with Scroll
URL: https://www.javascriptbank.com/position-layer-with-scroll.html

Position Layer with Scroll © JavaScriptBank.comA 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



CSS
<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-->


JavaScript
<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-->


HTML
<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&#39;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">&nbsp;</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-->