Overview
Marquee displays a list of unobtrusive messages on a page. (website)
Methods
load
load(data)
Load a list of messages and their options to be displayed in a container. Clears existing messages from the display queue.
append
append(data)
Add a new message and its options to the display queue.
start
start([index])
Start the marquee displaying messages. Optional index allows specific message to be displayed when starting the display queue.
stop
stop()
Stop the marquee from displaying messages.
clear
clear()
Clear the marquee display. Messages remain in the display queue.
empty
empty()
Clears the marquee display and removes all messages from the display queue.
next
next()
Displays the next message in the display queue. If the last message is being displayed then the first message is displayed.
previous
previous()
Displays the previous message in the display queue. If the first message is being displayed then the last message is displayed.
Marquee Options
life
The length of time in seconds to display each message. Default is 5 seconds.
className
The className to apply to each message added to the marquee instance.
delay
The length of time, in seconds, to wait between displaying messages. Default is .5 seconds.
animIn
The css properties to use for animation when showing a message.
animOut
The css properties to use for animation when hiding a message.
Message Options
life
The length of time in seconds to display this message. Default is inherited from the Marquee instance.
className
The className to apply to this message. If the instance has a className defined then it is used. Otherwise, no className is applied.
link
The link to apply to the message.
Events
start
The event that's fired when the Marquee instance starts displaying messages.
stop
The event that's fired when the Marquee instance stops displaying messages.
change
The event that's fired when the Marquee instance changes messages. It is fired when a displayed message is hidden and the next message is completely visible.
before
The event that's fired before the Marquee instance starts displaying the next message.
after
The event that's fired after the Marquee instance has shown the next message.
The before and after events are particularly useful when you need to reset the animation properties of messages
Transitions
fade
Fades the messages in and out.
slide
Slides the messages in and out to the left.
blind
Slides the messages in and out at the top.
Transitions can be easily created using css properties
Usage
Include the Marquee.js on your page after prototype.js and scriptaculous effects.
- <script src="protoculous-effects.js" type="text/javascript" charset="utf-8"></script>
- <script src="Marquee.js" type="text/javascript" charset="utf-8"></script>
Create an instance of the Marquee class and call the public methods.
- var marque = new Marquee(options);
options
Compatibility
Marquee has been tested with Safari 3(Mac|Win), Firefox 3(Mac|Win), and Opera.
Requirements
Marquee requires Prototype 1.6