[jQuery] Pretty Horizontal Rules with jQuery
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"> </div>' +
'<div class="HR_RIGHT"> </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;
}