Next Prev

Side Notes

It's all about tangents. No, not those kinds of tangents. We're talking about the kind where you'll be sharing a thought and you sort of, umm, go off elsewhere. Some people call them asides, digressions, departures...you get the idea.

We are of the belief that footnotes - at least the ones worth reading - suck. They suck because they are elsewhere, usually far away from the line-of-sight we're focused on when we read. It would be nice to be able to optionally just glance over and take that brief little detour if we so choose. It's footnotes on steroids: sidenotes.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="http://www.ajaxdaddy.com/web20/sidenotes/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<title>Sidenote Demo</title>
	
	<link href="css/sidenotes.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<h3><a id="toggle" href="#">Hide Sidenotes</a></h3>
	<div id="container">
		<h1>Unobtrusive Sidenotes</h1>
    <p>A Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="sidenote" title="This is the first sidenote. It's very easy to add sidenotes to your text. You simply wrap your text with a specially marked span tag. Note that the first color is blue. You can change style and color of sidenotes by simply editing the CSS.">In varius nulla vel nisi.</span> Sed interdum nisi id ligula. Nullam sit amet metus. Mauris facilisis ligula ac magna. Aenean sodales. Aliquam erat volutpat. Etiam vulputate pretium felis. In blandit diam at libero. Sed semper leo vel justo. Tellus a dui. Vestibulum a erat. Quisque condimentum sollicitudin enim. .</p>
		<p>quis venenatis velit quam egeturna. <span class="sidenote" title="This is the first sidenote. It's very easy to add sidenotes to your text. You simply wrap your text with a specially marked span tag. Note that the first color is blue. You can change style and color of sidenotes by simply editing the CSS.">In varius nulla vel nisi.</span> Sed interdum nisi id ligula. Nullam sit amet metus. Mauris facilisis ligula ac magna. Aenean sodales. Aliquam erat volutpat. Etiam vulputate pretium felis. In blandit diam at libero. Sed semper leo vel justo. Tellus a dui. Vestibulum a erat. Quisque condimentum sollicitudin enim. Duis lacinia euismod ipsum. Vestibulum ut velit. Sed adipiscing lectus a lectus. Aenean purus urna, sodales vitae, Cras ornare pharetra augue. Ac enim. Phasellus nec nisl sed sem auctor commodo. Curabitur dapibus bibendum enim. Duis posuere ultrices lacus. Fusce odio odio, vestibulum ultrices, cursus sit amet, convallis vestibulum, mauris. Nullam sapien. Aliquam erat volutpat. <span class="sidenote" title="This is the second sidenote. Notice that you can also add markup to sidenotes. You can add &lt;em&gt;italics&lt;/em&gt; or &lt;strong&gt;bold&lt;/strong&gt; text. You can also add hyperlinks to your text. This &lt;a href='http://www.yahoo.com'&gt;link&lt;/a&gt; goes to Yahoo.">Cras sem augue</span> Aliquam erat volutpat. Cras vitae odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eget nibh sed ligula commodo fringilla. Nulla vel nisi at elit porta gravida. Aenean justo.</p>
		<p>Praesent sed est nec mi <span class="sidenote" title="Another neat capability of sidenotes is the ability to embed images within them. Here's a lovely little image of a duck:&lt;img src='http://www.arc90.com/_img/duck.jpg'&gt;">Quisque lorem.</span> elementum congue. Nam est est, aliquam nec, laoreet nec, volutpat a, tortor. Mauris arcu lorem, consectetuer ac, vulputate vitae, fringilla ut, erat. Nulla ultrices. Aenean gravida quam pulvinar nunc. Donec luctus vestibulum justo. Nulla molestie, pede id fringilla semper, urna lectus dapibus nisl, vel feugiat sapien leo nec nulla. Donec nec est vel nisl sollicitudin euismod. Vivamus dictum imperdiet urna. Maecenas malesuada blandit lectus.</p>
		<p>Cras lobortis sagittis massa. <span class="sidenote" title="Donec sed ipsum. Aenean ultricies, enim in pellentesque vestibulum, risus ante scelerisque lacus, eget dapibus lectus purus vel sapien. Etiam vitae mauris quis risus semper pretium. Vestibulum nisl velit, gravida non, dignissim sit amet, pharetra a, dui. Nullam mi. Ut porta euismod eros.">Donec dignissim.</span> Egestas orci. Nulla eget nulla sit amet urna tincidunt fermentum. Vestibulum vel quam eu orci malesuada rutrum. Cras sit amet metus. Sed ut massa a risus varius dignissim.</p>
		<p>Praesent gravida eleifend mi. In vulputate volutpat augue. Praesent lacinia porta nunc. Sed commodo purus quis tortor congue fringilla. In mollis odio ac libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis orci sapien, elementum eu, euismod sed, volutpat pretium, nunc. Nullam pharetra elementum orci. Mauris volutpat. Quisque varius tristique nunc. Quisque scelerisque laoreet risus. Nulla facilisi. Proin vitae sem. Sed iaculis. Donec ac odio eget pede cursus varius. Vivamus posuere neque sed tortor. Vivamus luctus elit nec urna. Aenean suscipit consequat lectus. Fusce convallis arcu accumsan erat.</p>
	</div>
  <script language="JavaScript" type="Text/JavaScript" src="javascript/arc90_sidenote.js"></script>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Side Notes

Comment on this example