Ninedays Blog

Applying a Style to the Active Item

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

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!

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