Split FFMatrix content equally into two divs

#1 / Jan 24, 2010 6:22pm

Andy_vdG

62 posts

I’ve once again hit a wall with something that should be quite simple to solve.

I have following template code:

<div class="c50l">
    <div class="subcl">
        <!-- Insert your subtemplate content here -->
    </div>
</div>
<div class="c50r">
    <div class="subcr">
        <!-- Insert your subtemplate content here -->
    </div>
</div>

And content in a single FFMatrix entry which I would like to evenly distribute into the two subcl and subcr divs.

The result should be something like this (left out additional divs around elements for simplicity):

<div class="c50l">
    <div class="subcl">
        Image 1
        Title 1
        Text  1

        Image 3
        Title 3
        Text  3

        Image 5
        Title 5
        Text  5
    </div>
</div>
<div class="c50r">
    <div class="subcr">
        Image 2
        Title 2
        Text  2

        Image 4
        Title 4
        Text  4

        Image 6
        Title 6
        Text  6
    </div>
</div>

It could also just be

1 4
2 5
3 6
etc. or completely random as long as half is in the one subcolumn and the other half in the other.

#2 / Jan 24, 2010 10:50pm

Focus Lab Dev Team

1129 posts

Have you ever created columns with CSS using floats? You could create 2 columns with something like this: (rough example, not meant to be used literally)

<style>

/* absolute width of our container */
#container { width: 600px; display: block; overflow: auto; }

/* width of our divs is 50% and floated to the left */
#container div { width: 300px; float: left; }

</style>


<div id="container">

   <div>
        this is 1 on the left
   </div>

   <div>
        this is 2 on the right
   </div>

   <div>
        this is 3 on the left
   </div>

   <div>
        this is 4 on the right (etc)
   </div>

</div>

Perhaps there’s an easier way to do this with HTML/CSS rather than with EE template code. Just a thought 😊

#3 / Jan 25, 2010 12:47am

ipixel (Australia)
158 posts

Another option is to use jQuery to split the list of items up. Semantically it looks like you’re looping over a list of items, each with an image, title and text. I’ve used a jQuery plugin called ‘Columnizer’ to split up an Unordered list into three columns:

http://www.toptrails.com.au/index.php/trails/

The ‘Type’ and ‘Region’ tabs show a list split out to three columns.

Here’s a link to the plugin:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Cheers
Brendan
#4 / Jan 25, 2010 4:13am

John Henry Donovan
12339 posts

Andy_vdG, some nice solutions there, do they help?. I am moving this to the appropriate forum for you.

#5 / Jan 25, 2010 3:06pm

Andy_vdG

62 posts

Thanks John,

I ended up using the splitter plugin - basically it output the code the same way Erik suggested.

{exp:splitter blocks="2" delimiter=" " class="splitt"}
    {exp:weblog:entries weblog='mychannel' dynamic='off' disable='categories|category_fields|member_data|pagination|trackbacks'}
        {staff}
            <div id="staff">{if image}{exp:imgsizer:size image='{image}' width="175" title='{name}' alt='{name}'}{/if}                    
                <div id="content">
                    <h4>{name}</h4>

<p>                    <b>{title}</b></p>

<p><br />
                    {comment}<br />
                </div><br />
            </div> <br />
        {/staff}                    <br />
    {/exp:weblog:entries}<br />
{/exp:splitter}

and this CSS

.splitt {
 float:left;
 width:50%;
    margin-bottom: 20px;
}

Works like a charm.

Thanks
Andy

Thread

Andy_vdG

Focus Lab Dev Team

ipixel (Australia)

John Henry Donovan

Andy_vdG

Username

Password

Thread