stilist / pagering
watch download tarball
public
Forks0Right
Watchers1Right
Description: A simple JavaScript carousel for text.
Homepage: http://ratafia.info
Clone URL: git://github.com/stilist/pagering.git
name age
history
message
file LICENSE Thu Mar 26 09:56:15 -0700 2009 Initiate [stilist]
file README.mdown Wed Apr 08 14:17:41 -0700 2009 Update README to reflect code changes [stilist]
file page.js Wed Apr 08 13:28:12 -0700 2009 Fix indents to always use two spaces [stilist]
file pagering.html Wed Apr 08 13:16:30 -0700 2009 Take paging nav code out of HTML; faff with fil... [stilist]
file style.css Wed Apr 08 13:15:22 -0700 2009 Switch CSS to use ids instead of classes for pa... [stilist]
README.mdown

pagering

A simple JavaScript carousel for text.

How it works

The code requires two elements: one that directly holds text, and a wrapper around it. The element with text is given CSS3 columns, cut to a specified height, and the resultant overflowing text hidden. Because this conveniently goes out the right side, we can make ‘pages’ by simply changing the text element’s left margin, moving the extra columns in and out of sight.

How to use

Edit the stuff in #text, and/or edit the CSS properties for #text and #content.

Currently, this is fairly dependent on the example HTML and CSS.

Notes

  • I have tested this using WebKit and Minefield (the development versions of Safari and Firefox). It probably won’t work anywhere else.

  • It would be helpful to abstract the code so one can simply pass in the id of the element one desires to page.

  • It would also be helpful to make the current-page indicator into a hover-to-edit input box.