SwScrollControl
download
INTRODUCTION
Lightweight Mootools implementation allowing to add scroll buttons to any div. A little work could make it work horizontally as well...
FEEDBACK: Comment on post or sign up and go to the forum section: click here
EXAMPLE
STEP BY STEP
1- create an element (div) with a fixed height and width and overflow hidden (see CSS). Give this div a specific id,ex:
<div id='scrollBox'>..</div>
2- Put content in the div that is too big for its size
3- copy, paste and adapt the following css:
#scrollBox { background-color: #D8D8D0; width: 350px; height: 200px; border: 1px solid black; position: relative; overflow: hidden; }
.swScrollUp { background: url(images/upBtn.gif) no-repeat 0 0; }
.swScrollUp:hover { background: url(images/upBtn.gif) no-repeat 0 -17px; }
.swScrollUp-Active, .swScrollUp-Active:hover { background: url(images/upBtn.gif) no-repeat 0 -34px; }
.swScrollDown { background: url(images/downBtn.gif) no-repeat 0 -34px; }
.swScrollDown:hover { background: url(images/downBtn.gif) no-repeat 0 -17px; }
.swScrollDown-Active, .swScrollDown-Active:hover { background: url(images/downBtn.gif) no-repeat 0 0; }
4- copy and include the .js files (preferably right before </body>)
<script src="lib/mootools/mootools-1.2.4-core-jm.js" type="text/javascript"></script>
<script src="lib/mootools/mootools-1.2.4.4-more-fx-scroll.js" type="text/javascript"></script>
<script src="js/swScrollControl.js" type="text/javascript"></script>
-> mootools more fx scroll is needed to have a smooth scrolling effect
5- include this after the lines included in step 4
<script language="JavaScript">
window.addEvent('domready', function(){
var scrollControl = new SwScrollControl("scrollBox");
});
</script>
6- (optional)
replace the 3 line of the script in step 5 by:
var scrollControl = new SwScrollControl({<OPTION>:<VALUE>, <OPTION>:<VALUE>...}});
where <OPTION> can be:
speed: scrolling speed - default value: 400
scrollStep: number of pixel scrolled every time the user click on a scrolling button - default value: 80
buttonSize: size of the scrolling buttons in pixel - default value: 17
scrollUpButtonClass: css class describing how the 'up' scroll button should look like - default value: 'swScrollUp'
scrollDownButtonClass: css class describing how the 'down' scroll button should look like - default value: 'swScrollDown'
marginRight: number of pixels to be put on the right of the scroll buttons - default value: 0
marginBottom: number of pixels to be put on the left of the scroll buttons - default value: 0
