I've read a lot of information about the determination of a even/odd number and using it to change the class of a div.
In my case I want to switch the position of divs called MessagePicture and MessageText every new message posted.
This is the code I am using to display the messages, I also included one of my tries to get the even/odd code to work.
Can anyone tell me what I should change to get it to work?
<?PHP
$Query =
"
SELECT
ID,
NameBox,
MessageBox,
Code
FROM
messages
ORDER BY
ID
DESC LIMIT 10
";
$Result = mysql_query($Query);
if(!$Result)
{
echo 'ERROR: '.mysql_error();
}
else
{
if(mysql_num_rows($Result) == 0)
{
echo 'No results';
}
else
{
$i = 0;
$class = (++$i % 2) ? 'even' : 'odd';
while
($Row = mysql_fetch_assoc($Result))
echo '
<div id="MessageWrapper">
<div id="MessagePicture" class="'.$class.'">
<style>
#MessagePicture {
background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);
background-repeat: no-repeat;
background-position: center
</style>
</div>
<div id="MessageText" class="'.$class.'">
<div id="MessageTitle">
<h1>'.$Row['NameBox'].'</h1>
</div>
<div id="MessageContent">
<p>'.nl2br($Row['MessageBox']).'</p>
</div>
</div>
</div>
';}}}?>
Your $i always stays 0. Add $i++ in the while loop to increment it.
You can do that in one line:
$class = ($i++ % 2 == 0) ? 'even' : 'odd';
Full Example:
$i = 0;
while ($Row = mysql_fetch_assoc($Result)) {
$class = ($i++ % 2 == 0) ? 'even' : 'odd';
//echo ...
}
This may not be an answer to your exact problem, but since any markup already carries information on which of child element rows are even and which are odd, and since CSS is able to differentiate between these, you can achieve this using pure CSS, which is what I boldly offer here.
Use CSS selectors :nth-child(even) and :nth-child(odd) to select even and odd children, respectively. That way you also don't have to change or tag your markup. An example:
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Pineapples</li>
</ul>
li:nth-child(even)
{
background-color: silver;
}
li:nth-child(odd) /* or leave this one out altogether */
{
background-color: white;
}
Check the following, rather authoritative page for more details and usage (like nth-child(5n+3)):