CSS only drop-down menus (with submenus)

Posted on by Simon

Who needs JavaScript to do drop-down menus on a HTML web-page? Anyway, I gave it a try.

This does not work in IE6, since I’m using the child selector and the :hover pseudo class. Personally, I think that we should stop supporting IE6, so that we can all focus on other things.

I’m using a CSS IE hack below since IE doesn’t do inline-block on block elements.

With the following HTML:

<ul class="navbar">
    <li>Meat</li>
    <li>Vegetables</li>
    <li>Fruit and lots of fruit
        <ul>
            <li>Organge</li>
            <li>Apple
                <ul>
                    <li>Fuji</li>
                    <li>Gala</li>
                    <li>Granny Smith
                        <ul>
                            <li>Red</li>
                            <li>Green</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Pomgranade</li>
        </ul>
    </li>
</ul>

just add this CSS:

.navbar, .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    position: relative;
    padding: 0.5em;
    white-space: nowrap;
}

.navbar > li {
    display: inline-block;
    zoom: 1;
    *display: inline; 
}

.navbar ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
}

.navbar li:hover > ul {
    display: block;
}

.navbar ul ul {
    left: 100%;
    top: 0;
}

If you put it all together, this is what it looks like, with a tiny theme added:

Rotate backups with Bash script

Posted on by Simon

Here is a simple script to rotate your backups:

#!/usr/bin/env bash

backup_location=/mnt/data/backups
max_number_of_backups=5

function number_of_backups() {
    echo `ls -1 $backup_location | wc -l`
}

function oldest_backup() {
    echo -n `ls -1 $backup_location | head -1`
}

while [ $(number_of_backups) -gt $max_number_of_backups ]
do
    rm -rf "$backup_location/$(oldest_backup)"
done

You should of course change backup_location and max_number_of_backups to fit you environment and needs.

Event delegation with Prototype and MooTools

Posted on by Simon

With jQuery you’ll have event delegation out of the box, but if you are using Prototype or MooTools you are less fortunate – that’s until now!

I have implemented a generic event delegation JavaScript library. It works for change, submit, focus and blur events – along with all bubbling events.

I’m successfully using the library in a large Web Application with over 6,000 lines of JavaScript code (and 60,000 lines of Java code). Some screens are displaying huge amounts of data (over 20,000 INPUTs).

It’s used like this:

<html>
    <head>
        <title>Event Delegation with Prototype</title>
        <script type="text/javascript" src='prototype.js'></script>
        <script type="text/javascript" src='delegate-generic.js'></script>
        <script type="text/javascript" src='delegate-prototype.js'></script>
        <script type="text/javascript">
            document.observe('dom:loaded', function() {
                $('someDIV').delegate('submit', '.dont-submit', function(e) {
                    e.stop();
                    alert('The form was not submitted!');
                });
            });
        </script>
    </head>
    <body>
        <div id="someDIV">
            <form class="dont-submit">
                <input type="submit" value="Submit">
            </form>
            <form class="dont-submit">
                <input type="submit" value="Submit">
            </form>
        </div>
    </body>
</html>

Try it out!