Better Pull Quotes with MooTools

Written by David Walsh on November 23, 2009 · 5 Comments

Pull Quotes

Chris Coyier authored a post titled Better Pull Quotes: Don't Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content -- instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.

The HTML

<p><span class="pull-me">As a MooTools "insider", however, I'm excited for what the MooTools team will bring to the table during 2010.</span> We'll be launching the Forge (our public plugin repository), releasing MooTools 2, continuing to grow MooTools More, featuring more community work, and much more. MooTools FTW!</p>

The HTML above features a paragraph of content with a SPAN tag wrapping what I'd like to be the pull quote.

The CSS

.quote { padding:20px; margin:0 0 20px 20px; font-size:20px; font-style:italic; background:#eee; color:#999; display:block; width:200px; float:right; }

You may style the quote any way you'd like. These elements are traditionally large in text with italicized text and a different background color.

The MooTools JavaScript

window.addEvent('domready',function() {
	//grab all quotes
	$$('span.pull-me').each(function(span) {
		//inject styled quote into page
		new Element('span',{
			'class': 'quote',
			text: span.get('text')
		}).inject(span.getParent(),'top');
	});
});

We find each element with a "pull-me" CSS class and generate a new element with our "quote" class. We then inject the new element into the original element's parent. That's all!

Chris did a great job with the execution of his idea. This is a technique that will likely be used well into the future.

Comments

  1. Love it! Simple and tidy. The syntax looks a lot cleaner that the jQuery equivelent too.

    Mootools FTW!

  2. This is a nice technique (btw, my comments textarea grows onkeypress? hehe, this input is already huge…) but sometimes (most times?) search engine wise it is smarter to put the pull quotes a second time in a page, a change to the content perhaps (applying a title, or summarizing 2 sentences into 1) instead of auto generating this with JS.
    But- it’s a nice idea and easy to implement.

  3. Not a bad technique. I may try it in some project someday…

    But I find one thing “unpleasant”: you have to take existing text in order to make it a quote… Hmm… Well, a quote IS a quote from a text, so sure, that makes sense! :D

    What I meant is that, in some case, you want an excerpt, or some kind of a resumé in one sentence, that wouldn’t be part of the whole text… I guess that I’d edit the script and add a “class:=’pull-me-hidden’” in order to make something like that work…

    Just my two cents…

  4. Simply a great way to quote a specific portion of your text without Google or any other search engine indexing it twice!

  5. Duarte Nunes May 28, 2010

    Simple and brilliant!
    thanks David.

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
MooTools OpenLinks Class - Updated
Newer
META Refresh vs. JavaScript Refresh