Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Javascript marquee

Marquee class can be used to create horizontal or vertical marquee elements (scrolling texts/html elements) in websites. This class takes id of element and then wrap all child nodes of that element in div elements and create array of those elements to rotate through visible part. Even if there is only one child node, still it will be copied to create as many elements as needed to fill visible part of marquee, so it will never be empty.

Marquee div element can be customized using css styles. All child nodes will be wrapped in div elements, thus they are also cutomizable: (#maruqueid div {padding:0;} for example). Also marquee scrolling customizations available like rotating speed and separator, rotating direction etc.

Package contains marquee.js and marquee.packed.js (packed javascript), two example files: example.html(to see horizontal and vertical marquees in action) and confid_example.html (to see all possible configurations) and graphic file sep.png, to demonstrate usage of separator, which can be any text or html markup.

Contents

Download

Example codes

<html>
<head>
<style>
body
{
    text-align: center;
}
#container
{
    width:1000px; 
    margin: 0 auto 0 auto; 
    height:500px; 
    border: 3px solid black;
}
#marquee
{
    width: 600px;
    height: 60px;
    border: 1px solid black;
    margin: 0 auto 0 auto;
}
#marquee div
{
    border: 1px solid red;
    padding: 20px;
    height: 60px;
}
.wop
{
    padding: 0;
    margin: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="marquee">
    <p class="wop"><a href="">Some text</a></p>
    <p class="wop"><a href="">More text</a></p>
    <p class="wop"><a href="">more more more</a></p>
    <p class="wop">end even more</p>
</div>
somecontent
<p>somecontent here</p>
<div> and here </div>
</div>
<script type="text/javascript" src="./marquee.packed.js" ></script>
<script type="text/javascript">
//create instance and call method horizontal for horizontal scrolling
var horizontal = new marquee("marquee").horizontal(
    {
        step:1, //how many pixels to move per interval (default: 1)
        interval: 15, //how often to move pixels in miliseconds (default: 10)
        stop_on_hover: false, //should marquee stop on mouse hover (default: true)
        backwards: true, //rotate elements in opposite direction
        separator: "<img src="./sep.png" height="9px" width="9px" border="0"/>" 
        //separator to insert between html nodes (default: "")
    });
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew marquee(id)
DescriptionCreates class instance with id of an element to be used as marquee
Input parameters

string id - id of html div element

Example inputvar scroller = new marquee("marquee_id");

Create vertical marquee

Back to method list

Method namevertical(config);
DescriptionCreate vertical marquee scroller using provided configuration
Input parameters

json config - Json structure with configuration properties

  • int step - how many pixels to move per interval (default: 1)
  • int interval - //how often to move pixels in miliseconds (default: 10)
  • bool stop_on_hover - //should marquee stop on mouse hover (default: true)
  • bool backwards - //rotate elements in opposite direction (default: false)
  • string separator - //separator to insert between html nodes (default: "")
Example inputvertical({step:1, interval: 15, stop_on_hover: false, backwards: true, separator: ""});

Create horizontal marquee

Back to method list

Method namehorizontal(config);
DescriptionCreate horizontal marquee scroller using provided configuration
Input parameters

json config - Json structure with configuration properties

  • int step - how many pixels to move per interval (default: 1)
  • int interval - //how often to move pixels in miliseconds (default: 10)
  • bool stop_on_hover - //should marquee stop on mouse hover (default: true)
  • bool backwards - //rotate elements in opposite direction (default: false)
  • string separator - //separator to insert between html nodes (default: "")
Example inputhorizontal({step:1, interval: 15, stop_on_hover: false, backwards: true, separator: ""});

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Scripts.com
RATE ME!

Try it out and Rate on JSclasses.org

Support

JS classes support forum or comments below


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus