[jQuery] Re: Pretty Horizontal Rules with jQuery

[John S]

Very cool!

On Jan 9, 2:45 pm, Hamish Campbell <[EMAIL PROTECTED]> wrote:
> 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;
>
> }