Excellent work, I may actually use this one day since I'm often writing articles and I make superfluous use of footnotes.

Thanks, awesome work!

Posted on May 26, 2006 10:45 PM by Wayne

maybe it is good to use the particle tree lightbox.js technique for these footnotes at http://particletree.com/features/lightbox-gone-wild/

or maybe a technique like
http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html
to show or hide classes for the sidenotes with relative positioning on the actual span class

Posted on May 28, 2006 8:08 PM by ben scott

Wow -- what a great idea to share. Thanks!! I just added this site to my Favs. Thanks again!

Posted on May 30, 2006 4:35 PM by Kevin

just added it to my blog to try it out - you can see some of the results at

http://vielmetti.typepad.com/vacuum/marginalia

which is where I've been gathering notes on writing in the margins.

Posted on May 30, 2006 8:38 PM by Edward Vielmetti

These rule.
In 10 years all web pages will look like this.

Posted on May 31, 2006 1:56 AM by Martin Schneider

Wicked script! this is just what im after. thanks, :)

Posted on May 31, 2006 8:44 PM by Backgrounds

Very cool, and they validate, but not without lots of warnings for those embedded tags. I wonder what future standards/validators will do with these. Unfortunately, I have a feeling that it won't be pretty, and I don't think it would be wise to use these in any kind of professional capacity.

And what about accessibility - what does JAWS do when it hits these gigantic title attributes with psuedo-XHTML tags?

I'd try to make myself useful, but I don't have a copy of the software. All I can say is that I think I would rather stick with a more accessible and valid solution along these lines:

-----
Blah blah sidenote title blah blah.

Sidenote text goes here with all the benefits of normal XHTML and none of the questionable validation/accessibility issues ;)

-----

Posted on May 31, 2006 8:52 PM by Reid Young

@ Martin Schneider "In 10 years all web pages will look like this."

Design moves so fast now that these will be out of style in a year if not less. The validation issues are still there as well. Regardless, it's an interesting concept and definitely has its uses.

Posted on May 31, 2006 9:03 PM by Michael Aleo

this script is cool,

I dont want to display the content in span tag, so i added this in the stylesheet
.arc90_sidenoteLNK { padding: 0 .3em; display:none }

so it works, however,
it is not recognizing the Ending quotes,

i have something like this

Do you Know?
ABC">

and instead of stopping the box at ABC, it is continuing till the end of the content of the page. how can i stop that ? basically not recognizing the ending double quote of the "title" attribute

Posted on May 31, 2006 9:29 PM by Murali

@Reid Young

I'm concerned with validation etc as well. I also don't like javascript (rooted in a irrational terror of interpreted languages), so my solution doesn't use it.

The way I addressed sidenotes was just to throw the note in it's own [span] within the term-to-be-highlighted's span (ps - I used [] to keep the tags from being rendered):

jibber jabber jobber [span class="term"] highlighted term [span class="def"]definition or notes on hightlighted term[/span][/span] more jibber jabber

And then I used CSS to position the inner span. Unforuntately, I'm no good with CSS and haven't figured out a way to make the text wrap around them, so my sidenotes float outside the main body of text, which kind of sucks. Hopefully someone will come up with a better way to do the CSS.

Here is a screenshot

Cheers,
Cam

Posted on May 31, 2006 9:46 PM by Cameron Boehmer

fixed link from screenshot above

Posted on May 31, 2006 9:48 PM by Cameron Boehmer

Is there anyway to port this as a plugin for Wordpress? I host my friends' blogs and while I am able to just drop in the javascript reference and the stylesheets, my friends aren't interested in tinkering with the codes.

It'd be real handy if there's a plugin for this that they'd just activate and deactivate.

Posted on May 31, 2006 10:02 PM by Jay

Has anyone had success making these work within a Blogger post yet?

Posted on June 1, 2006 12:41 AM by Josh

Any way of getting this working without the span? I don't want highlighted words, just the sidenote - in the above example on this page the highlighted word is 'there'.

This is a great idea with really poor documentation.

Posted on June 1, 2006 5:12 AM by Jackdaw

@Reid Young

I looked at the example with Fangs, that Firefox extension that claims to print text the way the screenreader would read it. Weirdly all connection between the highlighted words and their title tag, the sidenote content, is lost. I don't completely trust Fangs, and I don't really understand why it reads the title of the span before the paragraph, but it's not looking good, although the source code looks promising.

Posted on June 1, 2006 7:12 AM by Matthias

I'm not seeing anything here that couldn't be achieved by floating divs and a couple of CSS classes. What makes it worth all this javascript? The only javascript bit I can think of a need for is the one that toggle's the floating div classes visibility.

Posted on June 1, 2006 7:24 AM by Craig Andrews

I think the real goal here was to make it easy for non-programmers. You don't need any sort of working knowledge of javascript or CSS to get this working.

I think there's stil a final feature that will really make this effective: integrate it with Wordpress and/or Movable Type.

Posted on June 1, 2006 9:35 AM by Richard Ziade

@Richard Ziade:

yup. i'll be waiting patiently for the wordpress plugin. now that said, let's say a plugin is made and released for wordpress, how would it integrate with a theme?

in the end, non-programmers would still need to tweak the css just to get it to work with their themes.

Posted on June 1, 2006 11:14 AM by Jay

Hi everyone, I'm Joel Nagy, a lead developer at Arc90 and the author of Sidenotes.

I understand that some of you have concerns about the warnings in the validation. So I added a simple modification (available in the download, and on the examples page) that allows you to insert the angle brackets as HTML entities using ampersand gt or lt. You can also still use the angle brackets if you would like.

I'm kinda curious why some who have commented don't want the highlighted span tag? The purpose behind the span was to draw the connection between the current thought and the note that relates to that thought. With out the highlight you may not see the connection.

Posted on June 1, 2006 11:29 AM by Joel Nagy

hi! i really love this feature. im not sure i actually have a use for it. as pretty much my whole blog is a sidenote. but i added it anyways. i (dont know if im doing something wrong) cant get the toggle on and off switch to work. im not sure if there is something else i have to download for that or if its just some easy fix im just too much of a n00b to figure it out.
anyways
i love it.
thats all i really wanted to say.

-henrie

Posted on June 1, 2006 5:25 PM by henrie

Hi There.

I really liked your "Unobtrusive Sidenotes" article but there's something else in there that turned me on. The code examples are VERY nice. I'm actually, looking for something like it for a while now and what u did there is very creative.

I would like to ask you if this code allows you to edit the text within the text area as well?

Thanks

Posted on June 2, 2006 12:18 PM by Oded

The simplicity and easy-to-impliment features of this make it so appealing to designers. Though I'm not one to generally shy away from basic HTML or CSS coding, the thought of JavaScripting keeps me up at night. Can't wait to take this idea out for a test drive on my own blog later on!

Posted on June 2, 2006 5:56 PM by jenn.suz.hoy

I also am having trouble getting these to fly on Blogger (using the simple/dummies hosted version).

Paul

Posted on June 21, 2006 1:03 PM by Paul

Ditto re the Blogger interface issues. I am not a guru on code. Not sure what attribute to add (or to disable....) where to make the sidenotes align left/right such that text wraps around the note. I can "align" the image but cannot figure out how to do it w JavaScript. Any assistance would be appreciated.

Posted on July 8, 2006 11:20 AM by Bruce/Crablaw

Nice.

p.s.: fix the empty href's in your demo footer and you'll validate too

Posted on July 22, 2006 7:09 AM by BillyG

on this example http://lab.arc90.com/tools/sidenote/

how do I make the tooltips show up as hidden on original load, rather than they way it defaults now?

Posted on February 2, 2007 6:52 AM by Nick Hayday

Hi, I have no knowledge about ajax. Only about html and jsp. But I need this feature to my project. I tryied to implement your code in my page, but I wasn't able to find out how you made the "hide/show" toggle work. If you could email me or post here the answer I would appreciate (like wich function is used in "onclick" actions and how excactly it works).

thanks

Posted on November 5, 2007 8:56 AM by Tatiana

"I'm kinda curious why some who have commented don't want the highlighted span tag? The purpose behind the span was to draw the connection between the current thought and the note that relates to that thought. With out the highlight you may not see the connection."

I was also looking for a way to not have the span highlight the text. I'd prefer to use it just as a normal sidenote, off on the side on it's own. I don't want to use a colored box whose meaning isn't immediately apparent.

Posted on January 30, 2008 4:27 AM by AT

I was excited to try it, also, but can't get it to work with Blogger. Has anyone had any luck? If so, what did you do?

Posted on February 8, 2008 5:48 PM by anniebluesky

I would like to know if it's possible to combine different methods of sidenotes. I sort of want something between what the Atlantic Monthly was using and the regular sidenotes. Basically, I want the side note to open on the side when I roll over the part of it in the text. and im not talking about the tag which shows the text in the sidenote, I am talking about the actual sidenote. is that possible? setting it up so that the sidenotes show up (not as popups) when I roll over the text?

Posted on March 9, 2008 6:23 PM by Amit Elhanan