Marquee - Dojo Bootstrap

Marquee Module

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.