First, Last, Active and Only List Styles With Prototype


This entry is part 6 of 10 in the series Prototype Tutorial

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!

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

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.


Similar Entries
JavaScript BMI Calculator
This entry is part 6 of 10 in the series Prototype TutorialPrototype Tutorial Series IndexSimple Hide and Show with PrototypeEvent Observe and Event Listeners with PrototypeJavaScript Script.aculo.us Fade with a TimerEvolving Styles: Add, Change Remove Classes with PrototypeAlternating Colors Using PrototypeFirst, Last, Active and Only List Styles With PrototypeChange Rel External to Target Blank using
Alternating Colors Using Prototype
This entry is part 6 of 10 in the series Prototype TutorialPrototype Tutorial Series IndexSimple Hide and Show with PrototypeEvent Observe and Event Listeners with PrototypeJavaScript Script.aculo.us Fade with a TimerEvolving Styles: Add, Change Remove Classes with PrototypeAlternating Colors Using PrototypeFirst, Last, Active and Only List Styles With PrototypeChange Rel External to Target Blank using
Evolving Styles: Add, Change Remove Classes with Prototype
This entry is part 6 of 10 in the series Prototype TutorialPrototype Tutorial Series IndexSimple Hide and Show with PrototypeEvent Observe and Event Listeners with PrototypeJavaScript Script.aculo.us Fade with a TimerEvolving Styles: Add, Change Remove Classes with PrototypeAlternating Colors Using PrototypeFirst, Last, Active and Only List Styles With PrototypeChange Rel External to Target Blank using
Simple Hide and Show with Prototype
This entry is part 6 of 10 in the series Prototype TutorialPrototype Tutorial Series IndexSimple Hide and Show with PrototypeEvent Observe and Event Listeners with PrototypeJavaScript Script.aculo.us Fade with a TimerEvolving Styles: Add, Change Remove Classes with PrototypeAlternating Colors Using PrototypeFirst, Last, Active and Only List Styles With PrototypeChange Rel External to Target Blank using
Event Observe and Event Listeners with Prototype
This entry is part 6 of 10 in the series Prototype TutorialPrototype Tutorial Series IndexSimple Hide and Show with PrototypeEvent Observe and Event Listeners with PrototypeJavaScript Script.aculo.us Fade with a TimerEvolving Styles: Add, Change Remove Classes with PrototypeAlternating Colors Using PrototypeFirst, Last, Active and Only List Styles With PrototypeChange Rel External to Target Blank using
Next Post
Evolving Styles: Add, Change Remove Classes with Prototype
Previous Post
Simple Hide and Show with Prototype

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

Be the first to leave a comment!