Example Multi

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:

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);
  $jScroller.add("#box2_container","#box2_content","up",1);
  $jScroller.add("#box3_container","#box3_content","right",1);
  $jScroller.add("#box4_container","#box4_content","left",1);

  // 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_up_down, .scroller_container_left_right {
 border: 1px dotted #ddd;
 position: relative;
 overflow: hidden;
}

.scroller_container_up_down {
 width: 120px;
 height: 200px;
}

.scroller_container_left_right {
 width: 300px;
 height: 60px;
}

.scroller_left_right {
 white-space: nowrap;
 line-height: 60px;
 font-size: 60px;
}

.scroller_up_down  p, .scroller_left_right p {
 padding: 0;
}
/* 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_up_down {
 overflow: auto;
}

/* Scoller Box */

jScroller

a Autoscroller for jQuery by Markus Bordihn

Example Multi

HTML Code

CSS Code