We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.


Posted By

designerd on 10/06/06


Tagged

javascript text pullquotes


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

Roshambo


auto-pullquotes


Published in: JavaScript 


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

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


  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();});

Report this snippet 

You need to login to post a comment.