EverWeb Codebox

Scrolling Text

Marquee or Not?

If you ask anybody who thinks they know anything about web design how to create scrolling text they inevitably suggest using a marquee.

The marquee tag is not accepted by the WC3 and has poor browser support. It is not supported in HTML5 so forget all about it and use marquees for outdoor social events during the rainy season!

jQuery.Marquee.JS

The jQuery marquee plugin will convert any list item into a scroller which drops text from above or raises it from below and scrolls to the left in the usual fashion. It can be set to scroll to the right for those who live in the Middle East.

The HTML is an ordered or unordered list with at least one list item. If there are two or more, the list items can drop down from the top or rise up from the bottom.

The scroller will stop on mouseover so that any hyperlinks can be clicked.

The drop down/rise up speed, delayed start speed and scrolling speed are all adjustable in the setup javascript.

HTML

<ul class="marquee">

     <li>This is the first list item with text and a hyperlink <a href="...URL to the /page.html" target="_blank">HYPERLINK TEXT</a> to open in a new window</li>


     <li>This is list item number 2</li>


     <li>List item 3</li>


     <!-- add more list items as necessary -->

</ul>

The item marked in green is the actual text seen by the visitor.

Any hyperlinks are set in the usual way as shown on THIS page.

If only one list item is required delete the other two in the code above and set the showSpeed to zero in the setup javascript shown below.

  • Make your EverWeb life really easy by using lots of Widgets from the EverWeb Codebox website...
  • Get widgets to help you create audio and video players, insert HTML headings, smooth scroll to the top and there's more...
  • Easily insert iFrames and use smooth scrolling anchors to help your website visitors glide up and down the pages...
  • Insert images using the HTML <img> tag and dress them up with frames, borders and rounded corners.

Javavscript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/jquery.marquee.min.js"></script>

<script type="text/javascript">

$(function(){

    $('.marquee').marquee({

    showSpeed:1000, //speed of drop down animation

    scrollSpeed: 10, //lower is faster

    yScroll: 'bottom',  // scroll direction on y-axis 'top' for down or 'bottom' for up

    direction: 'left', //scroll direction 'left' or 'right'

    pauseSpeed: 1000, // pause before scroll start in milliseconds

    duplicated: true  //continuous true or false

    });

});

</script>

Download the files HERE and drag the jquery.marquee.min.js file into the Assets column of EverWeb.

Control click it to "Copy Relative File Path" and paste it into the code where marked in red.

The items marked in blue are the variables and are commented to give a clue as to what they are.

Now copy and paste all the code in the box and paste it into the page Footer Code box in the Page inspector.

CSS

<style type="text/css">

ul.marquee {

     /* required styles */

     display: block;

     padding: 0;

     margin: 0;

     list-style: none;

     line-height: 1;

     position: relative;

     overflow: hidden;

     /* optional styles for appearance */

     width: 500px; /* set the required width */

     height: 34px; /* set the height required to accomodate the chosen font size */

     background-color: #222; /* scroller background color */

     border: 5px solid #0593FF; /* border width, type and color */

     border-radius: 7px;  /* border radius */

     -moz-border-radius: 7px; /* border radius */

     -webkit-border-radius: 7px; /* border radius */

}

ul.marquee li {

     /* required styles */

     position: absolute;

     top: -999em;

     left: 0;

     display: block;

     white-space: nowrap; /* keep all text on a single line */

     /* optional styles for appearance */

     font: 24px Trebuchet MS, Helvetica, sans-serif; /*font size and family */

     color: #eee;  /* font color */

     padding: 3px 5px;

}

ul.marquee li a {color:#0593FF;} /* link text color */

ul.marquee li a:hover {color:#FF0000;} /* link rollover color */

</style>

The styles shown above are comment for easy adjustment.

Copy and paste them into the Head Code box in the page inspector.

easy

The Scroll Text widget makes this a lot easier and allows for both horizontal and vertical scrolling along with a lot of custom options. Click the Easy button to see how it works...