Vary display time in Automatic scroll based on length of text to read

As a followup to this answered question: Automatic scroll from mysql data in infinate loop

I'm looking for a way to vary the display time based on the length of the comment someone leaves.   The longer the comment, the more time I want to give visitors to read it.

Using the code Ray supplied in his answer, we are starting with comments embeded in source file called RAY_EE_fading_quotes_source.php and code that looks like this:

<p class="quotes"> &quot;Comment #2 Fantastic!&quot; <span> - Author #2 </span></p>

Open in new window


The [modified] script that calls that source file and parses it looks like this:

<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");
	var delay_time = 2000;
        fadeIt(delay_time);
    })
});

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

Open in new window


If I could figure out how to parse out just the comment from the source file and then measure the number of characters in that comment, it would be easy to assign an appropriate value to delay_time.

I could do it in PHP myself, but my javascript skills are rudimentary.

Ideas?   Ray?
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:
That's an interesting question, but I've had a cocktail, so I may not be able to answer it right now ;-)  I'll take a look, and maybe one of the other experts will come along, too.
0
Ray PaseurCommented:
You might tinker with the number of milliseconds, but at least this will show you how to get a delay time that is based on the length of the text.

<?php // RAY_temp_ron1959.php
error_reporting(E_ALL);
?><!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_temp_ron1959_fading_quotes_source.php",function(){
        qlist  = $("p.quotes");
        var qr = Math.floor( Math.random() * qlist.length );
        qlist.eq(qr).addClass("vidi");
        fadeIt();
    })
});

function fadeIt(){
    delay_time = $(".vidi").text().length * 100
    $(".vidi").fadeIn(100).delay(delay_time).fadeOut(300, 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

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
Ron1959Author Commented:
Duh!  I don't know why I was thinking I should parse out the comment portion -  measuring the whole string makes more sense.

I set it up so when someone new signs the petition, his name displays upon a successful post.   It stays up for 10 second, to give him more time to notice it.  (A thank you <first name> div displays, too, so he needs some extra time to digest the changed screen.)

After that initial 10 seconds, it cycles through from newest to oldest with delays based on string length.

Thus:

<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");
	var delay_time = 0;
        fadeIt(delay_time);
    })
});

function fadeIt(delay_time){
	if (delay_time == 0) {
		var delay_time = $(".vidi").text().length * 65
	}

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

<script type="text/javascript">
function new_post(){
    $("#quotes").load("RAY_EE_fading_quotes_source.php",function(){
        qlist  = $("p.quotes");
        var qr = 0; //Math.floor( Math.random() * qlist.length );

        qlist.eq(qr).addClass("vidi");
	if( qr == 0 ) { var delay_time = 10000; }
        fadeIt(delay_time);
    })
}
</script>

Open in new window


My next step is to tell RAY_EE_fading_quotes_source.php to select only 50 records at a time -- easy with a GET call -- but I would like to get the most recent 50 records when there's a new post and random records on a normal page load.

Thanks, again, Ray!
0
Ray PaseurCommented:
Looks like it's coming together nicely.  Thanks for the points and good luck with your project, ~Ray
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
JavaScript

From novice to tech pro — start learning today.