Simple Blockquotes

Dunstan Orchard Nov 29, 2006

General

Use this script to add the proper title and citation to your quotes. Easy to use!

Science is supposedly the method by which we stand on the shoulders of those who came before us. In computer science, we all are standing on each others' feet.

Notes

Created by: Dunstan Orchard
Web Site: http://1976design.com/
Posted: November 29, 2006

Source Code

Paste this source code into the designated areas.

External file

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

// Altered from original idea by Simon Willison at:
// http://simon.incutio.com/archive/2002/12/20/blockquoteCitations

function extractBlockquoteInfo() {
 	quotes = document.getElementsByTagName('blockquote');
	 for (i = 0; i < quotes.length; i++) {
		  cite = quotes[i].getAttribute('cite');
		  title = quotes[i].getAttribute('title');
		  if ((cite) && (cite != '')) {
			   if ( (cite.match('http://', 'i')) || (cite.match('ftp://', 'i')) || (cite.match('person://', 'i')) ) {
				    newlink = document.createElement('a');
				    newlink.setAttribute('href', cite);
				    newlink.setAttribute('title', ('Go to ' + cite));
				    title = quotes[i].getAttribute('title');
				    if ((title) && (title != '')) {
					     newlink.appendChild(document.createTextNode(title));
  					 } else {
					   newlink.appendChild(document.createTextNode('Quote source'));
					   }
				    newdiv = document.createElement('div');
				    newdiv.className = 'source';
				    newdiv.appendChild(document.createTextNode('\u2014 '));
				    newdiv.appendChild(newlink);
				    quotes[i].appendChild(newdiv);
				  } else {
				    newdiv = document.createElement('div');
				    newdiv.className = 'source';
				    newdiv.appendChild(document.createTextNode('\u2014 ' + cite));
				    quotes[i].appendChild(newdiv);
				  }
			 } else if ((title) && (title != '')) {
			   newdiv = document.createElement('div');
			   newdiv.className = 'source';
			   newdiv.appendChild(document.createTextNode('\u2014 ' + title));
			   quotes[i].appendChild(newdiv);
			 }
	 }
}

/* window.onload = function(e) {
extractBlockquoteInfo();
} */

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

CSS

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

blockquote {
 	font-style: normal;
 	margin: 20px 40px;
}

blockquote div.source {
 	color: #555;
 	margin-top: -1em;
 	text-align: right;
}

Head

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


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

Body

Paste this code into the BODY section of your HTML document


<blockquote cite="http://fmg-www.cs.ucla.edu/fmg-members/popek/" title="Gerald Popek">
<p>Science is supposedly the method by which we stand on the shoulders of those who came before us. In computer science, we all are standing on each others' feet.</p>
</blockquote>

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