What is the problem with this code?

Question

marjan_m 11 Junior Poster

15 Years Ago

Hi,

I am trying to display 5 pics named "pic1", "pic2"....."pic5" in one div.
I have settled that the div will be visible after 5000 ms, and then i have settled cleartimeout function to make the div again hidden. I need to revise it 5 times so that 5 pictures will display in one div one by one.

Please help me by correcting the following code:

<td>
<?
$no = 1;
while( $no < 5 ) 
{ 
$pic = "pic".$no;
echo $pic;
?>
<script> album(); </script>
<div id="pic">
<img src="images/journeys/gallery/<? echo $R4["$pic"]; ?>" width="200" height="200" /></div>
<script> album_hide(); </script>									
<? 
$no+= 1;
$pic= "";
}
?>
</td>

Java script functions are:

function album()
{

 t = setTimeout("document.getElementById('pic').style.visibility = 'visible' ",5000);
									
}

function album_hide()
{
	clearTimeout(t);
}

Thanks for your concern and time.

php

4 Contributors
7 Replies
108 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by cwarn23

cwarn23 387 Occupation: Genius

15 Years Ago

Try the following:

<td>
<?
$no = 1;
echo '<div id="pic">';
while( $no < 6 ) 
{ 
$pic = "pic".$no;
$R4[$pic]='';
echo $pic;
?>
<script> album(); </script>
<img src="images/journeys/gallery/<? echo $R4["$pic"]; ?>" width="200" height="200" />
<script> album_hide(); </script>									
<? 
$no+= 1;
$pic= "";
}
?>
</div></td>

rm_daniweb 3 Junior Poster

15 Years Ago

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function album()
{

 t = setTimeout("document.getElementById('pic').style.visibility = 'visible' ",5000);
									
}

function album_hide()
{
	clearTimeout(t);
}
</script>
</head>

<body>
<table>
<tbody>
<td>
<?php
$no = 1;
while( $no < 6 ) 
{ 
$pic = "pic".$no;
echo $pic;
?>
<script> album(); </script>
<div id="pic">
<img src="images/journeys/gallery/<?=$R4["$pic"];?>" width="200" height="200" /></div>
<script> album_hide(); </script>									
<?php 
$no+= 1;
$pic= "";
}
?>
</td>
</tbody>
</table>
</body>
</html>

output:

pic1
pic2
pic3
pic4
pic5

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

marjan_m 11 Junior Poster · Answer 1 · 2009-04-11T10:11:19+00:00

Thanks for your help. But it is still not working.

marjan_m 11 Junior Poster · Answer 2 · 2009-04-11T17:08:06+00:00

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function album()
{

 t = setTimeout("document.getElementById('pic').style.visibility = 'visible' ",5000);
									
}

function album_hide()
{
	clearTimeout(t);
}
</script>
</head>

<body>
<table>
<tbody>
<td>
<?php
$no = 1;
while( $no < 6 ) 
{ 
$pic = "pic".$no;
echo $pic;
?>
<script> album(); </script>
<div id="pic">
<img src="images/journeys/gallery/<?=$R4["$pic"];?>" width="200" height="200" /></div>
<script> album_hide(); </script>									
<?php 
$no+= 1;
$pic= "";
}
?>
</td>
</tbody>
</table>
</body>
</html>

output:

pic1
pic2
pic3
pic4
pic5

Thanks for your reply. I got the same output but the problem is it just display fisrt pic after 5000 if I dont use cleartimeout(). And if I use it, it will not show any pic. I need to make visible the div after 5000 ms and then to hide it untill the next picture come in from the DB.

I hope you can now understand the problem.

rm_daniweb 3 Junior Poster · Answer 3 · 2009-04-11T19:28:19+00:00

Thanks for your reply. I got the same output but the problem is it just display fisrt pic after 5000 if I dont use cleartimeout(). And if I use it, it will not show any pic. I need to make visible the div after 5000 ms and then to hide it untill the next picture come in from the DB.
I hope you can now understand the problem.

revise this code....to loop on your code for every 5 seconds.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
function displayAlert() {
   alert("5 seconds have elapsed since the button was clicked.")
}
</SCRIPT>
<BODY>
<FORM>
Click the button on the left for a reminder in 5 seconds; 
click the button on the right to cancel the reminder before 
it is displayed.
<P>
<INPUT TYPE="button" VALUE="5-second reminder"
   NAME="remind_button"
   onClick="timerID=setTimeout('displayAlert()',5000)">
<INPUT TYPE="button" VALUE="Clear the 5-second reminder"
   NAME="remind_disable_button"
   onClick="clearTimeout(timerID)">
</FORM>
</BODY>
</body>
</html>

somedude3488 228 Nearly a Posting Virtuoso · Answer 4 · 2009-04-11T20:52:18+00:00

So you are wanting one image to be displayed every 5 seconds, right?

If that is the case, I would have php echo a javascript array with the image names. Then javascript could change the picture easily. Otherwise, I would use ajax.

cwarn23 387 Occupation: Genius Team Colleague Featured Poster · Answer 5 · 2009-04-12T10:19:20+00:00

So you are wanting one image to be displayed every 5 seconds, right?

If that is the case, why not use the sleep function. And doing the following should make the sleep function only effect the loop. So in your main page that the images need to be displayed on place the following:

<head><script>
function clientSideInclude(id, url) {
  var req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
 var element = document.getElementById(id);
 if (!element) {
  alert("Bad id " + id + 
   "passed to clientSideInclude." +
   "You need a div or span element " +
   "with this id in your page.");
  return;
 }
  if (req) {
    // Synchronous request, wait till we have it all
    req.open('GET', url, false);
    req.send(null);
    element.innerHTML = req.responseText;
  } else {
    element.innerHTML =
   "Sorry, your browser does not support " +
      "XMLHTTPRequest objects. This page requires " +
      "Internet Explorer 5 or better for Windows, " +
      "or Firefox for any system, or Safari. Other " +
      "compatible browsers may also exist.";
  }
}
function imagetrigger(var1) {
    clientSideInclude('dimages', 'images.php?id='+var1);
    }
function imageloader() {
    imagetrigger(1);
    setTimeout("imagetrigger(2)",5000);
    setTimeout("imagetrigger(3)",10000);
    setTimeout("imagetrigger(4)",15000);
    setTimeout("imagetrigger(5)",20000);
    }
</script></head>
<body onload="imageloader();">
Below the images<br>
<td>
<span id="dimages">
</span>
</td>
<br>Above the images

Then in images.php place the following:

<?
$no = 1;
$_GET['id']+=1;
while( $no < $_GET['id'] ) 
{ 
$pic = "pic".$no;
$R4[$pic]='';
echo $pic;
echo '<img src="images/journeys/gallery/'.$R4[$pic].'" width="200" height="200" />';
$no+= 1;
$pic= "";
}
?>