display items in turn

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
IGGt
Forum Contributor
Posts: 173
Joined: Thu Nov 26, 2009 9:22 am

display items in turn

Post by IGGt »

I'm trying to find a way to take items in an array, and display them, one after the other. My idea is to create two hidden tables, and then use javascript to display them in turn for 5 seconds.

so far I have:

Code: Select all

<!-- THIS SECTION CREATES TWO HIDDEN TABLES WITH THE ID's 'Test', 'Test 1'-->
	<?php
	$a = 0;
	foreach($sqDBArray AS $sq){
	print "<div id=\"$sq\" style=\"position:absolute; left:50%; top:50%; display:none;\">\n";
	print "	<table style=\"width:400px; position:relative; left:-200px; top:-110px; background-color:$sqCol; padding:10px; z-index:2\">\n";
	print "		<tr>\n";
	print "			<th class=\"Round\" style=\"vertical-align:middle; height:300px;\">";
	print $sq;
	print "			</th>\n";
	print "		</tr>\n";	
	print "	</table>\n";
	print "</div>\n";	
	$a++;
	};
	?>
	
	<script type="text/javascript">
<!-- CREATE JAVASCRIPT ARRAY -->	
		var dbArray = ['<?php print str_replace(",","','",$sqDB); ?>'];
		//This creates an Array like dbArray=['test','test 1'];
		
<!-- SHOW / HIDE WINDOW FUNCTIONS -->						
		function hide(id) 
		{
			document.getElementById(id).style.display='none';
			
		}
		
		function show(id) 
		{
			document.getElementById(id).style.display='block';
		
			setTimeout('hide();', 5000);  // 5 seconds
		}
		
		for (i=0; i<dbArray; i++)
    	        {
	    	        show(dbArray[i]);
	     	        //document.write(dbArray[i]);
    	        }				
	</script>
The two tables display fine (if changed to display:block), but that's about as far as I have got. Any pointers would be very welcome.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: display items in turn

Post by requinix »

Print out everything into one table all at once. Then in JavaScript:
- Hide all the rows (the tr elements)
- Start a counter at 0. This counter is the row to show next
- setInterval() for every whatever seconds. The code shows row #counter and increments the counter, and if the counter is past the end of the table then it clearInterval()s.
IGGt
Forum Contributor
Posts: 173
Joined: Thu Nov 26, 2009 9:22 am

Re: display items in turn

Post by IGGt »

Thanks, that all makes sense, however, I am stuck with the setInterval() bit.
Print out everything into one table all at once
I've done this, so I now have one table with multiple rows.
Hide all the rows (the tr elements)
I've done this
Start a counter at 0.
I've set a variable 'counter=0'. Is this what you meant?
setInterval() for every whatever seconds. The code shows row #counter and increments the counter, and if the counter is past the end of the table then it clearInterval()s.
This is where I am stuck.

I have the following code, but I think it is in the wrong order:

Code: Select all

<script language="javascript">
		//HIDE ALL THE ROWS -- This section seems to work on it's own
		function hideRows()
		{
			var t = document.getElementById("dbTable");
			var len = t.rows.length;
			for(i=0 ; i< len; i++)
			{
				t.rows[i].style.display ='none';
			}
		}
		
		//Show Each Row	
		function showRows(count)
		{
			var t = document.getElementById("dbTable");
			var len = t.rows.length;
			var i = count;
			t.rows[i].style.display = 'block';
		}
			
		//Timer
		function hideShow()
		{
			hideRows();
			var count = 0;
			var interval = 5000;   // 5 seconds
			setInterval(showRows(count), interval);
		}
	</script>

	</head>
	<body onload="hideShow">
IGGt
Forum Contributor
Posts: 173
Joined: Thu Nov 26, 2009 9:22 am

Re: display items in turn

Post by IGGt »

OK, I spotted the first mistake:
<body onload="hideShow">
should clearly be [text] <body onload="hideShow()">[/text].

This now displays the first row, and seemingly stops there.
IGGt
Forum Contributor
Posts: 173
Joined: Thu Nov 26, 2009 9:22 am

Re: display items in turn

Post by IGGt »

ok i Think I have it:

Code: Select all

<script language="javascript">
			//HIDE ALL THE ROWS
			function hideRows()
			{
				var t = document.getElementById("dbTable");
				var len = t.rows.length;
				for(i=0 ; i< len; i++)
				{
					t.rows[i].style.display = 'none';
				}
			}
		
			//Show Each Row	
			var a = 0;
			function showRows()
			{
				hideRows();
				var t = document.getElementById("dbTable");
				var len = t.rows.length;
				t.rows[a].style.display = 'block';
				a=a+1;
				if(a==len)
				{
					a=0;
				};
			}
			
			//Timer
			function hideShow()
			{
				hideRows();
				showRows();
			}
		</script>
	
	</head>
	<body onload="javascript:setInterval('hideShow()',5000);">
Post Reply