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:
>
>
>
> In the JS:
>
> $(document).ready(function(){
> $('hr').each(function() {
> var divText = $(this).attr('title');
> $(this).before('' +
> ' ' +
> ' ' +
> ''+divText+' 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: #FF;
> width: 120px;
>
> }
