»
EnglishFrenchVietnamese

Print - X Floater Box - JavaScriptBank.com

Full version: jsB@nk » Form » Table » X Floater Box
URL: http://www.javascriptbank.com/crossbrowser-x-floater-box.html

X Floater Box © JavaScriptBank.comExperiment 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: http://www.javascriptbank.com/crossbrowser-x-floater-box.html



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


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


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


Files
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