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>&quot;'+ text +'&quot;</p></blockquote>');
			else
				$(this).parent().before('<blockquote class="pullquote"><p>&quot;'+ text +'&quot;</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!

Related Entries

• Anti-aliased Rounded corners with JQuery
• JQuery Curvy Corners 2 Early Beta Available
• Book Review – jQuery UI 1.6
• Including CSS & JavaScript in wordpress posts using Custom Fields
• Creating an accessible yet sexy search box with CSS