Get CBE at Cross-Browser.com
<!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'> </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'> </div> <!-- End Of Content Marker --> </div> <!-- end idContent --> <!-- End Scrollable Content --> </div> <!-- end idScroller --> </body> </html>