Example of changing the speed of a jScroller2 Object
This example show you an jScroller2 Object where you can simple switch the speed on request.
You need simple add the following javascript function to the webpage and then you can used the function:
jscroller2_change_speed([object:Object],[speed:Number]);
You can change the speed of several Object as well, all Objects are in the "ByRei_jScroller2.obj".
Please keep in mind to change the Refreshrate you need to use "ByRei_jScroller2.config.refreshtime".
Click for testing
Change to speed-1
Change to speed-5
Change to speed-10
Change to speed-20
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>
<script type="text/javascript" src="example.js"></script>
...
<p>
<b> Click for testing </b><br>
<a href="javascript:jscroller2_change_speed(document.getElementById('obj_alter'),'1');"> Change to speed-1 </a><br>
<a href="javascript:jscroller2_change_speed(document.getElementById('obj_alter'),'5');"> Change to speed-5 </a><br>
<a href="javascript:jscroller2_change_speed(document.getElementById('obj_alter'),'10');"> Change to speed-10 </a><br>
<a href="javascript:jscroller2_change_speed(document.getElementById('obj_alter'),'20');"> Change to speed-20 </a><br>
</p>
<div id="scroller_container">
<div id="obj_alter" class="jscroller2_down jscroller2_ignoreleave">
...
</div>
</div>
JavaScript Code - example.js
function jscroller2_change_speed(obj, speed) {
if (obj && speed) {
for (var i=0;i<ByRei_jScroller2.obj.length;i++) {
if (ByRei_jScroller2.obj[i][1].obj === obj) {
ByRei_jScroller2.obj[i][3].speed = Number(speed);
}
}
}
}
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;
}