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>