Better Pull Quotes with MooTools
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.
Love it! Simple and tidy. The syntax looks a lot cleaner that the jQuery equivelent too.
Mootools FTW!
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.
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…
Simply a great way to quote a specific portion of your text without Google or any other search engine indexing it twice!
Simple and brilliant!
thanks David.