Ditto fifth element different class or tpl

1,613 Posts

fourroses666 Reply #1, 13 years, 7 months ago

I need to set a different css class on every fifth ditto resourcethumb.

How can I do this?

This question has been answered by benmarte. See the first response.

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #2, 13 years, 7 months ago

I've never used Ditto before I believe that is for Evo so IDK what parameters it has but you can do this using the nth-child psuedo class, something like this:

div::nth-child(5n)

This does not work with IE8 or lower so if you want it to work with that browser you will have to rely on javascript to do it for you the code for that would be something like this:

$('div:nth-child(5n)').addClass('className');

Hope that helps.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #3, 13 years, 7 months ago

Hey,

I'm not that good at JS, so it would look some like this when I need to add the class at the 5th div with class album ?

<script type="text/javascript">	
    $(window).load(function(){	  
        $('div.album:nth-child(5n)').addClass('no-margin');
    });
</script>

Evolution user, I like the back-end speed and simplicity

discuss.answer

☆ A M B ☆
894 Posts

benmarte Reply #4, 13 years, 7 months ago

Use this:

<script type="text/javascript">   
    $(document).ready(function(){    
        $('div.album:nth-child(5n)').addClass('no-margin');
    });
</script>

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #5, 13 years, 7 months ago

Looks like I was pritty close.

Somehow it works on the second div, changing the 5n doesn't do anything.

Got any clues?

##

http://css-tricks.com/examples/nth-child-tester/

I guess I need to use <li>

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #6, 13 years, 7 months ago

I would need to see your code and know what you what to style in order to give you the correct code.

Got a live link I can check?

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #7, 13 years, 7 months ago

that 5n should be good, I don't get it. grabs the 2nd element not the 5th sad

[ed. note: fourroses666 last edited this post 13 years, 7 months ago.]

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #8, 13 years, 7 months ago

First of all having style tags in html is incorrect, style tags should be in the header and even then you shouldn't be using them.

Second you have a bunch of li tags with no wrapping ul tag.

Third what exactly is it you want to do with the 5th thumbnail, and which method did you use css or js?

I think you need to solve the first 2 issues first in order to fix your problem.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #9, 13 years, 7 months ago

these style tags where there for testing/developing. I added them in the css file.
changed the li to div again.
i need every 5th thumbnail to have a margin-right:0px;

Now it grabs the 4th instead of the 5th LOL.

.album{float:left; width:180px; height:138px; margin:0 20px 20px 0; background-color:#ccc; }
.no-margin{margin-right:0;}

    <script type="text/javascript">  
        $(document).ready(function(){   
            $('.album:nth-child(5n)').addClass('no-margin');
        });
    </script>

Source output:
<div class="album"></div>
<div class="album"></div>
<div class="album"></div>
<div class="album no-margin"></div>
<div class="album"></div>
<div class="album"></div>

Gona check for any css errors, it's weird
[ed. note: fourroses666 last edited this post 13 years, 7 months ago.]

Evolution user, I like the back-end speed and simplicity

1,613 Posts

fourroses666 Reply #10, 13 years, 7 months ago

Ok, I got it fixed, somehow with a <ul> </ul> it works...

even when there are no <li> into it.

weird, but glad i got it fixed.

Thanx again Ben!

#edit seems there is also an other solution when I use PHx and [+ditto_iteration+]
the [+ditto_iteration+] add a number starting at 0. How to use PHx with that I dunno. [ed. note: fourroses666 last edited this post 13 years, 7 months ago.]

Evolution user, I like the back-end speed and simplicity

Answered Ditto fifth element different class or tpl