Easy jQuery Pull Quotes

Pull QuotesPull 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

Popular Entries

7 Responses to “Easy jQuery Pull Quotes”

RSS feed for comments on this post.

Leave a Reply

Why ask?

About this site

Blue Anvil is the online web design journal & portfolio of , a web designer from Norfolk, England. Read More »
ThemeSlice

  • Featured work - More

    • Beefjack
    • Integrity
    • theotaku.com
    • Manic Melon

  • Latest Tweet - More

    • Dropped yoghurt all down my pyjamas. Bugger. Working in my boxers. Ill get dressed some time. Soon.

  • Out of the blue - More

    • Wordpress 2.8 Memory Usage

      With the release of wordpress 2.8 some people are experiencing out of memory php errors along the lines of:

      Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 228968 bytes)

      You may also be seeing pages fail to load fully (for example the wordpress admin dashboard) if php error messages are hidden. I’ve already had one case where we thought certain plugins were to blame but in fact it was just out of memory. A possible fix (which worked in the previously mentioned case) is to add:

      @ini_set('memory_limit','64M');

      to your wp-config file. Has anyone else encoutered this error?

    • jQuery Curvy Corners 1.x and 2.x updated and moved to Google Code

      I have updated the jQuery Curvy Corners plugins (both versions) with jQuery 1.3.2 support and other enhancements. The beta 2 version is looking good and is working in all version of IE, Opera, and Firefox (as far as I can tell).

      You can grab the latest files from Google Code here. Enjoy.

    • I’m too nice: Wordpress Download Monitor plugin page add-on now included with Download Monitor version 3.1.

      It was going to be a paid add-on, but today I had a change of heart and bundled it with the newest version of download monitor. The add-on lets you make a download page using a shortcode; it lists your downloads/categories with full sorting, pagination, and search functionality. Not bad eh? See the documentation topic to see full instructions for usage, or see my download page to see it in action.

      And if you use it, please consider making a donation to ensure the continued development of the plugin!

    • 2 Announcements: New Support forum, and feedback wanted for new download page add-on

      First, I’ve implemented a support forum to Blue Anvil mainly for plugin support and ideas which can be found here. Hopefully this will make supporting my plugins easier. Feel free to add to the discussions (there is also a general web design forum too).

      Secondly, I’ve added a demo of the new download page add-on I’m making for Download Monitor. This will be a paid add-on and it would be cool to get any feedback or suggestions from anyone who would like such a feature. My download page is here. Please leave feedback on the forum or in the comments.