CBE Slider Example 2

Get CBE at Cross-Browser.com

Toggle Debug

 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>CBE Slider Example 2</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name='author' content='Mike Foster, cross-browser.com'>
  <meta name='description' content='Programming example for CBE, a cross-browser DHTML API for Internet Explorer, Netscape Navigator, Gecko, and Opera, available at cross-browser.com'>
  <style type='text/css'><!--
  body {
    font-family:verdana,arial,helvetica,sans-serif; font-size:10px;
    color:#000000; background:#cccccc; margin:0; padding:10px 20px 0 20px;
    overflow:hidden;
  }
  a:link, a:visited, a:active {
    font-family:verdana,arial,helvetica,sans-serif; font-size:10px;
    text-decoration:underline; color:#003366; background:transparent;
  }
  a:hover {
    font-family:verdana,arial,helvetica,sans-serif; font-size:10px;
    text-decoration:underline; color:#00cccc; background:#336699;
  }
  p {
    font-family:verdana,arial,helvetica,sans-serif; font-size:10px;
    color:#333333; background:transparent; margin: 1em 0 1em 0em;
  }
  pre {
    font-family:monospace; font-size:12px;
    color:#003366; background:transparent; margin: 1em 0 1em 0;
  }
  h1 {
    font-family:verdana,arial,helvetica,sans-serif; font-size:16px;
    color:#336699; background:transparent; font-weight:bold; margin-bottom:.5em;
    border-top:3px solid #003366;
  }
  .clsEndMarker {
    position:relative; visibility:hidden; width:1px; height:1px;
  }
  .clsCBE {
    position:absolute; visibility:hidden; overflow:hidden;
    width:100%; height:100%; clip:rect(0,100%,100%,0);
    color:#000000; margin:0px; padding:0px;
    border:1px solid #000000;
  }
  --></style>
  <script type='text/javascript' src='../cbe_core.js'></script>
  <script type='text/javascript' src='../cbe_event.js'></script>
  <script type='text/javascript' src='../cbe_debug.js'></script>
  <script type='text/javascript' src='../cbe_util.js'></script>
  <script type='text/javascript'><!--
  
  function windowOnload() {
    pgPaint();
    cbeGetElementById('idThumb').cbe.addEventListener('drag', thumbDragListener, false);
    window.cbe.addEventListener('resize', winResizeListener, false);
  }
  
  function pgPaint() {
    var sliderWidth = 24;
    var appMargin = 20;        // application margin
    var sliderScrollerSep = 4; // separation between slider and scroller
    var slider, content, scroller, hdrEnd;
    hdrEnd = cbeGetElementById('idEndOfHeader').cbe;
    with (slider = cbeGetElementById('idSlider').cbe) {
      background('#0000ff');
      resizeTo(sliderWidth, document.cbe.height() - hdrEnd.pageY() - 2 * appMargin);
      moveTo('sw', appMargin);
      show();
    }
    with (cbeGetElementById('idThumb').cbe) {
      background('#cccccc');
      resizeTo(sliderWidth - 4, sliderWidth - 4);
      moveTo(1,1);
      show();
    }
    with (scroller = cbeGetElementById('idScroller').cbe) {
      background('#cccccc');
      resizeTo(document.cbe.width() - slider.width() - sliderScrollerSep - 2 * appMargin, slider.height());
      moveTo(slider.left() + slider.width() + sliderScrollerSep, slider.top());
      show();
    }
    with (content = cbeGetElementById('idContent').cbe) {
      color('#000000');
      background('transparent');
      resizeTo(scroller.width(), cbeGetElementById('idEndOfContent').cbe.offsetTop());
      moveTo(2,0);
      show();
    }
    slider.scrollTarget = content;
    if (content.ele.style) {
      content.ele.style.border = 'none';
    }
  }
  
  function thumbDragListener(e) {
    var thumb = e.cbeTarget;
    var newY = thumb.top() + e.dy;
    if (newY >= 1 && newY < thumb.parentNode.height() - thumb.height() - 3) {
      thumb.moveBy(0, e.dy);
      var slider = thumb.parentNode;
      var content = slider.scrollTarget;
      var scrollFactor = Math.ceil((content.height() - content.parentNode.height()) / slider.height());
      content.moveBy(0, -e.dy * scrollFactor);
    }
  }
  
  function winResizeListener() {
    pgPaint();
  }
  
  //--></script>
  </head>
  <body>
  <h1>CBE Slider Example 2</h1>
  <p>Get CBE at <a href="http://cross-browser.com/">Cross-Browser.com</a></p>
  <p><a href="javascript:cbeDebugWindow('../')">Toggle Debug</a></p>
  <div id='idEndOfHeader' class='clsEndMarker'>&nbsp;</div> <!-- End Of Header Marker -->
  
  <div id='idSlider' class='clsCBE'>
    <div id='idThumb' class='clsCBE'></div>
  </div>
  
  <div id='idScroller' class='clsCBE'>
  <div id='idContent' class='clsCBE'> <!-- Begin Scrollable Content -->
  
  <pre>
    The source of this file was pasted here.
  </pre>
  
  <div id='idEndOfContent' class='clsEndMarker'>&nbsp;</div> <!-- End Of Content Marker -->
  
  </div> <!-- end idContent -->  <!-- End Scrollable Content -->
  </div> <!-- end idScroller -->
  
  </body>
  </html>