asked on

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?

Ray Paseur

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.

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ron1959

ASKER

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!

Ray Paseur

Looks like it's coming together nicely. Thanks for the points and good luck with your project, ~Ray