Marquee jQuery Plug-in

Overview

The jQuery Marquee plug-in converts a list element (<ul /> or <ol />) into an ESPN-style scrolling marquee. Messages are scrolled in from top or bottom (based on the yScroll option) and longer messages will then ticker to the left in order to show the full message.

Requirements

In order to use the Marquee plug-in, you need the following:

jQuery v1.2.6 (or higher)*
jquery.marquee.js Plug-in

* This plug-in may work with older versions of jQuery in the 1.2 family. If you try using this with an older version of jQuery, you will need to include the jquery.dimensions.js plug-in (as of jQuery v1.2.6 the jquery.dimensions.js plug-in is included in the jQuery core.)

Usage

To convert your <ul /> (or <ol /> elements into marquee elements, just invoke the jQuery plug-in using the following syntax:

$("ul").marquee([options]);

Arguments

options: This argument is optional and allows you to customize the settings used for each instance of the plug-in. For a list of all available options, see the Options section.

Now that we have a reference to the widget, we can invoke any of the public API calls.

Public API

$("#id").marquee("update"): This updates the marquee's cache—which is required after dynamically updating the <ul /> elements content in order to show the new elements.
$("#id").marquee("pause"): Pauses the current marquee to prevent it from scrolling.
$("#id").marquee("resume"): Resumes the marquee so it begins scrolling again.
$("#id").marquee("object"): Returns a reference to the internal $.Marquee object. This is for advanced usage only. Examine the source code for uses of the $.Marquee object.

Options

There are a number of options available for customizing the look and feel of the Marquee widget.

{
      yScroll: "top"              // the position of the marquee initially scroll (can
                                  // be either "top" or "bottom")
    , showSpeed: 850              // the speed of to animate the initial dropdown of
                                  // the messages
    , scrollSpeed: 12             // the speed of the scrolling (keep number low)
    , pauseSpeed: 5000            // the time to wait before showing the next message
                                  // or scrolling current message
    , pauseOnHover: true          // determine if we should pause on mouse hover
    , loop: -1                    // determine how many times to loop through the
                                  // marquees (#'s < 0 = infinite)
    , fxEasingShow: "swing"       // the animition easing to use when showing a new
                                  // marquee
    , fxEasingScroll: "linear"    // the animition easing to use when showing a new
                                  // marquee

    // define the class statements
    , cssShowing: "marquee-showing"

    // event handlers
    , init: null                // callback that occurs when a marquee is initialized
    , beforeshow: null          // callback that occurs before message starts
                                // scrolling on screen
    , show: null                // callback that occurs when a new marquee message is
                                // displayed
    , aftershow: null           // callback that occurs after the message has scrolled
}

Getting Started

The first thing we need to do is to load the required JavaScript libraries and the CSS stylesheet used by the widget:

<!---// load jQuery and the jQuery Marquee Plug-in //--->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.marquee.js"></script>

<!---// load the Marquee CSS stylesheet //--->
<link type="text/css" href="./css/jquery.marquee.css" rel="stylesheet" media="all" />

Before you can invoke an instance of the Marquee widget, you must have one or more list elements on your page.

<ul id="marquee" class="marquee">
  <li>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a nulla. 
    Lorem ipsum dolor sit amet, consectetuer.</li>
  <li>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
    inceptos hymenaeos. Fusce tincidunt adipiscing,massa. Class aptent taciti 
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
    Fusce tincidunt adipiscing,massa.
  </li>
  <li>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
    inceptos hymenaeos. Fusce tincidunt adipiscing,massa.
  </li>
  <li>
    Mauris ullamcorper euismod leo. Nulla congue tellus vitae ante at pede eu 
    ligula lacinia. Integer sed sapien, rutrum nec.
  </li>
  <li>
    Aliquam erat volutpat. Fusce dolor. Vestibulum ornare congue turpis 
    sollicitudin nunc elit. Nullam erat neque, facilisis quis.
  </li>
  <li>
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
    ridiculus mus. Nam non eros sed facilisis, bibendum eu.
  </li>
</ul>

The next step is to actually create an instance of the Marquee widget. You want to make sure to initialize the widget after all the necessary DOM elements are available, which makes the document.ready event a great place to initialize the widget.

<script type="text/javascript">
$(document).ready(function (){
  $("#marquee").marquee();
});
</script>

Now let us take a look at what the code above produced.

Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a nulla. Lorem ipsum dolor sit amet, consectetuer.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa.
Mauris ullamcorper euismod leo. Nulla congue tellus vitae ante at pede eu ligula lacinia. Integer sed sapien, rutrum nec.
Aliquam erat volutpat. Fusce dolor. Vestibulum ornare congue turpis sollicitudin nunc elit. Nullam erat neque, facilisis quis.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam non eros sed facilisis, bibendum eu.

You can mouse over the message to prevent the message from scrolling—which is nice if your messages have embedded links.

For more examples, see the Giva Labs - Marquee Example Page page.

License

Copyright 2009 Giva (https://www.givainc.com/labs/) 

Licensed under the Apache License, Version 2.0 (the "License"); 
you may not use this file except in compliance with the License. 
You may obtain a copy of the License at 
    https://www.apache.org/licenses/LICENSE-2.0 

Unless required by applicable law or agreed to in writing, software 
distributed under the License is distributed on an "AS IS" BASIS, 
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
See the License for the specific language governing permissions and 
limitations under the License.

Revisions

v1.0.01 (2009-05-20)

Initial release

Download

The following download includes both uncompressed and minified versions of the plug-in and all the CSS and image files required to get you started. See the gettingstarted.htm file for usage instructions and a working example.

jquery.marquee.zip (12 KB)