First, Last, Active and Only List Styles With Prototype

First, Last and Only with Nested Lists

Apply first and last to the parent list | apply first and last to nested lists

First is the worst
- go 1-1
- go 1-2
- go 1-3
Second is the best
- welcome 2.1
- you might be 2.4 but you're 2.2
- the last of the 2's - 2.3
Third is the one in the polka dot dress (third has no sublist)
Fourth is the one…what do you mean it doesn't go up to four
- go 4-1

Again, this example would most likely be used on the load of the document, not using buttons or links to effect the list. The code for applying the first/last/only to a list would look like this:

Code for First, Last and Only in Nested Lists

JavaScript

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $('nav-box').down('ul').immediateDescendants().first().addClassName('first');
        $('nav-box').down('ul').immediateDescendants().last().addClassName('last');
        var myArray = $('nav-box').down('ul').immediateDescendants();
        for (var index = 0, len = myArray.length; index < len; ++index) {
            var item = myArray[index];
            // check to see if there is a nested list, or else you will get an error
            if($(item).down('ul')){
                // check to see if there are immediateDescendants, or else you will get an error
                if($(item).down('ul').immediateDescendants().size() > 1){
                    $(item).down('ul').immediateDescendants().first().addClassName('first');
                    $(item).down('ul').immediateDescendants().last().addClassName('last');
                } else if($(item).down('ul').immediateDescendants().size() == 1){
                    // if there is only one item, what should it do, apply the just one class or both, your call
                    $(item).down('ul').immediateDescendants().first().addClassName('only');
                }
            }
        }
    });
</script>

{googlead}

HTML

<div id="nav-box">
    <ul>
        <li>First is the worst
            <ul>
                <li>go 1-1</li>
                <li>go 1-2</li>
                <li>go 1-3</li>
            </ul>
        </li>
        <li>Second is the best
            <ul>
                <li>welcome 2.1</li>
                <li>you might be 2.4 but you're 2.2</li>
                <li>the last of the 2's - 2.3</li>
            </ul>
        </li>
        <li>Third is the one in the polka dot dress (third has no sublist)</li>
        <li>Fourth is the one…what do you mean it doesn't go up to four
            <ul>
                <li>go 4-1</li>
            </ul>
        </li>
    </ul>
</div>

Sample CSS

<style type="text/css">
    #nav-box ul li.first { border-left: 1px solid #996633; /* red left */}
    #nav-box ul li.last { border-right: 1px solid #339933; /* green right */}
    #nav-box ul li ul li.first { border-left: 1px solid #336699; /* blue left */}
    #featurebox-2 ul li ul li.last { border-right: 1px solid #663399; /* purple right */}
    #nav-box ul li ul li.only { border-bottom: 1px solid #669933; /* green bottom */}
</style>

For a sample like that you may actually want the styles to apply only if the nav-box element loads so if there are pages where the nav does not exist, but the script is in a header or other common file, you would add this line: Event.observe('nav-box', 'load', function() { afterEvent.observe(window, 'load', function() { and nest the code inside a 2nd level 'iffer'.

Easy enough huh?

Summary

Prototype Functions Used

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: