I have a php array which I displaying with a while loop and it gets the data from a sql database, at the moment everything in the array appears instantly, but would it be possible to get them to display with a half second delay? Would i have to use Javascript?
You can put a <div>
around your array, like this:
<div id="myElementID" style="display:none;">
MY ARRAY
</div>
and it will not be visible. With Javascript you can make it visible after, for instance, a 1000 milliseconds, with:
function showElement(id)
// make hidden element visible
{
document.getElementById(id).style.display = "";
}
window.setTimeout("showElement('myElementID')",1000);
No other libraries are needed for this.
If you need to do multiple rows you can wrap a <div>
around each row, or use the <tr>
tag if your're using tables, like this:
<div id="myRow1" style="display:none;">
ROW 1
</div>
<div id="myRow2" style="display:none;">
ROW 2
</div>
<div id="myRow3" style="display:none;">
ROW 2
</div>
.......
<div id="myRowN" style="display:none;">
ROW N
</div>
And in your script:
for (i = 1; i <= N; i++) {
window.setTimeout("showElement('myRow"+i+"')",500);
}
You would still need the showElement()
function.
Yes you need javaScript. Just use jQuery. Use CSS to hide the content container before the page loads and show the content (fadeIn()
) after the desired time interval using setTimeout()
.
Here's a fiddle : http://jsfiddle.net/tnzqv4fx/
If you want to do this in your PHP you can call a javascript function with a timeout. Make sure you included the jQuery libary first en defined the method to call. It will be something like the code below. You can change the $delay
variable for more or less delay between the different elements.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function makeVisible(id, delay)
{
setTimeout(function(){
$('#'+id).fadeIn();
}, delay);
}
</script>
<?php
$delay = 500;
$array = array(1,2,3,4,5);
$counter = 0;
foreach($array as $value)
{
$uniqueId = 'aClassName'.$counter;
echo '<div style="display:none;" id="'.$uniqueId.'">'.$value.'</div>';
echo '<script>makeVisible("'.$uniqueId.'", '.($counter++*$delay).')</script>';
}
?>