jquery problem

davidjames · 01-14-2010, 08:54 PM

Hi all this is my first post so be gentle

), I've been trying to create a simple banner that fades text in and out one sentence after another. Now the script I wrote uses jquery but I just can't seem to get it to work. I've read my book (as far as I've got anyhow), JavaScript published by O'Reilly and I'm just at a loss, as to the problems cause.

Basically when the script is run it should fade in and fadeout a series of sentences stored in an array. But in stead it prints the last sentence stored in the array 3 times, if there where 3 sentences in the array. If there where 5 it would print the fith sentence 5 times etc. I'll show you the code below.

Code:

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">

$(document).ready( function() {
	
	$('.msg').each(function () {
		var ctr = 0; // ctr
		var bannerMsgs = ['Sentence 1', 'Sentence 2', 'Sentence 3 etc']; //msgs stored in array
		
		while ( ctr <= 3) {
			$('.msg').text(bannerMsgs[ctr]);
			$('.msg').hide();
			$('.msg').fadeIn(3000);
			$('.msg').fadeOut(1000);
			ctr++;
			
		}
	});
	
}); // eof ready

.msg is a class given to a <span> tag in my HTML like:

Code:

<span class="msg"></span>

Any help would be much appreciated!

Dave

harrierdh · 01-14-2010, 09:26 PM

I can't be certain. It looks to me like the while loop is flying through the list and exiting with the 3rd item loaded. Perhaps you need a delay in there.

itsallkizza · 01-14-2010, 11:03 PM

How bout something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.msg
{
width: 300px;
margin: 20px auto;
padding: 20px;
border: 1px solid #666666;
font-family: arial,sans-serif;
text-align: center;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[

var messages = [
	"sentence one!",
	"sentence two!",
	"another sentence!"
];

function rotateMessages()
	{
	messages_index = typeof(messages_index) != "number" ? 1 : ++messages_index%messages.length;
	$(".msg div").fadeOut(1000,function()
		{
		$(this).html(messages[messages_index]).fadeIn(1000);
		});
	}

$(function()
	{
	$(".msg").html('<div>'+messages[0]+'</div>');
	messages_interval = setInterval("rotateMessages()",5000);
	});

// ]]>
</script>
</head>
<body>

<div class="msg"></div>

<div class="msg"></div>

</body>
</html>

In the above code I made your .msg elements container divs. If you want to keep them as spans in your html, then simply:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.msg
{
margin: 10px;
font-family: arial,sans-serif;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[

var messages = [
	"sentence one!",
	"sentence two!",
	"another sentence!"
];

function rotateMessages()
	{
	messages_index = typeof(messages_index) != "number" ? 1 : ++messages_index%messages.length;
	$(".msg").fadeOut(1000,function()
		{
		$(this).html(messages[messages_index]).fadeIn(1000);
		});
	}

$(function()
	{
	$(".msg").html(messages[0]);
	messages_interval = setInterval("rotateMessages()",5000);
	});

// ]]>
</script>
</head>
<body>

<span class="msg"></span>

<span class="msg"></span>

</body>
</html>

davidjames · 01-15-2010, 01:29 PM

Yes it does seem that the while loop iterates without waiting for each function call to finish, and this is where I'm stumped. I thought each function in that while loop would not execute until the one before it had finished, I must be missing something? There are 2 delays in there also in the form of fadeIn() and fadeOut().

davidjames · 01-15-2010, 01:32 PM

Yes you your code works perfectly however, do you know where I'm going wrong and what I'm missing? Many thanks,

Dave

itsallkizza · 01-15-2010, 03:00 PM

For starters, everything in your while loop is being run consecutively and there are no delays. This means that unless your computer is the slowest one on earth, you are only going to see the final iteration. jQuery's fadeIn/fadeOut are asynchronous in nature, i.e. they don't stop your code unless you explicitly tell them (one method of this is by assigning a callback).

Spudhead · 01-15-2010, 04:00 PM

You need to queue your effects up using a callback. The simplest way - to me - of doing this, is through a function that calls itself recursively. The example below isn't a particularly elegant way of doing it, a custom plugin that accepted an array of message values would be better than declaring global counter vars, but this works:

Code:

var messages	= ["message one", "message two", "message three"];
var messageCounter = 0;

function loadNextMessage($target){
	if (messageCounter < messages.length){
		$target.fadeOut(1000, function(){
			$target.html(messages[messageCounter]);
			$target.fadeIn(1000, function(){
				messageCounter++;
				loadNextMessage($target);
			});
		});
	}
}

$(document).ready(function(){
	loadNextMessage($('#messageDisplay'));
});




<div id="messageDisplay" style="display:none;"></div>