Opera Sticky Notes

A way to add sticky notes to certain websites using JavaScript inside CSS.

15 July 2004 · Last updated: 15 October 2006

I have managed to create a test page that adds a sticky note to a website using CSS. Amazingly, you can add JavaScript to a stylesheet and it'll be parsed! Luckily it works in Opera. You can hence add the code to your user stylesheet so it overrides the styles on a web page.

Here's the standalone demo - the sticky note is not in the HTML, but entirely generated from CSS.

Note how it works: JavaScript creates a new div and adds it to the page. It then adds a unique ID of "note" to the tag, so it can be styled. 'InnerHTML' is used to add the text inside the div.

To try it out, download this stylesheet and save it in the directory given in your Opera Preferences for Page Style, where it says "My style sheet". (You might need to create the "styles" folder first.) Make sure you then click "Configure Modes" and tick "My style sheet" in the Author Mode list. Click "Apply" also to make it work. (Note: if you change the user style, untick and tick it again and re-apply it to show the changes.)

Now refresh the main page of this site, as I've used a CSS Signature - a unique site reference in the body tag. Any sites that use these should also work. Here's a screenshot of what you should see.

Useful Info

EMAIL: www.designdetector.com (replace the 1st dot with "@")

NEWSFEED: Subscribe to news of fresh posts and site updates. (RSS 2.0 compatible newsreader required.)

Disclaimer

Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.

All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.

This website is © 2008 Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.

This page was last updated on 15 October 2006.

What's New

Recent Finds


View previous finds


Current Reading

The Suspicions Of Mr Whicher (Or The Murder At Road Hill House) by Kate Summerscale
5%
Genesis: Chapter & Verse by Tony Banks, Phil Collins, Peter Gabriel, Steve Hackett & Mike Rutherford
70%
Digital Photographer's Handbook by Tom Ang
70%