Browser stickies | Clagnut § DOM | JavaScript

Published in Brighton, UK

Clagnut

Browser stickies

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.

29 March 2005

§ DOM | JavaScript

29 comments

Next

Previous

Related posts

Keywords

â–º Machine tags

Comments

  1. 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.

    Jeff Smith
    Jeff Smith’s Gravatar
    29 Mar 2005
    22:17 GMT
  2. 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.

    Rich
    Rich’s Gravatar
    29 Mar 2005
    22:23 GMT
  3. 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”? :)

    Nick Finck
    Nick Finck’s Gravatar
    30 Mar 2005
    01:52 GMT
  4. 4

    excellent stuff…this may spark some more experiments

    patrick h. lauke
    patrick h. lauke’s Gravatar
    30 Mar 2005
    02:12 GMT
  5. 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.

    patrick h. lauke
    patrick h. lauke’s Gravatar
    30 Mar 2005
    02:14 GMT
  6. 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.

    Rich
    Rich’s Gravatar
    30 Mar 2005
    08:41 GMT
  7. 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?

    Julian
    30 Mar 2005
    10:42 GMT
  8. 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)...

    John
    30 Mar 2005
    15:41 GMT
  9. 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.

    Shawn Rice
    30 Mar 2005
    16:28 GMT
  10. 10

    you should throw the Antler! easter egg in there!

    jon
    30 Mar 2005
    17:50 GMT
  11. 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

    Shawn Rice
    30 Mar 2005
    21:38 GMT
  12. 12

    compare: http://www.aypwip.org/webnote/ which allows you to save (preserve for later, not write to file) your workspace.

    Josh
    Josh’s Gravatar
    30 Mar 2005
    23:06 GMT
  13. 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!

    Shawn Rice
    31 Mar 2005
    19:21 GMT
  14. 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).

    Rich
    Rich’s Gravatar
    1 Apr 2005
    11:52 GMT
  15. 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. :)

    Jay Reding
    1 Apr 2005
    18:05 GMT
  16. 16

    Yeah Jay, that’s what I thought :)

    p8
    1 Apr 2005
    21:35 GMT
  17. 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?

    Tom
    Tom’s Gravatar
    3 Apr 2005
    18:15 GMT
  18. 18

    A bookmarklet for that would be an excellent convenience. This is cool.

    Darren Clagle
    3 Apr 2005
    18:58 GMT
  19. 19

    Doesn’t work right with Opera

    Rad Martinovic
    3 Apr 2005
    21:31 GMT
  20. 20

    I updated the ajax implementation

    Stickies are saved when: newly created, moved or when typing stops for 4 seconds.

    p8
    7 Apr 2005
    15:57 GMT
  21. 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/

    Brian McAllister
    9 Apr 2005
    09:08 GMT
  22. 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:

    • drop shadows
    • works in win IE
    • double click on the title bar to roll it up

    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.

    anders
    anders’s Gravatar
    16 Apr 2005
    19:04 GMT
  23. 23

    Hello. Just wondering what these stickies are about

    Breeze
    29 May 2005
    20:49 GMT
  24. 24

    I have made my Ajax implementation downloadable

    p8
    5 Jun 2005
    12:21 GMT
  25. 25

    Just wanted to say, nice work all of you.

    Duncan Ponting
    Duncan Ponting’s Gravatar
    21 Jul 2005
    19:36 GMT
  26. 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/

    Antonio
    Antonio’s Gravatar
    17 Oct 2005
    11:28 GMT
  27. 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.

    coldhandshake
    29 Oct 2005
    01:05 GMT
  28. 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

    wolis
    17 Dec 2005
    18:05 GMT
  29. 29

    Excellent Work!
    The code is very very clear.
    Congratulations to the author.

    Dan
    3 Mar 2006
    16:29 GMT

Add your comment

Comments are now closed on this post. If you have more to say please contact me directly.

Outside interest

Top Referrers

mobile comment