ivScrollable is an easy to use content scroller based on the jquery framework
it works with ajax applications, you can initialise it as often as needed by calling this:

window.setTimeout("objIvScrollable.ivMakeScrollable();", 200);

(it is recommend to use the timeout to prevent timing problems with internet explorer)

author: Ingo Volkmann www.godiv.de

licence: GNU GPLv3 or any later version

 

example

before


Lorem ipsum nam ridens animal nominati eu, eu mel dolorem ceteros invidunt. Nulla mentitum oportere te ius, ex nihil dolor democritum mea, alii option inermis mel an. Vis detraxit interesset inciderint ei, has assum rationibus quaerendum ex, an qui dolores platonem postulant. Mucius percipit volutpat ex sed, eum cu partiendo expetenda scribentur. An populo iriure percipitur mel, ei probatus suavitate adversarium vix.

Mel solet tollit suscipiantur ea, eu voluptatum consectetuer definitiones eam, aperiam appetere phaedrum no mel. Commune instructior ius ne, impetus adolescens ullamcorper in sit, ferri ullum ocurreret an his. Sit vituperatoribus latine utroque et, et nam laudem albucius qualisque. Pri ut dico vocent recteque, ne eum viderer malorum diceret. Vidit dicit repudiandae nam eu, eam ad eirmod intellegebat.

after adding the class ivScrollable
- the scrolling height is set to 15px (no lines are partially invisible)
- all distances are controlled by the script

Lorem ipsum nam ridens animal nominati eu, eu mel dolorem ceteros invidunt. Nulla mentitum oportere te ius, ex nihil dolor democritum mea, alii option inermis mel an. Vis detraxit interesset inciderint ei, has assum rationibus quaerendum ex, an qui dolores platonem postulant. Mucius percipit volutpat ex sed, eum cu partiendo expetenda scribentur. An populo iriure percipitur mel, ei probatus suavitate adversarium vix.

Mel solet tollit suscipiantur ea, eu voluptatum consectetuer definitiones eam, aperiam appetere phaedrum no mel. Commune instructior ius ne, impetus adolescens ullamcorper in sit, ferri ullum ocurreret an his. Sit vituperatoribus latine utroque et, et nam laudem albucius qualisque. Pri ut dico vocent recteque, ne eum viderer malorum diceret. Vidit dicit repudiandae nam eu, eam ad eirmod intellegebat.

 

all you need to do is:

set the variables at the top of the function according to your needs

include these files in the head section of your website after the jquery include

<script type="text/javascript" language="javascript" src="scripts/iv_scrollable.js"></script>
<link rel="stylesheet" type="text/css" href="styles/iv_scrollable.css" />

the element which contains the content you'll scroll needs the class="ivScrollable" and a fix height