X Slider




Over 2000+ free Javascript
at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

X Slider Demo 1

Another X toy!

As you can see, I still have a few little problems with xEnableDrag(). But that's another project for another time ;-)

Special thanks to Yvan for inspiring me to dust off this little demo.

if (xInclude('../x_core.js', '../x_event.js', '../x_drag.js')) {
  window.onload = winOnLoad;
}
function winOnLoad() {
  var s = xGetElementById('slider');
  xBackground(s, '#963');
  xResizeTo(s, 24, 400);
  var lc = xGetElementById('firstLeftContent');
  xMoveTo(s, xPageX(lc) + xWidth(lc) - xWidth(s), xPageY(lc));
  xShow(s);
  var t = xGetElementById('thumb');
  xBackground(t, '#330');
  xResizeTo(t, 20, 20);
  xMoveTo(t, 1, 1);
  xShow(t);
  xEnableDrag(t, null, thumbOnDrag, null);
}
function thumbOnDrag(e, mdx, mdy) {
  var newY = xTop(e) + mdy;
  if (newY >= 1 && newY < xHeight(xParent(e)) - xHeight(e) - 3) {
    xTop(e, xTop(e) + mdy);
  }
}

This was a CBE demo which I converted to use X. Its a simple implementation that utilizes xEnableDrag().

I threw this together quickly... so it's probably not perfect - but it should give you some ideas :-)