<

Upgrading the Marquee Tag with jQuery

Published on
19,289 Points
3,989 Views
3 Endorsements
Last Modified:
Awarded
The most up-to-date version of this article is on my Blog
https://iconoun.com/blog/

Introduction


Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is likely to see that?  A more engaging and eye-catching pattern might be a scrolling list of endorsements.  But those scrollers, like the non-standard < marquee > tag or, perish the thought, the < blink > tag create a distracting animation.  We're looking for something more sophisticated and subtle, more Web 2.0.


This article shows how to make the endorsements appear in a predictable position on your web page, start with a random choice, and cycle through the endorsements one after another.  As this is done, we fade the quotes into and out of view, thus minimizing the distracting motion with an elegant transition.


First: Build the Test Data Set

If you've got some nice emails or text messages about your products and services, begin by collecting them in an HTML file. For our demo here, we will use PHP to generate the HTML file, and we will name this script RAY_EE_fading_quotes_source.php.  As you can see, it will create a very plain-looking HTML file.  The only tags are < p > and < span >. We will give the paragraph a class designator of "quotes" so we can apply CSS styling and JavaScript actions to these little paragraphs.  And by placing the author information inside < span > tags, we can add separate styling to that element.


 


<?php // RAY_EE_fading_quotes_source.php
error_reporting(E_ALL);

// THIS COULD COME FROM A DATA BASE OR FLAT FILE, SO LONG AS THE MARKUP IS CORRECT
$htm = <<<HTM
<p class="quotes"> &quot;Comment #1 Lovely!&quot; <span> - Author #1 </span></p>
<p class="quotes"> &quot;Comment #2 Fantastic!&quot; <span> - Author #2 </span></p>
<p class="quotes"> &quot;Comment #3 Super!&quot; <span> - Author #3 </span></p>
<p class="quotes"> &quot;Comment #4 Wonderful!&quot; <span> - Author #4 </span></p>
<p class="quotes"> &quot;Comment #5 Delightful!&quot; <span> - Author #5 </span></p>
<p class="quotes"> &quot;Comment #6 Magnificent!&quot; <span> - Author #6 </span></p>
HTM;
echo $htm;

Does this script need to create HTML?  Could we get the data from a data base?  Well, yes and yes.  Because we are going to load this file with a jQuery statement, it needs to be presented in this HTML format.  But we could have the quotes and comments in a data base table and use the content from that table to write the HTML document directly to the browser output stream.


Next, Build the Components to Use the Data Set

Our first task will be to build the HTML markup for our web feature.  We need two

tags to make this work well.  The outermost div will define our container for the document segment.  We will call that the "banner" and inside the banner, we will have another div named "quotes" that will hold and display each of the client endorsements.  By organizing it this way we will be able to move the positioning of the "banner" div around the web page as we refine our web design.


 

<div id="banner">
   <div id="quotes">
   </div><!-- quotes -->
</div><!-- banner -->

Now that we have our containers set up, we will need to apply the initial state of styling to these elements.  To make them readily visible, we will apply some color.  We can change this later to suit the design of our web site, but for right now, the most important thing is to make these elements obvious as we seek to build our web page.  To that end, we will make the "banner" div orange, and we will make the text of the quotes green.  We can make the name of the authors blue because the authors' names are enclosed in the  tag inside the "quotes" paragraph.


We want to load the "quotes" paragraphs into the "quotes" div, but we do not want to show all of the quotes at once, so we add styling to suppress the display of any paragraphs inside the "banner" div.  We will use jQuery to make the quotes visible later.  Here is what our CSS looks like:


 


<style type="text/css" media="screen">
#banner {
    background-color:orange;
}

#banner p {
    display:none;
    color:green;
}

#banner p span {
    color:blue;
}
</style>

<style type="text/css" media="print">
#banner {
    display:none;
}
</style>

Note that we labeled this CSS style sheet for media="screen" -- it would not make much sense to use this sort of styling in print.  To handle that issue, we add a style sheet for media="print" that suppresses the banner entirely.


Put a Web Page Together and Test

This would be a good time to gather our CSS and divs into an HTML document and make sure we do not have any errors.  We will want to start with valid markup, and it will be much easier to get our JavaScript right if we know we have a good HTML document to use as the foundation.  We can grab a simple HTML5 page template and put our components into the appropriate places.


 


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />

<style type="text/css" media="screen">
#banner {
    background-color:orange;
}

#banner p {
    display:none;
    color:green;
}

#banner p span {
    color:blue;
}
</style>

<style type="text/css" media="print">
#banner {
    display:none;
}
</style>

<title>Banner of Fading Quotes</title>
</head>
<body>

<div id="banner">
   <div id="quotes">
   </div><!-- quotes -->
</div><!-- banner -->

</body>
</html>

We can load this page (it will be completely blank because there is nothing to display in the "banner" div) and we can use Firefox/Firebug to inspect the document object and confirm that it's structurally correct. We can use the W3 Validator to check our HTML.


Add the JavaScript to Animate the Fade Effect

The popular JavaScript framework, jQuery, is the right tool to use for the effects we want.  The run-time library is available from this URL:

http://code.jquery.com/jquery-latest.min.js


Our first jQuery function will be run when the document load is completed.  This function is triggered by the familiar jQuery opening line, $(document).ready(function(){.


The next line tells jQuery to load the contents of "RAY_EE_fading_quotes_source.php" into the div named "quotes" and once that is complete run the following function.


The following function assigns the qlist object, letting it represent the paragraphs with the class name "quotes".  Using this object, we choose a random starting point in the list of quotes and add the class "vidi" to the chosen paragraph.  The "vidi" class will be used in the fadeIt() function to adjust the visibility (transparency) of the paragraph over time.  If we did not want a random starting point in the list of quotes, we could start at the top of the list of quotes by setting the qr variable to zero on line 4.


Finally our function calls the fadeIt() function, a recursive function that provides for the display of the laudatory quotations.

 

$(document).ready(function(){
    $("#quotes").load("RAY_EE_fading_quotes_source.php",function(){
        qlist  = $("p.quotes");
        var qr = Math.floor( Math.random() * qlist.length );
        qlist.eq(qr).addClass("vidi");
        fadeIt();
    })
});

Our second jQuery function, fadeIt(), is a recursive function (one that calls itself) that will run and rerun as long as the browser window is open.  Its first task is to use jQuery to address the page element with the class of "vidi" and fade it into view over 1/2 second (500 milliseconds), preserve it in view for 3 seconds (3,000 milliseconds), then fade it from view over 1/2 second.  There is nothing magic about these fade and visibility times; you can adjust them to suit your preferences.  When the fadeOut() is complete, jQuery will remove the "vidi" class from the faded element and attach the "vidi" class to the next paragraph.


A test is made to see if the "vidi" class has length of zero, which would indicate that we passed the last element of "p.quotes" and if that is true, we go back to the first element of "p.quotes" and attach the "vidi" class there.


And finally, the fadeIt() function calls itself, and the process is repeated, gradually fading each quote into view and cycling through the quotes endlessly.

 


function fadeIt(){
    $(".vidi").fadeIn(500).delay(3000).fadeOut(500, function(){
        $(this).removeClass("vidi");
        $(this).next("p.quotes").addClass("vidi");
        if($(".vidi").length==0) $("p.quotes:first").addClass("vidi");
        fadeIt();
    });
}


Putting it all together we get something like this:

 


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />

<style type="text/css" media="screen">
#banner {
    background-color:orange;
}

#banner p {
    display:none;
    color:green;
}

#banner p span {
    color:blue;
}
</style>

<style type="text/css" media="print">
#banner {
    display:none;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#quotes").load("RAY_EE_fading_quotes_source.php",function(){
        qlist  = $("p.quotes");
        var qr = Math.floor( Math.random() * qlist.length );
        qlist.eq(qr).addClass("vidi");
        fadeIt();
    })
});

function fadeIt(){
    $(".vidi").fadeIn(500).delay(3000).fadeOut(500, function(){
        $(this).removeClass("vidi");
        $(this).next("p.quotes").addClass("vidi");
        if($(".vidi").length==0) $("p.quotes:first").addClass("vidi");
        fadeIt();
    });
}
</script>

<title>Banner of Fading Quotes</title>
</head>
<body>

<div id="banner">
   <div id="quotes">
   </div><!-- quotes -->
</div><!-- banner -->

</body>
</html>

While this is not likely to be the way we leave the document's style sheet, it gives us an excellent starting point.  The fade effect works correctly.  Now we can begin the process of creating a reasonable size and location for the banner, making the colors suit our overall design, and generally beautifying the HTML document.


References:

http://jquery.com/

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

http://api.jquery.com/fadeIn/

http://api.jquery.com/delay/

http://api.jquery.com/fadeOut/

http://api.jquery.com/next/

http://api.jquery.com/first/

http://www.w3schools.com/jsref/jsref_obj_math.asp


Please give us your feedback!

If you found this article helpful, please click the "thumb's up" button below. Doing so lets the E-E community know what is valuable for E-E members and helps provide direction for future articles.  If you have questions or comments, please add them.  Thanks!

 

3
Comment
Author:Ray Paseur
1 Comment
 
LVL 38

Expert Comment

by:lherrou
An elegant solution, and I can think of other ways to use it as well.

I voted YES above :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Join & Write a Comment

The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month