Jump to content

Add class every fourth loop?


chadcwm

Recommended Posts

Let me say this…I'm a designer and not all that knowledgeable on php. That said, I'm trying to set up a portfolio page with a 4 column grid. The last column needs to have no margin on it, so I'd like to set up for every fourth item to include a "last" class added to the "projectBox" class. Any help setting this up?

 

I've spent a few hours looking around the net for answers, but haven't found anything that worked.

 

Thanks for any help!

Chad

 

Here's the code I've got to begin with:

 


<?
include("includes/dbinfo.inc.php");
mysql_connect(localhost,$db_username,$db_password);

@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM portfolio";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();

$i=0;
while ($i < $num) {

$id=mysql_result($result,$i,"id");
$client=mysql_result($result,$i,"Client");
$type=mysql_result($result,$i,"Type");
$image=mysql_result($result,$i,"Image");
$link=mysql_result($result,$i,"Link");
?>

<a href="<? echo "$link"; ?>">
<div class="projectBox">
<img class="thumbImage" src="http://www.cross-a.com/portfolio/thumbs/<? echo "$image"; ?>.jpg" />
<p class="thumbText"><strong><? echo "$client"; ?></strong><br />
<? echo "$type"; ?></p>

<div class="clear"></div>
    
</div> <!-- End of projectBox -->
</a>

<?
++$i;
} 
?>

 

Link to comment
Share on other sites

You could use modulus for that:

 

In your loop check for:

if($i % 4 === 0)
{
    // This loop should have class="projectBoxlast"
    $class = 'projectBoxlast';
}
else
{
    // Others have projectBox
    $class = 'projectBox';
}

// Or in short:
$class = $i % 4 === 0 ? 'projectBoxlast' : 'projectBox';

 

Then echo out class in your div.

Link to comment
Share on other sites

This is how i do my loops that needs to run a specific number of times.

Dunno if this is a good way to do it, but it has always done my jobs! :)

 

$a = 0;
$b = 5;
if($a =< $b){
  // do one code
  $a ++;
} else {
  // do other code
  $a = 0;
}

Link to comment
Share on other sites

OK, I used modulus for this and it's doing exactly what I need it to! However, I would like to add a clear div after every fourth loops as well in order to get around some spacing issues on entries with lots of text…I did that, however, it looks like the very first result is coming up as the alternate class. Is this because the first result is coming up as 0 when $i%4? Please pardon my lack of php knowledge!

 

Is there a way to exclude this first entry from the clear? The final goal is a portfolio site with four columns. The fourth column would not have a margin on it so that it edges up to the right margin of the page.

 

Here's the code I'm working with now:

 

$i=0;
while ($i < $num) {

$id=mysql_result($result,$i,"id");
$client=mysql_result($result,$i,"Client");
$type=mysql_result($result,$i,"Type");
$image=mysql_result($result,$i,"Image");
$link=mysql_result($result,$i,"Link");

if($i % 4 === 0)
{
    // This loop should have class="projectBoxlast"
    $class = 'projectBoxlast';
$clear = '<div class="clear"></div>';
}
else
{
    // Others have projectBox
    $class = 'projectBox';
$clear = '';
}
?>

<a href="<? echo "$link"; ?>">
<div class="<? echo "$class"; ?>">
<img class="thumbImage" src="http://www.cross-a.com/portfolio/thumbs/<? echo "$image"; ?>.jpg" />
<p class="thumbText"><strong><? echo "$client"; ?></strong><br />
<? echo "$type"; ?></p>

<div class="clear"></div>
    
</div> <!-- End of projectBox -->
</a>

<? echo "$clear"; ?>


<?
++$i;
} 
?>

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.