OverviewMarquee allows the developer to display a series of messages on a web page inside of a specified container. It supports any number of messages and can be configured with multiple options. It also supports several events. UsageInclude the Marquee.js on your page after prototype.js and scriptaculous.js. I use the ProtoPacked which is included in the download. <script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="Marquee.js" type="text/javascript" charset="utf-8"></script> ExamplesExamples can be found here. Marquee Examples Methods| Method | Parameter | Description | | load | data | Load a list of messages and their options to be displayed in a container. Clears existing messages from the display queue. The data parameter is a message object or an array of message objects used to load the new list of messages. | | append | data | Add a new message and its options to the display queue. The data parameter is a message object or an array of message objects used to load the new list of messages. | | start | index | Start the marquee displaying messages. Optional index parameter allows specific message to be displayed when starting the display queue. | | stop | | Stop the marquee from displaying messages. | | clear | | Clear the marquee display. Messages remain in the display queue. | | empty | | Clears the marquee display and removes all messages from the display queue. | | next | | Displays the next message in the display queue. If the last message is being displayed then the first message is displayed. | | previous | | Displays the previous message in the display queue. If the first message is being displayed then the last message is displayed. |
Options| Marquee Options | Default | Description | | life | 5 | 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 | 0.5 | The length of time, in seconds, to wait between displaying messages. Default is 0.5 seconds. | | animIn | Marquee.fadeIn | The css properties to use for animation when showing a message. | | animOut | Marquee.fadeOut | The css properties to use for animation when hiding a message. | | Message Options | Default | Description | | life | 5 | 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| Event | Parameters | Description | | 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 | Event e | The event that's fired before the Marquee instance starts displaying the next message. The parameter passed into the event handler is an event object that has a memo value equal to the message object that is about to be shown. | | after | Event e | The event that's fired after the Marquee instance has shown the next message. The parameter passed into the event handler is an event object that has a memo value equal to the message object that was just hidden. |
The before and after events are particularly useful when you need to reset the animation properties of messages. Transitions| Name | Description | | Marquee.fade(In|Out) | Fades the messages in and out. | | Marquee.slide(In|Out) | Slides the messages in and out to the left. | | Marquee.blind(In|Out) | Slides the messages in and out at the top. | | custom | Custom transitions can be easily created using css properties |
CompatibilityGrowler has been tested with Safari 3, Firefox 3, and Opera. RequirementsGrowler requires Prototype 1.6 and Scriptaculous effects
|
Sign in to add a comment
Pitty, The examples of the page http://examples.kevinandre.com/marquee1.0.0/index.html are not working on IE7
sweeet let me finish my proyect and I'll show you how I use your code... pretty neat :)