auto-pullquotes


/ Published in: JavaScript
Save to your folder(s)

wrap the text that will become a pullquote in a span element and give it the class name "pullquote"


Copy this code and paste it in your HTML
  1. /*
  2. pullquote function by Roger Johansson, http://www.456bereastreet.com/
  3. */
  4. var pullquote = {
  5. init : function() {
  6. // Check that the browser supports the methods used
  7. if (!document.getElementById || !document.createElement || !document.appendChild) return false;
  8. var oElement, oPullquote, oPullquoteP, oQuoteContent, i, j;
  9. // Find all span elements with a class name of pullquote
  10. var arrElements = document.getElementsByTagName('span');
  11. var oRegExp = new RegExp("(^|\\s)pullquote(\\s|$)");
  12. for (i=0; i<arrElements.length; i++) {
  13. // Save the current element
  14. oElement = arrElements[i];
  15. if (oRegExp.test(oElement.className)) {
  16. // Create the blockquote and p elements
  17. oPullquote = document.createElement('blockquote');
  18. oPullquote.className = oElement.className
  19. oPullquoteP = document.createElement('p');
  20. // Insert the pullquote text
  21. for(j=0;j<oElement.childNodes.length;j++) {
  22. oPullquoteP.appendChild(oElement.childNodes[j].cloneNode(true));
  23. }
  24. oPullquote.appendChild(oPullquoteP);
  25. // Insert the blockquote element before the span elements parent element
  26. oElement.parentNode.parentNode.insertBefore(oPullquote,oElement.parentNode);
  27. }
  28. }
  29. },
  30. // addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
  31. addEvent : function(obj, type, fn) {
  32. if (obj.addEventListener)
  33. obj.addEventListener( type, fn, false );
  34. else if (obj.attachEvent)
  35. {
  36. obj["e"+type+fn] = fn;
  37. obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  38. obj.attachEvent( "on"+type, obj[type+fn] );
  39. }
  40. }
  41. };
  42.  
  43. pullquote.addEvent(window, 'load', function(){pullquote.init();});

URL: http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.