Stop and Start the Scroller on MouseOver / MouseOut
This is a Test, in this Test you can see that the Scroller can Scroll Images , Link and other things.
This is a Test, in this Test you can see that the Scroller can Scroll Images , Link and other things.
This is a Test, in this Test you can see that the Scroller can Scroll Images , Link and other things.
This is a Test, in this Test you can see that the Scroller can Scroll Images , Link and other things.
Test W3C Validation:
HTML Code
<script type="text/javascript" src="jquery-1.x.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Add Scroller Object
$jScroller.add("#box1_container","#box1_content","down",1,true);
$jScroller.add("#box2_container","#box2_content","up",1,true);
$jScroller.add("#box3_container","#box3_content","right",1,true);
$jScroller.add("#box4_container","#box4_content","left",1,true);
// Start Autoscroller
$jScroller.start();
});
</script>
<div id="box1_container" class="scroller_container_up_down">
<div id="box1_content" class="scroller_up_down">
...[Content]...
</div>
</div>
<div id="box2_container" class="scroller_container_up_down">
<div id="box2_content" class="scroller_up_down">
...[Content]...
</div>
</div>
<div id="box3_container" class="scroller_container_left_right>
<div id="box3_content" class="scroller_left_right">
...[Content]...
</div>
</div>
<div id="box4_container" class="scroller_container_left_right>
<div id="box4_content" class="scroller_left_right">
...[Content]...
</div>
</div>
CSS Code
/* Scroller Box */
.scroller_container_left_right {
border: 1px dotted #ddd;
position: relative;
overflow: hidden;
width: 300px;
height: 60px;
}
.scroller_left_right {
white-space: nowrap;
line-height: 60px;
font-size: 60px;
}
.scroller_left_right p {
padding: 0;
}
/* Scoller Box */
/* CSS Hack Safari */
#dummy {;# }
.scroller_container_left_right {
overflow: auto;
}
/* Scoller Box */