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.
In order to use the Marquee plug-in, you need the following:
* 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.)
To convert your <ul /> (or <ol /> elements into marquee elements, just invoke the jQuery plug-in using the following syntax:
$("ul").marquee([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.
This updates the marquee's cache—which is required after dynamically updating the <ul /> elements content in order to show the new elements.
Pauses the current marquee to prevent it from scrolling.
Resumes the marquee so it begins scrolling again.
Returns a reference to the internal $.Marquee object. This is for advanced usage only. Examine the source code for uses of the $.Marquee object.
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
}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="http://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.
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.
Copyright 2009 Giva, Inc. (http://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 http://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.