Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: jquery problem

  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery problem

    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

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    82
    Thanks
    0
    Thanked 6 Times in 6 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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>
    Last edited by itsallkizza; 01-14-2010 at 11:05 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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().

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes you your code works perfectly however, do you know where I'm going wrong and what I'm missing? Many thanks,

    Dave

  • #6
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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).
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #7
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •