Pull quotes are a pretty cool feature prevalent mainly in news sources, and for that matter, mainly in print media. I've always liked them, but I've been leery to implement them in the past because it makes things a little bit confusing on the editing side of the street - at least for me. That and going through individual articles, finding quotes, and then copying them to a new div just seemed like not very much fun.
So I came up with a nice little utility piece of javascript that handles everything nicely and neatly - all I have to do is wrap the text I want to quote with span tags.
The javascript makes use of scriptaculous, implying therefore the prototype.js library. It's a little heavy for my tastes, but I've been working a little bit with the library lately, and once compressed it isn't too much of a payload - especially if you are transmitting the right headers to make sure that the javascript file gets cached.
The code is pretty simple:
1<br /> 2Event.observe(window,'load', sk_pullQuote, false);<br /> 3function sk_pullQuote(){<br /> 4 var pull_node = document.getElementsByClassName("pull_text");<br /> 5 if(!(pull_node[0])){return;}<br /> 6 var pull_text = "..." + pull_node[0].innerHTML + "...";<br /> 7 var pq = Builder.node('div',{className: "pullquote"});<br /> 8 var top_par = document.getElementsByClassName("entry-body");<br /> 9 pq.innerHTML = pull_text;<br /> 10 top_par[0].insertBefore(pq,top_par[0].childNodes[0]);<br /> 11}<br />
Essentially what it does is it pulls the text that is to be used from the DOM object, then it inserts it as the first child of a defined parent node (in this case, the first element with a class name of "entry-body".
Usage requires prototype and scriptaculous (sp?), which you'll have to include in your page before the above code is used. Once you've done that, just wrap the text in span tags with a class of "pull_text" and you are done.
For an example, just look at this page.
Discuss Javascript Pullquotes
