FF1+ IE5+ Opr7+

Scrollable content script v2.0

Author: Dynamic Drive

Note: Script rewritten April 21st, 15' for various improvements

Description: Display overflowing content in a confined area and let users view the entire content via custom up and down scroll buttons. Supports either vertical or horizontal orientation. On mobile devices, users instead touch and scroll inside the content to navigate.

Demo:

The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...

The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...

The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...

The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...

The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...

The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...

The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...

The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...


Directions: Developer's View

Step 1: Add the following code into the <HEAD> section of your page:

Select All

The code above references three external files plus 4 optional images, which you need to download below (right click/ select "Save As"):

  1. scrollable.css
  2. scrollable.js
  3. impetus.js (DD customized version. Project homepage).

Step 2: Insert the below sample code into the BODY section of your page:

Select All

That's it for installation! Continue reading for details on customizing the script.

More Details

To initialize a scrollable, call new scrollable() in the head section of your page, for example:

<script type="text/javascript">

var scrollv

jQuery(function(e){ // on DOM load

 scrollv = new scrollable({
 wrapperid: "scrollable-v"
})

</script>

where "scrollv" should be an arbitrary but unique variable referencing this instance of scrollable, with the setting wrapperid pointing to the ID of  your scrollable DIV outermost container. The scrollable() function supports the following options and methods:

Option Description
wrapperid: 'string'

Required

The ID of the target scrollable element's outermost container.
orient: 'vertical | horizontal'

defaults to "vertical"

The direction to scroll the content- set to either "vertical" (default setting) or "horizontal" for horizontal scrolling content.
moveby: int

defaults to 5

The number of pixels to scroll the content on each iteration, for example:

var scrollv

jQuery(function(e){ // on DOM load

 scrollv = new scrollable({
  wrapperid: "scrollable-v",
  moveby: 10

})

mousedrag: Boolean

defaults to false

If set to true, enables mouse dragging inside the content area  on desktop computers to scroll the content, similar to on mobile devices using touch. One major caveat of enabling this feature is that it disables text selection inside the content area for desktop users; unless your content consists of images or content you strongly believe users will not be attempting to select, leave this option disabled.
   
Method Description
instance.scrollContent(dir) Scrollable instance method that scrolls the content up/down or right/left depending on the orientation of the scrollable. dir should be either the string "up" or "down", or "left" or "right", respectively. Once called the content will be scrolled in that direction continuously until the companion method stopScroll() is called. Here's an example:

<script type="text/javascript">

var scrollv

jQuery(function(e){ // on DOM load

 scrollv = new scrollable({
 wrapperid: "scrollable-v"
})

</script>

<a href="#" onMouseover="scrollv.scrollContent('up')">Scroll Up</a>

<a href="#" onMouseover="scrollv.scrollContent('down')">Scroll Down</a>

instance.stopScroll() Scrollable instance method that stops the scrolling of a content initiated by the companion method scrollContent(). The following builds on the example above to stop the scrolling of a scrollable when the mouse moves out of the navigation links:

<a href="#" onMouseover="scrollv.scrollContent('up')"
onMouseout="scrollv.stopScroll()">Scroll Up</a>

<a href="#" onMouseover="scrollv.scrollContent('down')"
onMouseout="scrollv.stopScroll()">Scroll Down</a>

 

Scrollable Markup and CSS

The markup of each scrollable should at a minimum consists of two DIVS- an outer and inner DIV- each with a particular CSS class injected:

<div id="scrollable-v" class="scrollable">
<div class="belt">

Your content here

<!--END INSERTION -->

</div>
</div>

For a horizontal Scrollable, the inner ".belt" DIV should also carry a CSS class of "horizontal", ie: (class="belt horizontal").  Your content goes inside this inner DIV.

The style of the Scrollable is defined inside scrollable.css. Refer to the comments to see the commonalities and differences in the CSS between a vertical and horizontal Scrollable. For the demos at the top, we make use of CSS3 columns to implement the newspaper columns format for the content found inside the horizontal Scrollable:

<style>
article.columns{ /* demo CSS to create columns of content inside horizontal scrollable */
width: 800px;
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}
</style>

<div id="scrollable-h" class="scrollable">
<div class="belt horizontal">

<!--INSERT CONTENT HERE INSIDE BELT DIV-->

<article class="columns">
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
</p>

</article>

<!--END INSERTION -->

</div>
</div>