breaking up results into varying columns

8 posts by 2 authors in: Forums > CMS Builder
Last Post: March 21, 2012   (RSS)

By zaba - March 20, 2012 - edited: March 20, 2012

Hi I am trying to achieve a brickwork pattern to display results, the results will need to split into rows, each "brick" (result) will be enclosed in a div and I want them layed out so the first row contains 3 bricks centred and the second row 2 bricks centred and the 3rd row 3 bricks and the fourth row 2 bricks and so on. I can't think of how I would go about this. I have no problem with doing the css, if it were a static layout, its just how to divide it all up so it does this dynamically.
Hope this makes sense, if you need any more info please let me know. see picture for layout.
Attachments:

picture-26.jpg 58K

Re: [zaba] breaking up results into varying columns

By (Deleted User) - March 20, 2012

Hi zaba,

Unfortunately we're not really designers and your question is more of a general html/css question than one to do with CMSB.

Having said that, my recommendation would be to use the styling elemnt 'float:left' for the cells with a counter in php to check how many cells have been drawn and how many rows (using a foreach loop and two variables like $rows and $cells).

Each row should then be in it's own div with the width fixed to be the combined width of the number of cells in that row, centered with margins (margin: 5px auto;).

The whole layout should be in a container div of fixed width to ensure that it all sits correctly relative to each other and then does not adversely affect the surrounding elements (with an element such as "<div style='clear:both;'></div>" as the last thing before closing the container div for the brick pattern).

So to recap, we're not designers, but if you want us to look at the code you've created to do the above we could always make suggestions.

Hope this helps,

Tom

Re: [Tom P] breaking up results into varying columns

By zaba - March 20, 2012

I think you misunderstood me. I can do all the css but the bricks would be generated dynamically, how can I split up the results say from 50 entries so that it pulls in 3 then 2 then 3 then 2 as the style for a brick on the first row would be different from the style of the css brick on the second row and it would alternate.

Re: [zaba] breaking up results into varying columns

By (Deleted User) - March 20, 2012

Hi zaba,

If you already have the css, then the following should work (with tweaking to suit your layout):

<?php
// Set up the variables for monitoring the row/cell
$row = 0;
$cell = 0;
$clearFloats = false;
?>
<?php
// Loop through the records we want to display
foreach ( $records as $record ) :
?>
<?php
// Check whether this is a new row
if ( !$row and ( $cell == 3 ) ) {
$row = 1;
$cell = 0;
$clearFloats = true;
}
elseif ( $row and ( $cell == 2 ) ) {
$row = 0;
$cell = 0;
$clearFloats = true;
}

// Create a new row if necessary
if ( $clearFloats ) {
echo "<div style='clear:both;'></div>";
$clearFloats = false;
}
?>
{output the cell here}
<?php
// Increment the number of cells by one
$cell = $cell + 1;
?>
<?php endforeach; ?>


With the above we loop over the records returned from CMSB and count how many cells we've drawn.

The check at the start of the loop looks for the number of cells and the current row 'type' (since you have two types of row we use 1 and 0). If the row type is 0 and we've drawn 3 cells, we change the row type to 1 and set the cell counter to 0.

The next check outputs a clearfloat div to make sure the next div being drawn appears below the previous row (rather than next to the last cell drawn).

The actual code for the cell is then outputted and afterward, the number of cells is incremented.

It's a little simplistic but has the virtue of being easily readable and easily editable (so if you want three rows of different lengths you can add another row type).

Let me know if this helps,

Tom

Re: [Tom P] breaking up results into varying columns

By zaba - March 20, 2012

Thanks Tom,
I think I should be able to follow that, theres another element to this though.which i didnt mention, i need to also limit the results into blocks of 13 results.
So if there are 52 results I need to build the bricks in rows of 3 and 2 for 5 rows (=13 blocks) and then close the enclosing div before starting the process again on the next div block if you get my drift.

Re: [Tom P] breaking up results into varying columns

By zaba - March 20, 2012

Hi Tom,

they are going to be on the same page, going to integrate it with a vertical scroller and a bit of jquery.

Hopefully it should all work when I finish putting it all together. I'll post back if I have any specific problems with actual code.
Really thanks a bunch for this!!

Re: [zaba] breaking up results into varying columns

By zaba - March 21, 2012

Tom,
I managed to piece it all together with my css and some jquery stuff to scroll it up and down. It works perfectly. Thanks for your code comments it helped me to understand what was going on and made it easy for me to work with. You guys are the best!!! Thanks again!