Better Pull Quotes with MooTools

By  on  

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.

Recent Features

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    MooTools onLoad SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

Discussion

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

    Mootools FTW!

  2. Dutchie

    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

    Simple and brilliant!
    thanks David.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!