http://stacieandtodd.com/indexNew.html
I wonder if anyone could advise on how to create a scrollbar like the one as shown in the centre page of the above site. Thank you for your input.
CSS Codes
Junior Coders
scrollbar
http://stacieandtodd.com/indexNew.html
I wonder if anyone could advise on how to create a scrollbar like the one as shown in the centre page of the above site. Thank you for your input.
Elite Coders
Junior Coders
Thanks for your kind input, Nile.
May I know how to have something different for the srollbar, like the one shown here ( http://stacieandtodd.com/indexNew.html ) which has a "W" shape.
Global Moderator
That page uses:Originally Posted by amyy
http://kelvinluck.com/assets/jquery/...crollPane.html
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Junior Coders
Wow. Great posts. I've been wondering about this forever.
Junior Coders
Do you know if you can change this to scroll horizontally?
I'm not a supercoder so it may be obvious...
Junior Coders
Nevermind. I messed with it a bit and got a horizontal bar that moves horizontally. What's really cool, is that finally I was able to replace an image (instead of background color ascribe an image) for the scrollbar!
Are there any big problems with this that a well experienced coder could forwarn of?
Junior Coders
OK. Little soliloquy going on here. I actually can't get it to drag horizontally.
Can anyone help. I made some changes to it, added a big table, and am trying to get the scroll to go horizontally along the bottom part of the table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Drag and react example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="example3_files/devstyle.css">
<script type="text/javascript" src="example3_files/dom-drag.js"></script>
<style type="text/css">
#thumb {
position:relative;
height:24px;
width:62px;
background-image: url(scroll.gif);
border:0px outset #eee;
}
</style></head>
<body>
<div style="border: 0px solid black; overflow: hidden; width: 200x; height: 200px; float: left; margin-right: 10px; background-color: white; position: relative;">
<div id="scrollcontent" style="position: absolute; left: 0pt; top: 0px;">
<table width="1000" height="765" bgcolor="#FF3300"><tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td></tr></table>
</div>
</div>
<div style="width: 300px; float: bottom;">
<div id="thumb" style="left: 0px; top: 765px;"></div>
</div>
<script language="javascript">
var aThumb = document.getElementById("thumb");
var scrolldiv=document.getElementById("scrollcontent");
Drag.init(aThumb, null, 0, 1000, 765, 0);
aThumb.onDrag = function(x, y) {
scrolldiv.style.top=y * (-1) +"px";
}
</script>
</body></html>
Thanks.
Posting Permissions
Reply With Quote
Bookmarks