First, Last, Active and Only List Styles With Prototype
- Simple Hide and Show with Prototype
- Event Observe and Event Listeners with Prototype
- JavaScript Script.aculo.us Fade with a Timer
- Evolving Styles: Add, Change Remove Classes with Prototype
- Alternating Colors Using Prototype
- First, Last, Active and Only List Styles With Prototype
- Change Rel External to Target Blank using Prototype
- Zip Code, Phone Number and Replacing Empty Fields with Really Easy Validation
- Limit Characters in a Textarea with Prototype
- Open Links to a Different Site in a New Window 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>
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
the newest discoveries, stories and shared tips!Come on, all the cool kids are doing it ;)


