Zebra stripes every two articles

caruso_g · 2011-03-03 16:18:20

Hi all, “how do I” wrap every two articles in a div, and also cycle div’s class to odd/even class so that I can make a zebra stripes of article couples?

e.g. I need to get:

<div class="even">
    <div class="article">
        <h2>Article title</h2>
        <p>Article body</p>
    </div>
    <div class="article">
        <h2>Article title</h2>
        <p>Article body</p>
    </div>
</div>
<div class="even">
    <div class="article">
        <h2>Article title</h2>
        <p>Article body</p>
    </div>
    <div class="article">
        <h2>Article title</h2>
        <p>Article body</p>
    </div>
</div>
…

Last edited by caruso_g (2011-03-03 16:38:27)

uli · 2011-03-03 16:48:44

Has none of these two proposals worked for you?

nabrown78 · 2011-03-03 16:50:16

zem_nth can be very helpful in these situations. Keep in mind also current CSS selectors, or some JQuery might do the job. But if it has to be in the markup, zem_nth is for you.

caruso_g · 2011-03-03 16:58:54

uli wrote:

Has none of these two proposals worked for you?

Hi Uli, thanks for your reply, but I’m already using that solution just to insert the <hr/> tag every two articles and it works smoothly.
The issue, here, is that I need to insert an opened <div class="even"> on articles “1,5,7,n” and a <div class="odd"> one on articles “2,4,6,n”

I finally add the closing </div> every two articles thanks to the linked solution.

nabrown78 · 2011-03-03 17:15:02

Keep in mind that if it’s to apply styles, you really only need either odd or even classes. Also keep in mind that you may not need either, because you can use :pseudo-class selectors. Lastly keep in mind that you can tear your hair out trying to get this into the markup with Textpattern, or just use a bit of javascript to make your life easier.

MattD · 2011-03-03 17:20:47

There’s a TXPTip similar to this.

caruso_g · 2011-03-03 19:16:51

nabrown78 wrote:

Lastly keep in mind that you can tear your hair out trying to get this into the markup with Textpattern…

Exactly…
The issue is that I am using images to mimic product features micro-articles related to a specific main product article so I have no access to something like if_last_article since there is no if_last_image. This creates a bug in the code where if features are odd I have no closing div… >:( while on even features it work like a charm.

I need to sleep on it, but I think jQuery is the only viable way, even if I don’t like to make the page loading to heavy for dom manipulation.

gomedia · 2011-03-04 00:30:29

Hi Giuseppe,

How about:

<txp:variable name="article_count" value="0" />
<txp:variable name="pair_count" value="0" />

<txp:article>
	<txp:adi_calc name="article_count" add="1" />
	<txp:if_variable name="article_count" value="1">
		<txp:adi_calc name="pair_count" add="1" />
		<txp:smd_if field="txpvar:pair_count" operator="divisible" value="2">
			<div class="even">
EVEN
		<txp:else />
			<div class="odd">
ODD
		</txp:smd_if>
	</txp:if_variable>
	<p><txp:title /></p>
	<txp:if_variable name="article_count" value="2">
		</div>
		<txp:variable name="article_count" value="0" />
	</txp:if_variable>
</txp:article>

You’ll need to install adi_calc & smd_if for this though.

mrdale · 2011-03-04 15:45:04

As nabrown78 mentioned, you can use zem_nth which will simplify your code, but add a plugin.

<div class="myclass <txp:zem_nth step="1" of="2"> odd</txp:zem_nth>">
    <div class="article">
        <h2>Article title</h2>
        <p>Article body</p>
    </div>
    <div class="article">
        <h2>Article title</h2>
        <p>Article body</p>
    </div>
</div>

caruso_g · 2011-03-04 16:05:26

Wow Adi, you blowed my mind! :D
Wonderful solution (and now reference…!) but unluckily (apart that it seems printing first div class="odd") it doesn’t print on last div in case of odd number of features.
Btw, I wrote a similar code, but a way lot not as elegant as your solution:

<txp:if_variable name="alphaOmega" value="alpha">
    <txp:variable name="alphaOmega" value="omega" />
<txp:else />
      <txp:variable name="alphaOmega" value="alpha" />
 </txp:if_variable>

<txp:zem_nth step="1" of="4">
    <div class="even">
</txp:zem_nth>
<txp:zem_nth step="3" of="4">
    <div class="odd">
</txp:zem_nth>

<div class='grid_4 <txp:variable name="alphaOmega" />'>
     <h5 id='feature-<txp:image_info type="id" />'><txp:image_info type="alt" /></h5>
    <txp:image class="feature grid_1 alpha" wraptag="p" />
    <p class="grid_3 features_description">
        <txp:image_info type="caption" />
     </p>
</div>
<txp:if_variable name="alphaOmega" value="omega">
    </div>
</txp:if_variable>

To solve the issue I had to add a custom field “oddFeatures” and check for it in the parent form so that it would add the missing closing div in case of odd features. Quick and dirty.
Talking with client, though, we find a better solution. Only even features… Quickier and dirtier.

p.s.
o.t. Adi, what about your great adi_menu next big release? It is working like a charm here! ;)

mrdale · 2011-03-04 16:35:21

OK, so I didn’t realize you wanted this all with one article call. The following should handle all circumstances. ie whatever number of articles are produced will have the container div closed properly.

<txp:zem_nth step="1" of="4"><div class="odd container"></zem_nth>
<txp:zem_nth step="3" of="4"><div class="even container"></zem_nth>

<div class="article">
    <h5 id='feature-<txp:image_info type="id" />'><txp:image_info type="alt" /></h5>
    <txp:image class="feature grid_1 alpha" wraptag="p" />
    <p class="grid_3 features_description">
        <txp:image_info type="caption" />
    </p>
</div>

<txp:zem_nth step="1" of="2"><txp:if_last_article></div></txp:if_last_article></zem_nth>  
<txp:zem_nth step="2" of="2"></div></zem_nth>

Last edited by mrdale (2011-03-04 16:37:53)

caruso_g · 2011-03-05 16:26:13

mrdale wrote:

OK, so I didn’t realize you wanted this all with one article call. The following should handle all circumstances. ie whatever number of articles are produced will have the container div closed properly.

Unluckily it is not that simple. The page on which “features” will be printed is itself an article and I had to use “images” to mimic pseudo-sub-articles. Each alt is feature’s title, caption is the text, and the images itself is the feature’s icon. So, there is no <txp:if_last_image> tag.

Thank you all for your help anyway.

Feature request: It would be REALLY interesting to get <txp:if_first_image> or <txp:if_last_image> in next TXP version.

gomedia · 2011-03-06 10:47:47

caruso_g wrote:

Wonderful solution (and now reference…!) but unluckily (apart that it seems printing first div class="odd") it doesn’t print on last div in case of odd number of features.

Oops, but easily fixed though, just add this after the <txp:article> tag :

<txp:if_variable name="article_count" value="1">
	</div>
</txp:if_variable>

And just for good measure – to further demonstrate the power of variables, counters & conditions – here’s a general purpose solution, where you can change the number of articles per <div> easily, just by changing the value of a TXP variable “group_size”. It dispenses with smd_if but uses the reset facility in adi_calc (which I’d forgotten about).

<txp:variable name="group_size" value="3" />
<txp:variable name="article_count" value="0" />
<txp:variable name="group_count" value="0" />

<txp:article>
	<txp:if_variable name="article_count" value="0">
		<txp:adi_calc name="group_count" add="1" reset="2" />
		<txp:if_variable name="group_count" value="0">
			<div class="even">
		<txp:else />
			<div class="odd">
		</txp:if_variable>
	</txp:if_variable>
	<p><txp:title /></p>
	<txp:adi_calc name="article_count" add="1" reset='<txp:variable name="group_size"/>' />
	<txp:if_variable name="article_count" value="0">
		</div>
	</txp:if_variable>
</txp:article>

<txp:if_variable name="article_count" value="0">
<txp:else />
	</div>
</txp:if_variable>

o.t. Adi, what about your great adi_menu next big release? It is working like a charm here! ;)

Funny you should ask – there’s a new release imminent!

maniar · 2011-03-06 12:19:00

@caruso_g – I admit I like your idea of zebra striping article lists. I had only done that for comments in the past. Don’t mind my stealing your idea ;-)

If you opt for the Jquery solution combined with css, you’d only need to put the following line in your header:

<script type="text/javascript" >
	$(document).ready(function() {
		$('.article li:even').addClass('even');
	});
</script>

Every even ‘li’ that inside ‘article’ class will be given the ‘even’ class .

Edit: Check out this documentation: jQuery – Zebra striping made easy

Last edited by maniar (2011-03-06 12:28:48)

Textpattern CMS

Textpattern CMS support forum

#1 2011-03-03 16:18:20

Zebra stripes every two articles

#2 2011-03-03 16:48:44

Re: Zebra stripes every two articles

#3 2011-03-03 16:50:16

Re: Zebra stripes every two articles

#4 2011-03-03 16:58:54

Re: Zebra stripes every two articles

#5 2011-03-03 17:15:02

Re: Zebra stripes every two articles

#6 2011-03-03 17:20:47

Re: Zebra stripes every two articles

#7 2011-03-03 19:16:51

Re: Zebra stripes every two articles

#8 2011-03-04 00:30:29

Re: Zebra stripes every two articles

#9 2011-03-04 15:45:04

Re: Zebra stripes every two articles

#10 2011-03-04 16:05:26

Re: Zebra stripes every two articles

#11 2011-03-04 16:35:21

Re: Zebra stripes every two articles

#12 2011-03-05 16:26:13

Re: Zebra stripes every two articles

#13 2011-03-06 10:47:47

Re: Zebra stripes every two articles

#14 2011-03-06 12:19:00

Re: Zebra stripes every two articles

Board footer