First, Last, Active and Only List Styles With Prototype

Applying a Style to the Active Item

Make the First & Last item bold | Make the rel="active" item italic

First is the worst
Second is the best
Third is the one in the polka dot dress (active one)
Fourth is the…what do you mean it doesn’t go up to four?

Snazzy huh? Here’s the code to apply it all (first, last and active) on page load.

Code for Applying a Style to an Active Item

JavaScript

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $('featurebox-2').down('ul').immediateDescendants().first().addClassName('first');
        $('featurebox-2').down('ul').immediateDescendants().last().addClassName('last');
        // Now for the Active Item
        var listitems = $('featurebox-2').down('ul').immediateDescendants();
        // loop through all the li's
        for (var index = 0, len = listitems.length; index < len; ++index) {
            var item = listitems[index];
            // if the li has the attribute rel and if it is equal to active
            if($(item).hasAttribute('rel') && ($(item).readAttribute('rel') == 'active') ){
                $(item).addClassName('active');
            }
        }
    });
</script>

HTML

<div id="featurebox-2">
    <ul>
        <li>First is the worst</li>
        <li rel="active">Second is the best</li>
        <li>Third is the one in the polka dot dress</li>
        <li>Fourth is the one&hellip;what do you mean it doesn't go up to four</li>
    </ul>
</div>

CSS

<style type="text/css">
    #featurebox-2 ul li.active { font-style:italic;}
</style>

The best part is, if your first or last item is the active item it applys both classes. so you could also have items whose classes are first active or even last active. Then you’d just have to adjust you stylesheet to modify any of your visual needs.

Additional CSS

<style type="text/css">
    #featurebox-2 ul li.active.last { font-style:italic; font-weight:bold; text-decoration:underline;}
    #featurebox-2 ul li.active.first { font-style:italic; font-weight:bold; background-color:#ff0000;}
</style>

What happens if we have a slightly more complex list, with nested items and such (think drop down navigation.)

In most circumstances where you have complex nested lists you want the first and last of each nested list, included the parent and each nested ones to have first and last applied to it, so let’s tackle that!

{googlead}

We’ll actually have Prototype apply a class of first or last to all of the first/last items (both the main list and each sublist.) If there is a list or sublist that only has one item in it the script will apply a class of only instead of both the first and last classes. This will give you better control via CSS.

Continue on to page 3: Working with first, last, only and active in nested lists

Pages: 1 2 3

Tagged as: active, css, first, javascript, javascript library, js, last, only, prototype, style

This site runs on the Thesis WordPress Theme

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below: