Post-it note ~ Broadcast special events or news on your site. Tested in IE5.5, IE6.0, Netscape7.02, Netscape8.0, Opera8.0 and Firefox1.0.4

T his is a cross browser "post-it note" script. Use it to broadcast special events or news on your site. Easily dismissed, the script also allows you to specify the frequency of its appearance (either once per browser session, or every time the page containing it is loaded). And last but not least, in IE4/NS6, you can drag the note around.

W e have tested the code in IE5.5, IE6.0, Firefox1.0.4, Opera8.0 and Netscape7.02 and Netscape8.0. This script worked well in all platforms with no variations observed.

I f you notice on our "Post-it", you can see the different tags we attached to each effect within the post-it. This was done as an example for you to see. In the actual one, you will not see the tags, just the effect of them.

D epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. There are reconfigurations that can be done in both sections. See below:

<HEAD> Section Reconfigurations

These reconfigurations are basically cosmetic. Here you can change the colors, size and width*, of the post-it to blend with your site.
*height will adjust automatically as you add and delete content.

Default

#postit{
position:absolute;
width:250;
padding:5px;
background-color:lightyellow;
border:1px solid black;
visibility:hidden;
z-index:100;
cursor:hand;
}

-->

Reconfigured

#postit{
position:absolute;
width:300;
padding:5px;
background-color:black;
border:5px solid orange;
visibility:hidden;
z-index:100;
cursor:move;
}

-->

T he above reconfigurations are basically self-explained. Just play around with them until you find a size and color combination that works for you.

A nother thing in the above code you may want to check out are the different cursor effects you can add into this effect. Just grab the below graphic and you are there. If you do not want any cursor effect, just remove the "cursor:hand;" from the code.

T he last thing we will cover in the <HEAD> section is that of the "border:1px solid black;".

1px This denotes how many pixels wide the border around the post-it note is. The higher the number, the wider the border.

black; This is the color of the border.

solid This denotes the border will be solid with no breaks in it. You can change this to "dotted" and have a completely different look. Grab the below link to see how it looks with a "dotted" border.
[ Post-it With Dotted Border ]

<BODY> Section Reconfigurations

T hese reconfigurations are to add the content into your "Post-It" note. As you can see in our post-it, you can add graphics besides links, font commands and text. It is also suggested that you place this section of code at the "Bottom Of Your Document" just before your closing </BODY> tag. See below:

BODY section of code for post-it goes here
</BODY>
</HTML>

<div id="postit" style="left:150px;top:150px">
<div align="right"><b><a href="javascript:closeit()">[Close It]</a></b></div>

T he above reconfigurations are for the positioning of the post-it. The default is set as you see above. Play around with the numbers until it fits your site.

Whatever you do, "Do Not" remove the [Close It] link. If you do, then you won't be able to close the post-it note. You can place it in a different position or location within the defined area for reconfigurations.

<b>Reminder:</b>
<p><font size="2" face="Arial"><a href="http://freewarejava.com" target="_new">
[ Looking for free Java applets? ]</a>
Be sure to check out our sister site Freewarejava.com</font></p>

<p><font size="2" face="Arial"><a href="http://www.dynamicdrive.com" target="_new">
[ Looking for more scripts? ]
Visit our partner Dynamic Drive for free, original DHTML scripts and components.</font></p>

</div>

<script>

A bove it is quite self-explanatory. It is well marked where to put your content. One thing you should be aware of is the attribute for any links you may be inserting. They need to have either the target="_blank" or target="_new attached to the link or when you click the link, the original page will be replaced by the linked to page.

T he last thing we shall cover is where you set how often the "Post-it" will appear. In other words, if you want this post-it to appear every time the page opens, leave the default set as 0. If you only want it to appear once per browser session, set it as 1.

//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

I f you would like to add this effect into your pages, grab the respective below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]