Automatic scroll from mysql data in infinate loop

I'm creating an online petition and want to automatically scroll the names of those whose names are stored in a mysql database.

The names can scroll up or fade in and out in a static div.

There are lots of jquery plugins designed for infinite scrolling, but they look like they require user interaction.

I want to keep the code confined to as few files as possible.

Will jScroll do this?   What's the state of the art for this sort of application?

Am I better off starting from scratch?
Ron1959Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
Try this... It should get you started in the right direction.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />

<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>

Open in new window

The script that generates the quotes would be where you would put your data base access.

<?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;

Open in new window

HTH, ~Ray
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
I actually have an EE Article on this subject, but I made some minor changes to it and it's presently under editor review, so I'll just copy it and post it here.

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;

Open in new window

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 <div> 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 -->

Open in new window

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 <span> 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>

Open in new window

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>

Open in new window

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();
    })
});

Open in new window

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();
    });
}

Open in new window


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>

Open in new window

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
0
Ron1959Author Commented:
Wow. Ray!  This looks great!

I'll try it in a little while, as soon as I get done anther task.

Are you making calls to RAY_EE_fading_quotes_source.php with each display of the quote (data)?

- Ron
0
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

Ray PaseurCommented:
Hi, Ron.  No, the RAY_EE_fading_quotes_source.php only needs to be called once.  It will generate an HTML document and the entire HTML document will be loaded into the #quotes DIV when document.ready() occurs.  There is no practical limit on the size of the HTML document that it creates, so long as it has the right markup, the animation will work.
http://www.laprbass.com/RAY_EE_fading_quotes_demo.html
0
Ron1959Author Commented:
Ray,

Part of what I would like to accomplish is real-time updating of the list.  So as someone "signs" the online petition, their name is available to be scrolled.

I would write a query that would select the newest names first and then randomly select past signers.    (People like to see their own name scrolling...)

If the script could call RAY_EE_fading_quotes_source.php every X seconds, that would facilitate a freshening of the source.

- Ron
0
Ray PaseurCommented:
It's not designed to work that way, but there is no reason you could not refresh the page when a new client signs the online petition.  You might also be able to create some kind of timer event to reload a portion of the page that contains the quotes DIV.
0
Ron1959Author Commented:
I was thinking the same thing.

I'm having a crazy day, but will work on this after hours, when things quiet down.  It looks like your code should work....

Thanks!

- Ron
0
Ray PaseurCommented:
It worked when I tested it ;-)

Good luck on the project! ~Ray
0
Ron1959Author Commented:
Works perfectly!

The next step is to set up a timer or counter to load the php data file (RAY_EE_fading_quotes_source.php) periodically.   That way, I could load X number of records, display them, and reload a fresh set for display.

Thanks, Ray!
0
Ray PaseurCommented:
Thanks for the points! ~Ray
0
Ron1959Author Commented:
Ray,  see my followup question about varying the time a comment is displayed.

Thanks!

- Ron
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.