Treehouse

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.

ydkjs-5.png

Recent Features

Incredible Demos

  • DWRequest: MooTools 1.2 AJAX Listener &#038; Message&nbsp;Display

    Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The JavaScript library continues to improve and become more flexible. Fellow DZone Zone Leader Boyan Kostadinov wrote a very useful article...

  • MooTools CountDown&nbsp;Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a...

  • Create Digg URLs Using&nbsp;PHP

    Digg recently came out with a sweet new feature that allows users to create Tiny Digg URLs which show a Digg banner at the top allowing easy access to vote for the article from the page. While I love...

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!

Use Code Editor