Marquee

The Marquee component shows moving HTML element.
It makes <div> element (has some child nodes such as text and img) move horizontally like legacy <marquee> tag.


Note
This component is supported since 2.3.

Table of Contents

  1. How to Create Marquee
  2. Options
  3. Events
  4. Methods
    1. start
    2. stop
    3. reset

How to Create Marquee

If you want to create Marquee component, you have to declare "ui-marquee" in <div> element and make Marquee component in JS code.
To use a Marquee component in your application, please refer following code and marquee options:

HTML code:

<div class="ui-page ui-page-active" id="marqueePage" >
   <header class="ui-header">
      <h2 class="ui-title">Marquee</h2>
   </header>
   <div class="ui-content">
      <ul class="ui-listview">
         <li><div class="ui-marquee" id="marquee">Marquee code sample</div></li>
      </ul>
   </div>
</div>

JS code:

var page = document.querySelector("#marqueePage");

page.addEventListener("pagebeforeshow", function()
{
   var marqueeEl = document.getElementById("marquee"),
   marqueeWidget = new tau.widget.Marquee(marqueeEl, {marqueeStyle: "scroll", delay: "3"});
});

Options

Summary

Option Input type Default value Description
marqueeStyle "slide" | "scroll" | "alternate" | "endToEnd" "slide" Sets the default style for the marquee
ellipsisEffect "gradient" | "ellipsis" | "none" "gradient" Sets the end-effect(gradient) of marquee
delay number 2000 Sets the delay(ms) for marquee
iteration number | "infinite" 1 Sets the iteration count number for marquee
speed number 60 Sets the speed(px/sec) for the marquee
timingFunction "linear" | "ease" | "ease-in" | "ease-out" | "cubic-bezier(n,n,n,n)" "linear" Sets the timing function for marquee
autoRun boolean true Sets the status of autoRun

Events

Name Description
marqueestart

Triggered when marquee animation started.
marqueeend

Triggered when marquee animation ended.
marqueestopped

Triggered when marquee animation stopped.

Methods

Summary

Method Description 
start()

Start Marquee animation

 
stop()

Stop Marquee animation

 
reset()

Reset Marquee animation
start

Start Marquee animation

start()

Return value:

No Return Value

Code example:

HTML code:

<div class="ui-marquee" id="marquee">
   <p>MarqueeTEST TEST message TEST for marquee</p>
</div>

JS code:

var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
marqueeWidget.start();
stop

Stop Marquee animation

stop()

Return value:

No Return Value

Code example:

HTML code

<div class="ui-marquee" id="marquee">
   <p>MarqueeTEST TEST message TEST for marquee</p>
</div>

JS code:

var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
marqueeWidget.stop();
reset

Reset Marquee animation (reset and end)

reset()

Return value:

No Return Value

Code example:

HTML code:

<div class="ui-marquee" id="marquee">
   <p>MarqueeTEST TEST message TEST for marquee</p>
</div>

JS code:

var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
marqueeWidget.reset();