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

7 Responses to “Easy jQuery Pull Quotes”

RSS feed for comments on this post.

  1. Justin says:

    Hey just wanna say thanks for this great simple snippet.

    ReplyReply

    Comment made on April 12, 2008 at 11:28 pm

  2. 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.

    ReplyReply

    Comment made on December 15, 2008 at 7:23 pm

  3. Ebrahim says:

    Great stuff, but doesn’t work in IE 6/7?

    ReplyReply

    Comment made on January 7, 2009 at 4:09 pm

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

  • Latest Tweet - More

    • New blog post: MiniCard 1.1.7 Update http://blue-anvil.com/archives/minicard-1-1-7-update/

  • Out of the blue - More

    • MiniCard 1.1.7 Update

      I have just uploaded 1.1.7 of MiniCard here and to the WordPress theme directory. This updates includes:

      • New networks; xing, gowalla, yelp, foursquare, mobileme, google buzz
      • A way to change link text and define multiple links of the same network
      • A way to define your own custom links + icons
      • Improved admin panel

      Hope you like it, and don’t forget you can show your support by purchasing the premium pack from here.

    • Switched: From Shared to VPS

      It’s been about two weeks now since I made the transition from a shared reseller hosting account to a VPS (Virtual Private Server) account – impressions so far, excellent performance but fiddly to configure.

      The reason I wanted to change from shared hosting was the fact the server was always being hacked (even though ALL my scripts were secure), there was frequent downtime, support blamed me for problems every time, and it was slow as hell.

      Those used to a shared hosting environment would probably not know where to start when faced with configuring a VPS. Luckily, a lot of it was pre-configured when I received my account – certainly some of the major security holes were patched. I was not satisfied with those however. As a victim of hacking in the past (previous host swears it was not there fault, something I don’t believe) I took extra care to secure it as a much I could – configuring brute force detection, the firewall, installing mod security (excellent rules for that here: http://www.atomicorp.com/wiki/index.php/Atomic_ModSecurity_Rules) and going though multiple guides (like this one: http://www.webhostingtalk.com/showthread.php?t=468168) with a fine-tooth comb.

      The result? My pages are loading at least 6 times faster, I have had no down time (or at least have not noticed any), and I feel in control and happy. No longer am I at the mercy of shared hosts :)

      If your interested, I chose ServInt as my provider as they offered a great deal, as well as being a managed service (so I’m not on my own if I screw things up). I was tempted by the bells and whistles of Media Temple, but felt the ServInt service was better value.

    • Download Monitor 3.2.2 Maintenance Release

      Download Monitor has received some more love and has been updated. Here’s the change log from the new version:

      • Small bugfix in uploader.php – cat ID
      • Changed stats graph calculation – thanks lggemini
      • Changes to headers in download.php to avoid caching
      • File Browser fixes – $root was clashing with something….
      • exclude_cat works in all sections of download_page now
      • Removed hardcoding of /uploads/
      • Added action to download.php – should be able to use it to stop a download if you want – maybe limiting downloads per day or something? Whatever you want…
      • Made it so if you post new file on ‘edit’ screen, the post date is updated.
      • Fixed the ‘blank meta’ section which blanks out custom field values when nothing is set.
      • Moved ‘allow_url_fopen’ check.
      • Someone said downloads don’t work with spaces in the name. They do! Wasting my time sonny…
      • All work and no play make jolley a dull boy
      • Had to rename capabilities so they work. Apologies if you have to set this up again! Cheers to Mark Dingemanse.
      • {category_ID} custom format tag added. Useful if you want to send someone to its category on the DL page I guess. Also added {category_other} so when no category is set “other” is shown – this is because the download page can show an ‘other’ section if you want it to.
      • You can now manually edit the post date on the edit download screen.

      If you have edited capabilities for download monitor user permissions, you’ll have to again sorry! This is because I named them too long. Also, you should check your forced downloads still work because there was a logic error meaning they may not have been forced after-all…

      Enjoy.

    • Mahousive update to Download Monitor (3.2)

      Today I completed the update for the Wordpress Download Monitor Plugin – many tweaks, fixes, and features added. There were no changes to the database structure so people upgrading should be fine. Here is the list from the change log:

      • {user} tag added for custom formats
      • ‘autop’ option fix
      • Download page buttons applied with CSS so they are easier to customise/translate.
      • Fix for pagination bug after editing a download
      • Category output fix on edit downloads screen
      • Category urls on download page use ID rather than name to prevent errors when cats have the same names.
      • exclude_cat added to download_page shortcode
      • Localised ‘hits’ ‘date’ ‘title’ on download page
      • Option to disable the download logging
      • Read file ‘chunked’ some people found large files were corrupted so this should help (fingers crossed)
      • Added show_tags option to download page – displays x amount of tags on the download page.
      • File Browser root setting and download.php logic/mime types modified thanks to Jim Isaacs (jidd.jimisaacs.com)
      • Interface Improvements
      • Bulk edit categories, custom fields, tags, member only downloads
      • Added roles for download monitor admin – should be able to use with a role manager plugin if you want anyone other than admin to access the admin section e.g. http://wordpress.org/extend/plugins/capsman/
      • Change redirect after add
      • Edit Cat names/parents
      • Dedicated tags and thumbnails fields (they still use meta table though)

      And yes, those category link bugs are fixed at long last, and you can edit category names finally. Phew!