Just click here or on the original link to hide it!
Since all they do is hide and show HTML code on your page, you can put in things like hyperlinks:
Latest movie trailers...
Slashdot news...
Javascript Post-its - Download
This simple script allows you to add inline, clickable comments to your webpages without using up any space. The visitor can just click on a hyperlink, and view any sidenotes you wished to make - much like a footnote. You can have as many post-its as you want on your page, and have full control over each of them look.
Let's get fancy
How about this one? Or maybe this one? You also have control over these features on a per-post-it basis:
- The quadrant in which it displays: top-left, top-right, bottom-left, bottom-right.
- The default height, width, and background color.
Getting it going
- Upload the postit.js code onto your server. For the sake of this example, I'm going to assume it's in the same directory as the page you wish to use it in.
- Add this code somewhere in between your <head>...<head> tags.
<script type="text/javascript" src="postit.js"></script>
- Next, change your page's body tag to this:
<body onload="initializePostits();">That will hide all your post-its when your page first loads.
- Now, anywhere in your page (it doesn't matter) create your first
post-it, like this:
<div id="postit1" onclick="return showPostit(this.id)">You can put whatever HTML you want within it. By default, the post-it will resize it's height to accomodate the amount of content you include. Note: each post-it must have it's own unique id, of the form id="postitX" - where "X" is any integer.
...
</div> - Finally, you need to provide a link from somewhere in your page to the
post-it, like so:
<a href='#' onclick="return showPostit('postit1')">link text here!</a>And you're done!
Configuration Options
As demonstrated above, you to configure each post-it to however you want. Consider the following sample:
The "showPostit" function can take up to 5 parameters, only the first of which is required.
- postit1 - this first field should contain the unique id of the postit to hide / show. REQUIRED FIELD!
- 3 - the second field contains the quadrant where you wish the post-it to appear (relative to the location of the mouse click). 1=top-left; 2=top-right; 3=bottom-left; 4=bottom-right. By default, it will post to the bottom right. (Enter null if you want to set the later fields, but wish this to use the default value).
- 200 - the default width. Set to 200 by default (may be null).
- 200 - the default height. Set to auto-resize by default (may be null).
- green - background color. Set to #FFFFCC by default.
Advanced Options
At the top of postit.js, you'll find a section labeled "Configuration Settings". This contains the default style of the postits. If you want all post-its to have a different style by default, that's the spot you'll want to modify!
Following this are the _x_offset and _y_offset variables. They determine the initial horizontal and vertical distance in pixels from the mouse click. By default they're set to 10px each. Negative values also work fine.
On some pages, you may find that the browser renders the whole page then hides the post-its. This can result in some rather unsightly page shifting. To get around this, manually hide the post-its in a style sheet somewhere in between your page <head></head> tags, like this:
#postit1, #postit2 { display: none; }
</style>
Tested on Netscape 6.1+, IE 5.5+, Mozilla 1.2.1+, Firebird 0.7+, Opera 7.02+ and Safari
If you encounter any bugs or have feature suggestions, please contact me.
