« »

Slides an element while the mouse is over some other element.

Label: Mouseover Scroll Buttons

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
body {
  overflow:hidden;
}
.button {
  background:#963;
  position:relative;
  margin:4px; padding:1px;
  width:30px; height:30px;
  border:1px solid #663;
}
#upButton {
  border-top:3px solid #663;
}
#dnButton {
  border-bottom:3px solid #663;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script type="text/javascript">
window.onload = function()
{
    if (window.winOnLoad) window.winOnLoad();
}
</script>
<script type="text/javascript">
function winOnLoad()
{
  var lc = xGetElementById('leftColumn');
  if (lc && xDef(lc.style, lc.offsetLeft, lc.offsetTop)) { // downgrade check
    //lc.slideLinear = true; // this feature will be supported in X v3.15.3
    xMoveTo(lc, lc.offsetLeft, lc.offsetTop); // prime the element's inline style properties
    lc.slideTop = lc.offsetTop;
    lc.slideLeft = lc.offsetLeft;
    
    var e = xGetElementById('upButton');
    e.scrlUp = true;
    e.scrlEle = lc;
    e.onmouseover = scrlOnMouseover;
    e.onmouseout = scrlOnMouseout;
  
    e = xGetElementById('dnButton');
    e.scrlEle = lc;
    e.onmouseover = scrlOnMouseover;
    e.onmouseout = scrlOnMouseout;
  }
}
function scrlOnMouseover()
{
  var st, y, minST, maxST;
  if (this.scrlUp) {
    minST = 1000;
    maxST = 6000;
    y = this.scrlEle.slideTop;
  }
  else {
    minST = 6000;
    maxST = 1000;
    y = -xHeight(this.scrlEle);
  }
  st = parseInt(xLinearScale(-xTop(this.scrlEle), this.scrlEle.slideTop, xHeight(this.scrlEle), minST, maxST));
  xSlideTo(this.scrlEle, this.scrlEle.slideLeft, y, st);
}
function scrlOnMouseout()
{
  this.scrlEle.stop = true;
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div class="collapsible">
<div id="upButton" class="button">Up</div>

<div id="dnButton" class="button"><br>Dn</div>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->