Here is a nice trick to replace in <div id="Id01" class="Class01"> direct without JS

Hi everybody,

do you want to include in a <div> or <span> or <p> a id=”ID00″

but this id should be changed to

id=”ID01″
id=”ID02″
id=”ID03″
id=”ID04″
id=”ID05″

or any other id name that you want to change “on the fly” without using document.getelementBy…. ?

I just found a nice trick to do this:

And before you say, this is not for the HTML section.

Believe me, this here is for HTML. But we use PHP to help HTML!

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

[CODE]
<?php

// This reset the counter for pagination
$FormCounter = 0;

// Lets assume that you got from MySQL the data. You want to show always 5 frames with data.
// The following code works and can be from you used as shown.

while ($row = mysql_fetch_assoc($rs_result))
{
$FormCounter++;
?>

<div class=”ArticleFormDiv” style=”position:relative;background:url(images/DesignSlideshow.jpg);width:673px;height:410px”>

<div style=”position: absolute; top: 0.3em; left: 8.8em; width: 500px;”>

<!– The following line is placing in the src=”” always the picture name which is stored in the MySQL table –>
<img id=”MainPicLink” src=”images/<?php echo $row[“MainPicLink”]; ?>” style=”position: absolute; visibility: visible; left: -6.55em; top: 1.9em; width: 201px; height: 146px; z-index: 200;”>
<!– This is nothing special. –>

<!– The following lines are a example how to show data from the fetched table –>
<p id=”DataItem” align=”left” style=”position: absolute; top: 1.1em; left: 8em; padding: 4px; font-weight: bold; font-size: 18px; color: #625AAE; line-height: 22px;”>
<?php echo $row[“Item”]; ?>
</p>

<p id=”DataItemNo” style=”position: absolute; top: 7.45em; left: 14em; padding: 4px; font-weight: normal; font-size: 16px;”>
<?php echo $row[“ItemNo”]; ?>
</p>
<!– This all is clear. Nothing special. –>

<!– But now comes a problem. What to do if you want to change the id of DataPrice and
add always a auto incremement number? The most people do this in this way or with
document.getElementById and change it.

But what you do if you dont want to call any javascript function?

id=”javascript:NewDataPrice();” does not work.

How you change the id always direct in the field?

id=”I want here to get changed!”

I needed a while to find the following solution. if the auto incrememnt number is a javascript number, convert it to PHP.

Then include the PHP variable as echo in the id.

This is a example that works, but it is not done direct in the field via a place holder.
It is done with a javascript funtion.
–>
<p id=”DataPrice” style=”position: absolute; top: 14.63em; left: 14em; padding: 4px; font-weight: normal; font-size: 16px;”>
<?php echo $row[“Price”]; ?>
</p>

<script type=”text/javascript”>
// Change ID from DataPrice
document.getElementById(“DataPrice”).id = “DataPrice” + jsAutoNumber;
</script>

<!– But what if you dont want to use javascript? Or if you want to replace the id direct with the place holder?
Here comes the solution: Use PHP echo!
First increment the number, put it with the id name together and then echo it.

This works also for replacement of src or classes

Here is a example:
–>
<?php
$php_ID_DataItem = ‘DataItem’ . $FormCounter;
$php_href_DataItem = ‘href_mylink’ . $FormCounter;
$php_class_DataItem = ‘class_myclass’ . $FormCounter;
$php_src_DataItem = ‘images/picname’ . $FormCounter . ‘.jpg’;
?>

<p id=”<?php echo $php_ID_DataItem; ?>” style=”position: absolute; top: 0.87em; left: -7.7em;”><a id=”<?php echo $php_href_DataItem; ?>” name=”DataItemName” href=”javascript:void(0);”><img class=”<?php echo $php_class_DataItem; ?>” src=”<?php echo $php_src_DataItem; ?>” title=”Big Image” width=”644″ height=”380″></a></p>

</div>

</div>

<br>

<script type=”text/javascript”>

// This is the pagination function. It calls always the same page again.
// You should adjust the echo as you need it.
<?php
$sql = “SELECT COUNT(ID) FROM articles”;
$rs_result = mysql_query($sql);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $recpage);

for ($i=1; $i<=$total_pages; $i++)
{
echo “<a href=’body_articles.php?page=”.$i.”‘ class=’body_articles ajaxify’>”.$i.”</a> “;

/* echo “<a href=’pagination.php?page=”.$i.”‘>”.$i.”</a> “; */
};

}?>

</div>
[/CODE]

Even more interesting is to change a serie of CSS parameter. Lets say that you have 20 images, all of them in different areas of the web application. With this code can be all images at the same time displayed or hidden.

[CODE]
<?php

for ($x = 0; $x <= 20; $x++)
{

Also in #PHP _↴