Full version: jsB@nk » Form » Table » X Floater Box
URL: https://www.javascriptbank.com/crossbrowser-x-floater-box.html
Experiment with the floater's slide-time - the duration of the slide in milliseconds. The menu's movement on the page has a very psychological effect on the user. See for yourself by trying these values: 0, 100, 700, 1000. Try your own values.
Full version: jsB@nk » Form » Table » X Floater Box
URL: https://www.javascriptbank.com/crossbrowser-x-floater-box.html
<style type="text/css">#floater { position:absolute; visibility:hidden; width:150px; height:auto; color:#330; background:#963; margin:0; padding:4px; border:1px solid #330; border-top:3px solid #330;}a.m { display:block; width:100%; margin:.5em 0;}</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">window.onload = function(){ if (window.winOnLoad) window.winOnLoad();}</script><script type="text/javascript">var slideTime = 700, topMargin;function winOnLoad(){ topMargin = xPageY('leftColumn'); winOnResize(); // set initial position xAddEventListener(window, 'resize', winOnResize, false); xAddEventListener(window, 'scroll', winOnScroll, false); return;}function winOnResize() { xMoveTo('floater', xPageX('leftColumn')+xWidth('leftColumn')+20, topMargin); xShow('floater'); winOnScroll(); // initial slide}function winOnScroll() { xSlideTo('floater', xLeft('floater'), xScrollTop() + topMargin, slideTime);}function setSlideTime(st) { st = parseInt(st); if (!isNaN(st)) slideTime = st; var e = xGetElementById('st'); e.value = st; return false;}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="floater" style="left: 749px; top: 20px; visibility: visible;"><h4>Floater Menu</h4><a href="#js" class="m">Javascript</a><a href="#bime" class="m">But I must explain</a><a href="#sup" class="m">Sed ut perspiciatis</a><a href="#otoh" class="m">On the other hand</a><a href="#avee" class="m">At vero eos et</a><a href="#topofpg" class="m">Top</a></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/form/crossbrowser/x_core.jshttp://javascriptbank.com/javascript/form/crossbrowser/x_event.jshttp://javascriptbank.com/javascript/form/crossbrowser/x_drag.js