[jQuery] Pretty Horizontal Rules with jQuery

[Hamish Campbell]

Hi all,

Thought I'd share a little piece of code I whipped up this morning.
This turns hr elements into pretty div based dividers. In action here:

http://www.deft.co.nz

Turn js on and off and compare!

In the HTML:

<hr title="some text!" />

In the JS:

$(document).ready(function(){
    $('hr').each(function() {
    var divText = $(this).attr('title');
    $(this).before('<div class="HR_DIVIDER center">' +
        '<div class="HR_LEFT">&nbsp;</div>' +
        '<div class="HR_RIGHT">&nbsp;</div>' +
        '<div class="center"><div class="HR_TEXT">'+divText+'</div></
div>' +
        '</div>').remove();
    });
});

In the CSS:

/* HORIZONTAL RULES */
.center {
        text-align: center;
}
.HR_LEFT {
        background-image: url(hr_left.png);
        background-repeat: no-repeat;
        background-position: left center;
        width: 30px; // width of the hr_left.png image
        float: left;
}
.HR_RIGHT {
        background-image: url(hr_right.png);
        background-repeat: no-repeat;
        background-position: right center;
        width: 30px; // width of the hr_right.png image
        float: right;
}
.HR_DIVIDER {
        margin-top: 15px;
        margin-bottom: 15px;
        background-image: url(hr_mid.png);
        background-repeat: repeat-x;
        background-position: center center;
}
.HR_TEXT {
        margin: auto;
        background-color: #FFFFFF;
        width: 120px;
}