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:
Directions: 
Step 1: Add the
following code into the <HEAD>
section of your page:
The code above references three external files plus 4
optional images, which you
need to download below (right click/ select "Save As"):
- scrollable.css
- scrollable.js
- impetus.js (DD customized version.
Project
homepage).
-
Step 2: Insert the below sample code into the BODY
section of your page:
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>
