Pull quotes are quotes displayed as large text on a page. They originated in magazine and newspaper articles and are used to bring attention to key points in the text. You can include them on your web pages using a few basic techniques combining unobtrusive JavaScript and CSS with the DOM (Document Object Model).
This is an excellent effect to grab the scanning eye of the user as they browse quickly from page to page. If you pick a good, thought-provoking quote, you may slow down the user enough so he or she reads the entire page, and hopefully buys your product, service, or idea.
As with all good page design, start with a plain-text page. That way you will know that everyone will be able to view your content in their browser. It will also ensure that the page will get the best SEO rating. If the user has JavaScript turned off or does not have a JavaScript browser, they are still able to read the important content of the page. The techniques shown here add additional scanability to the page, without introducing new content to the page. Even if CSS is turned off, the JavaScript will still display the quote. It just won't be styled the way you originally intended. But, the block quote will still show.
In order to create a pull quote from the content, simply put a <span> class="pullquote"> and </span> around the text you want quoted. The JavaScript function, using the DOM, will turn this into a blockquote with a class="pullquote" allowing it to be styled using CSS.
Here's the CSS code:
<style type="text/css">
body {
font-family: "Helvetica", "Verdana", "san-serif";
}
/* This tag will be created by the JavaScript
All <span> element(s) with a pullquote class will be used to create
a new blockquote element */
blockquote.pullquote {
float: left;
/* locate on left side of page */
width: 10em; /* make
size proportional to basic text size */
margin: 0.25em 0.75em 0.25em
0;
padding: 0.5em;
border: 3px double #ccc;
/* light gray double border */
border-width: 3px 0; /* top and bottom borders only */
color: #333; /* darker
gray for the text */
background: transparent; /* no background */
font: italic
1.3em/1.3 Georgia;
}
/* Each pull quote must be within a p element */
.pullquote p {
margin: 0;
text-align: left; /* make text in pullquote flush
left */
}
.pullquote p:first-letter {
text-transform: uppercase; /* Make the first letter uppercase
*/
}
</style>
Here's the JavaScript that does all the heavy-lifting. You don't have to understand this code, which uses the DOM to do all its magic, simply copy and paste the entire block and insert inside the <head> element of your page along with the CSS code listed above. (Make sure you get everything between the <script> tags. Every character counts!)
<script type="text/javascript">
var pullquote = {
init : function()
{
// Check that the browser supports the methods used
if (!document.getElementById || !document.createElement || !document.appendChild)
return false;
var oElement, oPullquote, oPullquoteP, oQuoteContent, i, j;
// Find all span elements with a class name of pullquote
var arrElements = document.getElementsByTagName('span');
// set up a regular expression to differentiate the span elements
var oRegExp = new RegExp("(^|\\s)pullquote(\\s|$)");
for (i = 0; i < arrElements.length; i++)
{
// Save the current element from the array of elements
oElement = arrElements[i];
// is the className "pullquote"?
if (oRegExp.test(oElement.className))
{
// Create the blockquote and p elements
oPullquote = document.createElement('blockquote');
oPullquote.className = oElement.className;
oPullquoteP = document.createElement('p');
// Insert the pullquote text
for(j = 0; j < oElement.childNodes.length;
j++)
{
oPullquoteP.appendChild(
oElement.childNodes[j].cloneNode(true) );
}
oPullquote.appendChild(oPullquoteP);
// Insert the blockquote element before the
span element's parent element
oElement.parentNode.parentNode.insertBefore(oPullquote,oElement.parentNode);
} // end of if
} // end of for
},
// addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
addEvent : function(obj, type, fn)
{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent)
{
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn](
window.event ); }
obj.attachEvent( "on"+type, obj[type+fn]
);
}
}
};
pullquote.addEvent(window, 'load', function(){pullquote.init();});
</script>
The concept and code for this technique comes from Roger Johannsen's blog entry. You can read his blog entry for more details and some excellent examples.