Have script that I would like to run continuously.

[flexxall]

Is there a way I can make a script on my page run continuously. Its for random images and works great f you refresh but id like it to change without refreshing.

[MadTechie]

What do you mean by run continuously

 

I don't think you mean this

while(true)
{
/*No comment*/
}

[yjim]

foreach (img as true) 
{
/* img here */
}

 

 

on loops

[flexxall]

heres the code i wish to repeat without the whole page reloading

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage0 { position: absolute; top: 325px; left: 114px; }
</style>
<div class="containerdiv">
    <img src="{T_IMAGESET_PATH}/site.jpg" width="900" height="380"/>
    <a href=page1.php><img class="cornerimage0" src="./images/random0.php"/>
</dev>

 

Thats really what I know. If either of the above would work please advise. I hope that helps clear things up as to what im trying to do.

[Michdd]

You'll need to use AJAX.

[yjim]

You'll need to use AJAX.

lol, why? php is more than capable.

 

 

<?php
$loop = 'true';
while ($loop == 'true') {

echo '<style type="text/css">
.containerdiv { float: left; position: relative; }
.cornerimage0 { position: absolute; top: 325px; left: 114px; }
</style>
<div class="containerdiv">
    <img src="{T_IMAGESET_PATH}/site.jpg" width="900" height="380"/>
    <a href=page1.php><img class="cornerimage0" src="./images/random0.php"/>
</dev>';

}

?>

[flexxall]

ok so now if I added in the fact that on the images that are randomly being displayed when they are clicked and it loads the user to a new page can the image that was clicked be removed and replaced by another random image ? or have i lost you now ?

[MadTechie]

Moving to JavaScript section,

Its not really an AJAX issue as the server doesn't need to poll a query.. just refresh the image

 

I assume its just this line that needs to be refresh

<img class="cornerimage0" src="./images/random0.php"/>

 

update to

<img id="dymImg" class="cornerimage0" src="./images/random0.php"/>

 

and add this script

 

<script> 
var dymImg; 
var imgBase="./images/random0.php?" 
var c = 0; 
function count() 
{ 
	dymImg.src=imgBase+(++c); 
} 
function init() 
{ 
	dymImg= document.getElementById("dymImg"); 
	if( dymImg) 
	{ 
		setInterval("count()",1000); 
	} 
} 
window.onload = init; 
</script> 

[flexxall]

Nice that alsmot did it but not the image disappears after the first load

 

[MadTechie]

try this

 

(only a slight change)

<img id="dymImg" class="cornerimage0" src="./images/random0.php?"/>

<script>
var dymImg;
var imgBase="./images/random0.php?" 
var c = 0;
function count()
{
	c++;
	dymImg.src=imgBase+c;
}
function init()
{
	dymImg= document.getElementById("dymImg");
	if( dymImg)
	{
		setInterval("count()",1000);
	}
}
window.onload = init;
</script> 

[flexxall]

ok that works.. now if I have 9 images do i need to do this 9 times or can i add im multiple dymimg like dymimg1 dymimg2 and so on

 

Like I have a random0.php - rondom9.php

[MadTechie]

I know you could write this a better way but

this should work

<img id="dymImg0" class="cornerimage0" src="./images/random0.php"/>
<img id="dymImg1" class="cornerimage1" src="./images/random1.php"/>
<!-- ADD -->
<script>
var dymImg= new Array();
var imgBase= new Array();
imgBase[0] = "./images/random0.php?";
imgBase[1] = "./images/random1.php?";
//ADD

var c = 0;
function count()
{
	c++;
	T=imgBase.length;
	for(n=0;n<t;n++)
	{
		dymImg[n].src=imgBase[n]+c;
	}
}
function init()
{
	dymImg[0]= document.getElementById("dymImg0");
	dymImg[1]= document.getElementById("dymImg1");
	//ADD
	setInterval("count()",1000);
}
window.onload = init;
</script> 

 

if it works then add the rest to the 3 add points

[flexxall]

Moving to JavaScript section,

Its not really an AJAX issue as the server doesn't need to poll a query.. just refresh the image

 

I assume its just this line that needs to be refresh

<img class="cornerimage0" src="./images/random0.php"/>

 

update to

<img id="dymImg" class="cornerimage0" src="./images/random0.php"/>

 

It was actually based off of this code that the repeat worked. I tried the second code but it places the image in the wrong location.

 

 

and add this script

 

<script> 
var dymImg; 
var imgBase="./images/random0.php?" 
var c = 0; 
function count() 
{ 
	dymImg.src=imgBase+(++c); 
} 
function init() 
{ 
	dymImg= document.getElementById("dymImg"); 
	if( dymImg) 
	{ 
		setInterval("count()",1000); 
	} 
} 
window.onload = init; 
</script> 

[MadTechie]

If you image is in the wrong place then check the class

 

as the first class was called cornerimage0 i assumed the next one would be cornerimage1

so i did

<img id="dymImg0" class="cornerimage0" src="./images/random0.php"/>
<img id="dymImg1" class="cornerimage1" src="./images/random1.php"/>

in my last example

[flexxall]

It seems when I use this code

<script>
   var dymImg= new Array();
   var imgBase= new Array();
   imgBase[0] = "./images/random0.php?";
   imgBase[1] = "./images/random1.php?";
   //ADD
   
   var c = 0;
   function count()
   {
      c++;
      T=imgBase.length;
      for(n=0;n<t;n++)
      {
         dymImg[n].src=imgBase[n]+c;
      }
   }
   function init()
   {
      dymImg[0]= document.getElementById("dymImg0");
      dymImg[1]= document.getElementById("dymImg1");
      //ADD
      setInterval("count()",1000);
   }
   window.onload = init;
</script> 

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage0 { position: absolute; top: 325px; left: 114px; }
.cornerimage1 { position: absolute; top: 314px; left: 231px; }
.cornerimage2 { position: absolute; top: 310px; left: 468px; }
.cornerimage3 { position: absolute; top: 334px; left: 700px; }
.cornerimage4 { position: absolute; top: 200px; left: 150px; }
.cornerimage5 { position: absolute; top: 200px; left: 650px; }
.cornerimage6 { position: absolute; top: 250px; left: 212px; }
.cornerimage7 { position: absolute; top: 275px; left: 750px; }
.cornerimage8 { position: absolute; top: 118px; left: 150px; }
.cornerimage9 { position: absolute; top: 118px; left: 650px; } 
</style>
<div class="containerdiv">
    <img src="{T_IMAGESET_PATH}/site.jpg" width="900" height="380"/>
    <a href=page0.php><img id="dymImg0" class="cornerimage0" src="./images/random0.php"/>
    <a href=page1.php><img id="dymImg1" class="cornerimage1" src="./images/random1.php"/>

</div>

 

 

This is not working. I noticed that you placed the img tag above the script. does that have anything to do with it ? and in the first script it seems the img was not added.

 

Like this works but for just one of the images

<script>
   var dymImg;
   var imgBase="./images/random0.php?"
   var c = 0;
   function count()
   {
      dymImg.src=imgBase+(++c);
   }
   function init()
   {
      dymImg= document.getElementById("dymImg");
      if( dymImg)
      {
         setInterval("count()",1000);
      }
   }
   window.onload = init;
</script> 

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage0 { position: absolute; top: 325px; left: 114px; }
.cornerimage1 { position: absolute; top: 314px; left: 231px; }
.cornerimage2 { position: absolute; top: 310px; left: 468px; }
.cornerimage3 { position: absolute; top: 334px; left: 700px; }
.cornerimage4 { position: absolute; top: 200px; left: 150px; }
.cornerimage5 { position: absolute; top: 200px; left: 650px; }
.cornerimage6 { position: absolute; top: 250px; left: 212px; }
.cornerimage7 { position: absolute; top: 275px; left: 750px; }
.cornerimage8 { position: absolute; top: 118px; left: 150px; }
.cornerimage9 { position: absolute; top: 118px; left: 650px; } 
</style>
<div class="containerdiv">
    <img src="{T_IMAGESET_PATH}/site_adopt.jpg" width="900" height="380"/>
    <a href=page0.php><img id="dymImg" class="cornerimage0" src="./images/random0.php"/>
<a href=page1.php><img id="dymImg" class="cornerimage1" src="./images/random1.php"/>

</div>

[MadTechie]

oops slight typo

T=imgBase.length;

should be

t=imgBase.length;

[flexxall]

Sweet Thanx

 

Now to throw a twist in is there any way to have the images fade in and out instead of just switching ?

[MadTechie]

Yes, your probably want to double up on the images and have some preloads to make it smooth

 

However that's for another thread

if you create a new thread (link to this thread if needed)

 

I going to get some sleep but if (I remember) I'll check for your new post in the morning