Blockquotes

Dunstan Orchard Feb 23, 2007

General

Use this script to dynamically place a citation link after any blockquotes on a page. Use it as many times on a page as necessary.

No `cite` or `title`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.

With `title`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.

With `cite`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.

With `cite` and `title`

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.

Notes

Created by: Dunstan Orchard
Web Site: http://1976design.com/
Posted: February 23, 2007

If the cite element contains a URL, print '? Quote source' below the quote as a clickable link.
If the cite element contains only plain text, print '? [the text]' below the quote.
If the cite element is empty or absent then print nothing below the quote.

Source Code

Paste this source code into the designated areas.

External file

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

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Dunstan Orchard | http://1976design.com/ */
// 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('Quoted 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);
  		}
 	}
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/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(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="blockQuotes.js"></script>

Body

Paste this code into the BODY section of your HTML document


<h2>No <code>cite</code> or <code>title</code></h2>
<blockquote cite="" title="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit. </p>
</blockquote>

<h2>With <code>title</code></h2>
<blockquote cite="" title="Chris Jones">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.</p>
</blockquote>

<h2>With <code>cite</code></h2>
<blockquote cite="http://1976design.com/" title="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.</p>
</blockquote>

<h2>With <code>cite</code> and <code>title</code></h2>
<blockquote cite="http://1976design.com/" title="Chris Jones">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.</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

Blockquotes

General

No `cite` or `title`

With `title`

With `cite`

With `cite` and `title`

Notes

Source Code

External file

CSS

Head

Body

Leave a Response

Attention JavaScript Coders

Go Deeper

Blockquotes

General

No cite or title

With title

With cite

With cite and title

Notes

Source Code

External file

CSS

Head

Body

Leave a Response

Attention JavaScript Coders

Go Deeper

No `cite` or `title`

With `title`

With `cite`

With `cite` and `title`