Page 1 of 1

display items in turn

Posted: Thu Mar 15, 2012 10:31 am
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.

Re: display items in turn

Posted: Thu Mar 15, 2012 10:40 pm
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.

Re: display items in turn

Posted: Fri Mar 16, 2012 8:29 am
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">

Re: display items in turn

Posted: Fri Mar 16, 2012 8:50 am
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.

Re: display items in turn

Posted: Fri Mar 16, 2012 9:37 am
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);">