¶ Browser Stickies is a little experiment I knocked together in the lull between SxSW Interactive and SxSW Music. It was mostly to demonstrate to myself that dragging and resizing using JavaScript is not that hard. It certainly isn’t hard when you’ve got a script as a good as Brainjar’s to get started with.
Each Sticky is created on the fly by adding the required elements to the DOM. Note the text mode which enables you to copy the text from any or all of your Stickies in one go – something that can’t be done with conventional Stickies applications.
I had intended to get Browser Stickies all nicely polished and Konfabulator-like before releasing it to the public, but I simply haven’t got time at the mo’, so I’ve presented it in its untested, alpha guise. Please have a play and leave any bug reports and suggestions with this post.
Comments
1
Not sure if you were aiming for IE/Win compatibility, but seems only to work in non-IE browsers. Excellent little piece of kit though.
Coincidentally, one of my co-workers and I had actually been looking at some of Brainjar’s js work this afternoon. There are definitely some handy scripts to be found over there.
2
Jeff – I was hoping it would work in IE6/Win but I’ve only tested in Firefox and Safari. Guess I’ll have to dig out my PC and do a bit more tweaking.
3
Personally I don’t give a damn about IE anymore. It works in Firefox. These could be very handy for my IA and Usability work (see Jeff Veen’s slides)... but how do you “save to text file”? :)
4
excellent stuff…this may spark some more experiments
5
oh, and a suggestion: make the stickies slightly transparent by default (i.e. when “lying around” the current page) and ramp up to fully opaque only on mouseover.
6
Nick – funnily enough it was Jeff’s slides that inspired this in the first place. Note you can’t really save to a text file, but you can switch to text mode and cut and paste into a text editor.
7
Nice :)
Would be better if there was some way of saving state so that the same stickies were available in the same place when user went back to the page. Too much info to hold in cookies though?
8
Saving wouldn’t be too bad(allowed cookie sizes are actually pretty large)... and should definitely be implemented! could have a cookie for each page that this goes on (for all your IA stuff)...
9
Got playing around with this great script and became determined to make it look just like a sticky. Screen capture:
http://zooley.net/stickies.png
And files:
http://zooley.net/stickies.zip
Now I just need to get the dropshadow on there and take care of a few minor bugs.
10
you should throw the Antler! easter egg in there!
11
Hmm. Started adding cookie saving to it. Got it so if you move a sticky or resize and move, it will save some info to a cookie (top, left, width, height, text). It checks for any saved cookies when opening the page. Still need to get it to save multiple cookies, save a cookie on just textarea blur, and on just resizing (doesn’t want to save on just resizing a sticky but not moving… not sure why).
I’m not the brightest drawer in the bulb, so someone else can have a crack at it:
http://zooley.net/stickies.zip
12
compare: http://www.aypwip.org/webnote/ which allows you to save (preserve for later, not write to file) your workspace.
13
I did manage to get dropshadows on the notes but it’s sort of hackish and messy.
http://zooley.net/stickies2.png
http://zooley.net/sticky-drop.zip
Anyway, apologies for the multiple comments. I’ve just been having fun with your script!
14
Shawn – no apology necessary. It’s great to see what you’ve done with the script. Really nice job making the notes more Sticky-like, especially with the shadows. (Drop shadows also end up hackish in one form or another).
15
What would be really interesting is to use some AJAX techniques that would save the text/state of each sticky in a database field when a change is made. Then you’d really be hitting all the hot web technologies in one fell swoop. :)
16
Yeah Jay, that’s what I thought :)
17
Very funky, if only there was a way to save them for later either via cookie or whatever. Could be very handy as a favlet for adding critique on a website?
18
A bookmarklet for that would be an excellent convenience. This is cool.
19
Doesn’t work right with Opera
20
I updated the ajax implementation
Stickies are saved when: newly created, moved or when typing stops for 4 seconds.
21
Well, it seems we had the same idea around the same time.
You have an infinitely better method of sticky creation – I used a big ugly form button which means all my new stickies are created at the same X/Y position on the screen – not very nice at all.
I used cookies to save the contents but an AJAX solution would be more robust (I have an occassional ‘dissappearing sticky’ bug that is caused, most probably, my nasty cookie code!).
Can I rip your drag and drop idea for sticky creation and credit you in the JS comments?
P.S. Mine only work in Moz/Firefox..
Great work/site/scripts.. and your code puts mine to shame..
http://little_yellow_stickies.frequency-decoder.com/
22
bloody hell. i’d just spent some time coding up my own stickies.
i guess it’s what all the cool kids are doing these days.
fwiw, mine has:
i don’t have editing/saving working yet though. maybe all of us who are working on this should combine our efforts into one super-sticky project.
23
Hello. Just wondering what these stickies are about
24
I have made my Ajax implementation downloadable
25
Just wanted to say, nice work all of you.
26
I’ve done an Opera integration and improvement of Brian McAllister’s script. The project page:
http://digilander.libero.it/odnalro/coding/sticky_notes/
27
THIS IS AWESOME, I hope you don’t mind if I use/alter this code for my own use, with credit to you of course.
28
I had just started coding a sticky notes using ajax when I thought I migth see if others had started this already.. sure enuf I find you guys and an ajax implentation to boot!
Well done guys..
PS check out my cow wolispace.com/cow and the start of my game engine wolispace.com/josh – oh yes.. and the start of my clock wolispace.com/tik
29
Excellent Work!
The code is very very clear.
Congratulations to the author.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.