standupweb mootools homebrews

tested on IE Tester (IE7, IE8), Opera 10.51, Firefox 3.6.2, Safari for Windows 4.0.4

SwTicker

download

INTRODUCTION

Lightweight Mootools implementation of a vertical ticker. Would be easy to make it an horizontal ticker.

FEEDBACK: Comment on post or sign up and go to the forum section: click here

EXAMPLE

my
first
news
here

my
second
news
here

my
third
news
here

my forth news here

STEP BY STEP

1- create an element (div) with a fixed height and width and overflow hidden (see CSS). Give this div a specific id,ex:

<div id='tickerBox'>..</div>

2- Put content in the div that is too big for its size

3- copy, paste and adapt the following css:

#tickerBox { background-color: #D8D8D0; width: 350px; height: 200px; border: 1px solid black; position: relative; overflow: hidden; }

4- copy and include the .js files (preferably right before </body>)

<script src="lib/mootools/mootools-1.2.4-core-jm.js" type="text/javascript"></script>
<script src="lib/mootools/mootools-1.2.4.4-more-fx-scroll.js" type="text/javascript"></script>
<script src="js/swTicker.js" type="text/javascript"></script>
-> mootools more fx scroll is needed to have a smooth scrolling effect

5- include this after the lines included in step 4

<script language="JavaScript"> window.addEvent('domready', function(){
var vert = new SwTicker('tickerBox');
});
</script>

6- (optional)

replace the 3 line of the script in step 5 by:
var scrollControl = new SwScrollControl({<OPTION>:<VALUE>, <OPTION>:<VALUE>...}});
where <OPTION> can be:

speed: scrolling duration (in ms), default value: 1500

delay: waiting time between 2 scrolls (in ms), default value: 5000