Jump to:

23368 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » Easy control to detect every nth list item in Silverstripe

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 855 Views
  • octopuscreative
    Avatar
    Community Member
    9 Posts

    Easy control to detect every nth list item in Silverstripe Link to this post

    Thought I'd post this in case it's of use to anyone looking the apply custom styles to certain list elements.

    I had a gallery page with images contained in a ul list with 10px padding on the right and bottom edges. I needed to apply a CSS style on every 5th image (at the right edge of the page) with no padding on the right edge, so it fits the page width structure.

    I've used the following jQuery script on sites I've built outside of the Silverstripe framework and it works well, however I was struggling to get this to work correctly with the SS framework.

    <script>
    jQuery(document).ready(function() {
       jQuery(".examples li:nth-child(3n)").addClass("nopadding");
    });
    </script>

    There are some $this->iteratorPos % 3 commands outlined on the forums for applying custom styles but this was by far the simplest method in 2.4… MultipleOf() : http://doc.silverstripe.org/templates

    <ul>
    <% if MultipleOf(4) %>
    <li class="fourth">Your content here</li>
    <% else %>
    <li>Your content here</li>
    <% end_if %>
    </ul>

    Thanks to Socks for his post here:

    http://www.silverstripe.org/template-questions/show/5357?start=16#post297212

    855 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.