A lot of blogs out there use an image of beginning quotes to spice up their blockquotes. If you don’t know what I mean, here’s an example:
Now, you’ll notice that there is a background image on the blockquote tag that specifies the beginning quote image, but there is no endquote image. This is because the blockquote element cannot have two background images assigned to it. So, the next logical solution is to simply designate in the CSS a background image in the lower right corner to any P tag that appears inside a blockquote element.
This is wrong. It looks great, but only when the blockquote contains only one paragraph. When there is more than one, the endquote image gets set to each paragraph and you end up with a mess of endquotes.
After messing around with some javascript on wordpress for a few hours one day, I finally came up with a decent solution.
It starts with some javascript:
function showQuotes() {
// Gets the number of blockquotes on the page.
var quoteNum = document.getElementsByTagName("blockquote").length;
var quote;
var pNumber;
var pTag;
var newBR;
var pLength;
for(var y=0; y < quoteNum; y++){
quote = document.getElementsByTagName("blockquote").item(y);
pNumber = quote.getElementsByTagName("p").length;
pTag = quote.getElementsByTagName("p").item(pNumber - 1);
pTag.setAttribute("class", "endQuotes");
// Set "className" for internet explorer
pTag.setAttribute("className", "endQuotes");
if(pTag>1){
pLength = pTag.childNodes[0].nodeValue;
pLength = pLength.length;
// If the last paragraph has less than 60 characters or spaces,
// throw in a line break to correct the P element height.
if(pLength < 60){
for(var x=0; x<2; x++) {
newBR = document.createElement("BR");
pTag.appendChild(newBR);
}
}
}
}
}
showQuotes();
Place the javascript at the bottom of the index.php page just inside the ending body tag.
Next all you have to do is add the css:
blockquote {
background: #333 url('images/quote.gif') no-repeat left top;
color: #CCC;
font-style: italic;
margin: 20px 0px;
padding: 10px 0px 0px 30px;
}
blockquote p {
margin: 0px !important;
padding-right: 30px;
padding-bottom: 10px;
}
.endQuotes {
width:350px;
background: url('images/quote_end.gif') no-repeat scroll right bottom;
}
It should look like this:
Note: I don’t consider myself an expert in javascript and I’d love to hear people’s opinions on how this could be done better.
Images from Valleywag and The Trendwatch respectively.
2 Comments
My hero, thank you!
Another way to do it, without relying on JS, is to put a div inside your blockquote and specify that any div inside a blockquote has the desired end quote image as a background. Then you can put whatever you like inside the div tags (apart from more divs!), and you’ll still only have one end quote.
Post a Comment