Post-it notes on web pages
Posted on Tuesday, July 17, 2007 at 1:57 PM
Post-it notes are in every day use on desktops (including monitor desktops) and are a useful reminder of important details needing action. Well. How about post-it notes on a web page ? Why, you ask ? Well, they are a very good way of temporarily displaying information without having to clutter up the page on a permanent basis.
I have searched for a long time for a simple way of implementing post-it notes on web pages, and finally found a rather nice solution by Benjamin Keen.
If you open the home page of this blog you will see at the top just underneath the yellow box a link "About this site..." If you click this link a post-it note will open. Clicking the note will close it.
This solution uses a JavaScript file together with special formatting of the HTML code. This link contains all the information you need (I suggest you inspect the source code) together with a download link to the JavaScript file.
To assist you here is a summary.
NOTE that all postits on a single page MUST have unique ID's such as postit1, postit2 etc
First of all you will need to download the JavaScript file and upload it to your web server. Then you will need to add <script type="text/javascript" src='postit.js'></script> to the <head> section of your web page. I would also suggest that you add <style type='text/css'> #postit1 { display: none; } to the <head> section to make absolutely sure that the postit (or a list of postits separated by commas) do not display when the page loads.
Right. Now we are in a position to add out postit. The example contained on my home page consists of the following HTML code.
REM this is the call to the JavaScript file
<div
id="postit1" onclick="return showPostit(this.id)">
REM This puts a nice bar header at the top and
then comes the actual text (which can include hyperlinks
<div
style="background-color: #336699; padding: 2px; color: white">About this
site...</div>
REM Now the actual text of the postit, which may
include hyperlinks
<br>This site
contains just a few of my random thoughts on computers, software, the
web, and much, much more. <br><br> It is updated on an occasional basis,
and I have an RSS feed available. <br><br> This RSS feed will keep you
informed of all new postings. <br><br> To access the feed, simply copy
<a href="http://www.gbtamc.co.uk/blog/rss.xml">THIS LINK</a> into your
feed reader. <br><br> <b>Click this panel to close...</b><br><br></div>
REM and finally the actual link that appears on
the web page
<br><a href="#"
onclick="showPostit('postit1')" style="width: 300px;">About this
site...</a>
Of course you can adjust the colour of the header bar to suit your web page design.
HAVE FUN !
Technorati Tags: gbtamc, postit, post-it, postits, post-its, postit notes, post-it notes
