Get CBE at Cross-Browser.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CBE Slider Example 3</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; } .clsMarker { position:relative; visibility:hidden; width:1px; height:1px; } .clsCBE { position:absolute; visibility:hidden; overflow:hidden; /* width:3000px; height:3000px; */ /* left:-3000px; top:-3000px; */ /* clip:rect(0 3000px 3000px 0); */ color:#000000; margin:0px; padding:0px; } --></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() { setTimeout("init()", 250); } function init() { pgPaint(); if (is.nav4 || is.gecko) window.resizeBy(1,1); 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, scroller, content, 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(); if (ele.style) { ele.style.borderTop = '1px solid #000000'; ele.style.borderLeft = '1px solid #000000'; ele.style.borderBottom = '1px solid #999999'; ele.style.borderRight = '1px solid #999999'; } } with (cbeGetElementById('idThumb').cbe) { background('#cccccc'); resizeTo(sliderWidth - 4, sliderWidth - 4); moveTo(1,1); show(); if (ele.style) { ele.style.borderTop = '1px solid #999999'; ele.style.borderLeft = '1px solid #999999'; ele.style.borderBottom = '1px solid #000000'; ele.style.borderRight = '1px solid #000000'; } } with (scroller = cbeGetElementById('idScroller').cbe) { background('#ffffff'); resizeTo(document.cbe.width() - slider.width() - sliderScrollerSep - 2 * appMargin, slider.height()); moveTo(slider.left() + slider.width() + sliderScrollerSep, slider.top()); show(); if (ele.style) { ele.style.border = '2px solid #0000ff'; } } with (content = cbeGetElementById('idContent').cbe) { color('#000000'); background('transparent'); resizeTo(scroller.width(), cbeGetElementById('idEndOfContent').cbe.offsetTop()); moveTo(2,0); show(); } slider.scrollTarget = content; } 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); } e.preventDefault(); } function winResizeListener() { pgPaint(); } //--></script> </head> <body scrolling='no'> <h1>CBE Slider Example 3</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='clsMarker'> </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> source of this page was pasted here </pre> <div id='idEndOfContent' class='clsMarker'> </div> <!-- End Of Content Marker --> </div> <!-- end idContent --> <!-- End Scrollable Content --> </div> <!-- end idScroller --> </body> </html>