Easy jQuery Pull Quotes
Pull quotes, lift-out quotes, or call-outs are a handy method of drawing reader’s attention to a section of text. Recently, on a couple of client projects, I’ve seen the need to enhance large blocks of text so the user could skim read them without missing the really important parts. Pull quotes seemed perfect for this, so I created a small jQuery script to take care of them.
In this article I demonstrate an easy method of creating pull quotes from a block of text using jQuery (a JavaScript library), CSS, and the html span element. I hope you find this method useful.
The code
To use the easy pull quote script you need the javascript and the css code, then a simple span surrounding what you want to be in the pullquote.
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // When the page is ready... $(document).ready( function() { // Easy Pullquotes by Mike Jolley // Go through each span element with a classname of "pullquote" $('span.pullquote').each(function() { // Get the text of the span text = $(this).text(); // Get rid of unwanted charactors text=text.replace( /\((.*)\)/gi, " " ); // Check if this is to be a right or left pull quote and output it if ($(this).is(".right")) $(this).parent().before('<blockquote class="pullquote right"><p>"'+ text +'"</p></blockquote>'); else $(this).parent().before('<blockquote class="pullquote"><p>"'+ text +'"</p></blockquote>'); }); // End pull quote code } ); |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | blockquote.pullquote { padding:12px 0; margin: 5px 15px 8px 0; float:left; width:180px; text-align: center; border-top:3px double #ccc; border-bottom:3px double #ccc; border-left:0; border-right:0; line-height:1.6em; background:#fefefe; } blockquote.pullquote.right { margin: 5px 0 8px 15px; float:right; } blockquote.pullquote p { margin:0 !important; font-size:1.4em; color:#666; font-weight:bold; } |
Instructions
For a left aligned pull quote simply wrap the text you want in the quote with a span with the classname “pullquote”:
<p>Lorem ipsum dolor sit amet <span class="pullquote">purus mollis dictum</span>.</p>
For a left aligned pull quote also add the “right” classname:
<p>Lorem ipsum dolor sit amet <span class="pullquote right">purus mollis dictum</span>.</p>
Demo:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum felis. Aliquam elit urna, dapibus id, gravida non, fermentum sit amet, libero. Aenean posuere ante at tellus. Nulla pharetra justo nec tellus. Cras feugiat sapien quis metus. Donec bibendum. Nam eget augue. Phasellus eu nisi. Vivamus tincidunt blandit leo. Integer eu mi et purus mollis dictum.
Mauris imperdiet lectus a ante. Nunc vestibulum lacus eu tortor. Sed et risus. Morbi orci leo, posuere adipiscing, pharetra ut, fringilla in, risus. Morbi auctor aliquam neque. Vivamus id lacus sit amet felis porta tincidunt. Pellentesque vehicula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce a elit fringilla turpis nonummy ultrices. Pellentesque in pede. Phasellus non dolor et metus venenatis nonummy. Proin sit amet eros vitae mi tempus convallis. Mauris vel dui sit amet risus facilisis luctus. Sed quis orci. Phasellus vitae velit ac mauris viverra pellentesque. Curabitur eros.
Acknowledgments
My Easy pull quotes were inspired by Roger Johansson’s automatic pull quotes which use normal JavaScript and CSS to achieve the same effect.
Found this post useful? Why not buy me a coffee!











Justin says:
Hey just wanna say thanks for this great simple snippet.
Comment made on April 12, 2008 at 11:28 pm
Joshua says:
Is there a simple way with jQuery to automatically alternate the left and right floats so that it does not have to be specified as a span classname? I really like this idea and would like to use it, but am only just now learning jQuery. Thanks.
Comment made on December 15, 2008 at 7:23 pm
Ebrahim says:
Great stuff, but doesn’t work in IE 6/7?
Comment made on January 7, 2009 at 4:09 pm