Example of alter a jScroller2 Object
This example show you an jScroller2 Object where the Direction is changed over 2 simple JavaScripts.
You need simple add a id to the jscroller2 Div and then you can used:
ByRei_jScroller2.add([object],["left"|"right"|"top"|"down"]);
Please keep in mind that this example shows all directions, but it is not very clever to change the direction from top to left or something like that.
When you need such a change, please first remove the jScroller2 Object and than add it again.
Click for testing
Change to up
Change to down
Change to left
Change to right
This is a Test, in this Test you can see that the Scroller can Scroll Images , Link and other things.
You can also used DIVs in the Scroller without problems:
Test W3C Validation:
HTML Code
<rel="stylesheet" type="text/css" href="jscroller2-1.0.css">
<script type="text/javascript" src="jscroller2-1.61.js"></script>
...
<p>
<b> Click for testing </b><br>
<a href="javascript:ByRei_jScroller2.add(document.getElementById('obj_alter'),'up');"> Change to up </a><br>
<a href="javascript:ByRei_jScroller2.add(document.getElementById('obj_alter'),'down');"> Change to down </a><br>
<a href="javascript:ByRei_jScroller2.add(document.getElementById('obj_alter'),'left');"> Change to left </a><br>
<a href="javascript:ByRei_jScroller2.add(document.getElementById('obj_alter'),'right');"> Change to right </a><br>
</p>
<div id="scroller_container">
<div id="obj_alter" class="jscroller2_down jscroller2_ignoreleave">
...
</div>
</div>
CSS Code
/* Scroller Box */
#scroller_container {
border: 1px dotted #ddd;
width: 120px;
height: 200px;
overflow: hidden;
}
/* Scoller Box */
/* Example Divs */
.box1, .box2, .box3 {
width: 25px;
height: 25px;
display: block;
padding: 0;
margin: 0;
}
.box1{background: #f00;}
.box2{background: #0f0;}
.box3{background: #00f;}
/* CSS Hack Safari */
#dummy {;# }
#scroller_container {
overflow: auto;
}