Xhtml lang="en"> Marquee - Dojo Bootstrap

Usage

Via data attributes

To easily add marquee behavior to any element, just add data-spy="marquee" to the element you want to use as a marquee. You can use data-option to specify options for the marquee.

<div data-spy="marquee" data-life="2">...</div>

Heads up! Elements that are immediately positioned under the marquee element will be used to create the marquee messages. During creation, the marquee element is emptied and the messages are created using data attribute options of those elements.

Via JavaScript

Call the marquee plugin via JavaScript:

query().marquee({
    anim: "scroll", duration: 1, life: 2.5,
    messages: [...]
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-duration="2".

Marquee Options

option type default description
autostart boolean true Automatically start the Marquee after loading. Mostly useful when initially creating the Marquee. This can be overwritten by passing the boolean value directly to the load method.
blend boolean false Animation of the messages are simultaneous. Otherwise, the next message is animated in at the end of the current message's animation out.
Marquee also accepts all options available for Messages. These options will be applied to every Message created unless overwritten by passing the option to the Message directly.

Message Options

option type default description
anim string fade The animation to use when transitioning the message in and out. See below for creating custom animations.
className string The CSS class to apply to the message.
duration number 1 The number of seconds the animation should last. This can be a float or integer.
life number 2 The length of time a message should remain visible.
link string The URL link associated with the message. Links created using this method will open in the current page.

Methods

.marquee(method, args)

method args description
add string | object Add a new message and its options to the display queue.
clear Clear the marquee display. Messages remain in the display queue.
empty Clears the marquee display and removes all messages from the display queue.
load array, boolean Load a list of messages and their options to be displayed in a container. Clears existing messages from the display queue. The optional boolean argument allows the Marquee to automatically start.
remove number Removes a message from the display queue using a passed index. If you are attempting to remove the current message, the marquee displays the next message first, then deletes the current.
start number Start the marquee displaying messages. Optional index allows specific message to be displayed when starting the display queue.
stop boolean Stop the marquee from displaying messages. The optional boolean argument quiet tells Marquee whether to suppress the stop event. True suppresses the stop event.
first Displays the first message in the display queue.
last Displays the last message in 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.
first, last, next, previous will not work while the messages are transitioning from one to another.

Events

Events are applied to the Marquee element, not on individual messages.

event description
loaded triggered when finished loading messages.
changed triggered when finished transitioning from one message to another.
after triggered after transitioning a message out.
before triggered before transitioning a message in.

Animations

Marquee has three predefined animations.

animation description
fade Fades the message in and out.
scroll Scrolls the message from bottom to top.
slide Slides the message from right to left.

Examples

via Markup

Browse the web with the power of Google!
Searching just got faster...
...easier...
...and safer.

via Javascript

using Methods


Javascript Frameworks

using Events

Bridge

Nighttime display of the Memphis/Arkansas Bridge.