repeating region 1

[Hondy]

Hi

The code below creates a repeating DIV called images. The problem I have is that the javascript only works on the first div. How can i make it so that the javascript works on each dynamically created DIV?

Thanks

<?php do { ?>
<div id="image">
<img src="<?php echo $row_rs_images['path']; ?>/<?php echo $row_rs_images['category']; ?>/<?php echo $row_rs_images['image']; ?> "width="100" height="100"/><?php echo $row_rs_images['description']; ?>
</div>


<?php } while ($row_rs_images = mysql_fetch_assoc($rs_images)); ?>
</div>

<script type="text/javascript">
T$('image').onclick = function(){TINY.box.show(content2,0,0,0,1)}
var content2 = "<img src='images/head.png' width='298' height='373' alt='' />";
</script>

 

[jpadie]

post this in the javascript forum.

but you would be better off doing a bind rather than using inline javascript

 

[vacunita]

I would instead of dynamically attaching the function to the onClick event of the DIV, assign it the usual way in the DIV tag That way your PHP loop would be taking care of it for all the image divs.

As it is your PHP of course only assigns the function to a single DIV since its outside of the while loop.

<script>
function myfunction(){TINY.box.show(content2,0,0,0,1)}
</script>


<?php do { ?>
          <div id="image" [red]onClick="myfunction();"[/red]>
<img src="<?php echo $row_rs_images['path']; ?>/<?php echo $row_rs_images['category']; ?>/<?php echo $row_rs_images['image']; ?> "width="100" height="100"/><?php echo $row_rs_images['description']; ?>
          </div>
 
    
<?php } while ($row_rs_images = mysql_fetch_assoc($rs_images)); ?>
  </div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Hondy]

Thanks Phil! I didn't think I could do that, I thought I would need to wrap up the function in a javascript tag. I'll try that when I get home later!

Cheers

Hondy

 

[Hondy]

Hi Phil

That worked a treat! Unfortunately this has given me a new problem, I hope you can help?

Basically what happens is the same image is presented by the function and I'm stumped as to how I can make "content2" variable store the correct photo.

The content2 variable only stores the last image rather than the image in the loop at the time. I think this is because the page has already rendered when the "onclick" comes into play which makes sense but how to fix it?

I will try the JS forum if you can't help me (fingers crossed you can)

Thanks

<div id="content">
<!-- Content Window -->

<?php do { ?>
<script>
function myfunction(){TINY.box.show(content2,0,0,0,1)}
</script>

<?php
$mypath1 = $row_rs_images['path'];
$mypath2 = $row_rs_images['category'];
$mypath3 = $row_rs_images['image'];
$sep = "/";
$fullpath = $mypath1.$sep.$mypath2.$sep.$mypath3;
?>
<script>
var content2 = "<img src='<?php echo $fullpath?>' width='298' height='373' alt='' />";
</script>


<div id="image" onClick="myfunction();">
<img src="<?php echo $fullpath ?> "width="100" height="100"/><?php echo $row_rs_images['description']; ?>
<?php echo $fullpath;?>
</div>

<?php } while ($row_rs_images = mysql_fetch_assoc($rs_images)); ?>
</div>

 

[vacunita]

You aren't setting content2 anywhere in that code.

But assuming its coming from the DB you can pass it into the function like:

<script>
function myfunction([red]content2[/red]){TINY.box.show(content2,0,0,0,1)}
</script>

...

  <div id="image" onClick="myfunction([red]<?PHP echo $imagevariable; ?>[/red]);">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Hondy]

hmm this is getting complicated, i thought this bit of js sets the content variable? It kinda works but it only pulls the last image. This is getting javascripty so I'm going to start a new post over there before the EULA police get me

If you could follow me over that would be great

<script>
var content2 = "<img src='<?php echo $fullpath?>' width='298' height='373' alt='' />";
</script>

 

[vacunita]

Ahh yes that is true sorry, I missed that.

If that's the case, then just pass it directly to the function.

function myfunction([red]content2[/red]){TINY.box.show(content2,0,0,0,1)}
...
<script>
var content2 = "<img src='<?php echo $fullpath?>' width='298' height='373' alt='' />";  
</script>

     
              <div id="image" onClick="myfunction([red]content2[/red]);">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[vacunita]

Actually now that I think about it, that's not going to work. Try this instead:

<?php
$mypath1 = $row_rs_images['path'];
$mypath2 = $row_rs_images['category'];
$mypath3 = $row_rs_images['image'];
$sep = "/";
$fullpath = $mypath1.$sep.$mypath2.$sep.$mypath3;

[red]$content2 = "<img src='$fullpath' width='298' height='373' alt='' />";  [/red]
?>


<div id="image" onClick="myfunction([red]<?PHP echo $content2; ?>[/red]);">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Hondy]

Great, thanks very much for your help Phil