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-4.png

Recent Features

  • Camera and Video Control with&nbsp;HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

  • Creating Scrolling Parallax Effects with&nbsp;CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • Camera and Video Control with&nbsp;HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

  • Using Firefox&#8217;s Geolocation&nbsp;API

    One interesting aspect of web development is Geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

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!