Pullquotes

Mike Papageorge Dec 10, 2007

General

This script will create a pullquote on a page, derived from a set of <span>'s. Easy to use, and can be utilized more than once on a page, if desired. Styling is done by CSS.

Check out the example here

Notes

Created by: Mike Papageorge
Web Site: http://www.fiftyfoureleven.com/
Posted: December 10, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: pullQuote.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Mike Papageorge | http://www.fiftyfoureleven.com/ */
*	-------------------------------------------------------
*	Kudos to Simon Willison and the links within the following:
*	http://simon.incutio.com/blockquotesNS.js
*
*	Related Blog Post: http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/
*
*/

function makepullquote() {
parentDiv = document.getElementById("content");		// Node for inserting pullquote
spans = parentDiv.getElementsByTagName('span');		// Get all Span elements from the parentDiv

for (i = 0; i < spans.length; i++) {	// For each span
  	var span = spans[i];
  	var up = span.parentNode;	// Needed as a target for insertion.

 		if(span.className == "pullquote") {	// Check if it's a pullquote and generate a pullquote

   		// Create the blockquote with a class of pullquote
   		var pullquote = document.createElement("blockquote");
   		pullquote.className = "pullquote";

   		// Create the paragraph tag for the blockquote
   		var paragraph = document.createElement("p");

   		// I ran into some trouble when cloning the node, Opera went into an infinite loop,
   		// a result of, I suppose, having the 'pullquote' class in the span.
   		// The folliowing two lines solve the problem by removing the class from the span.
   		var zspan = span;
   		zspan.className = ""; // Insert class name here if desired

   		// Sticks the span into the generated paragraph
   		paragraph.appendChild(zspan.cloneNode(true));

   		// Sticks the generated paragraph into the generated blockquote
   		pullquote.appendChild(paragraph);

   		// Inserts the pullquote before the <p> that contains the <span class="pullquote">
   		parentDiv.insertBefore(pullquote,up);
 		 }
 	}
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  makepullquote();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.pullquote p {
  font-size: 1em;
  width: 150px;
  color :#000;
  background: #DFDFDF;
  float: right;
  padding: 0.9em;
  margin: 0.5em;
  text-align: left;
  clear: right;
  border-top: 5px solid #9F9F9F;
  border-bottom: 5px solid #9F9F9F;
}

blockquote.pullquote {
  margin-right: 0;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="pullQuote.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="content">
<p>
In at elit ut massa laoreet ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ultrices, tortor id hendrerit adipiscing. Morbi justo. Aliquam ut nulla et tortor sollicitudin posuere. <span class="pullquote">Nam venenatis pretium nisl. Nullam tincidunt felis sit amet orci.</span> Nam ut lorem a dolor imperdiet elementum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip  ex ea commodo consequat.</p>
<p>
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. <span class="pullquote">Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</span> Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. </p>
</div>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details