Sticky Note - Tested in IE 7.0, Netscape 8.1.3, Opera 9.21, Firefox 2.0.0.4, AOL Explorer 1.5 and Safari 3.0

Sticky Note is an attractive DHTML script that pops up at the center of the page to display anything of your choice. It's an effective yet graceful way to reach out to your visitors. To make this script truly usable, we've added the following features to it:

3 different modes of display
1) Every time the page loads
2) Once per browser session using cookies
3) Or, random frequency of 1/x, where x is customizable.

Toggle the "fading" effect on and off.

Specify the duration of the fading effect (ie: 1 second).

Specify whether sticky note should automatically disappear after x seconds
(default is by manually clicking on a link).

Specify whether sticky note should follow the user around even if he/she scrolls the page.

Script functional in IE5+, NS6+, and Opera 7+, and simply does not appear in older DHTML browsers.

Note that the fading effect is slightly different in IE5+ and NS6+ due to two different technologies used. In Opera7, there is no effect.

We have tested the code in IE 7.0, IE 6.0, Firefox 2.0.0.4, Firefox1.5.0.2, Opera 9.21, Opera8.54, Netscape 8.1.3, Netscape8.1, AOL Explorer 1.5 and Safari 3.0. This script worked well in all platforms with the exception of Opera8.54 where the effect will Not" be seen. It does degrade well and you will not get any error messages.

D epending on your knowledge of HTML and java scrips, this is an easy, minimal reconfigurations, two part script. One part goes in the <HEAD> section of your document while the other part goes in the <BODY> section of your document. Below we will show you where the reconfigurations are to adapt this script to your site.

<HEAD> Section Reconfigurations

<HEAD> SECTION INFO NOTE

Edit the below style sheet to configure the basic look of the Sticky Note. Then, refer to the comments contained inside the script to set the variables.

T he next part of the reconfigurations ( also in the <HEAD> section ) refer to how the
"Sticky Note" will pop up. ( Timing, Fade etc. )

***********************************************/

//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.

var displaymode="always"

var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
var autohidebox=["yes", 15] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
var IEfadelength=1 //fade in duration for IE, in seconds
var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)

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

B elow is the last part of the code where you configure your message inside the "Sticky Note" pop up. This is enclosed within an absolute positioning <DIV> tag. You do not need to be too concerned about positioning. It is preset to position itself in the middle of the page upon opening. This part of the script is the only part that goes in the <BODY> section * of your document.

<BODY> Section Reconfigurations

<DIV id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">

INSERT ANY HTML TO DISPLAY HERE. DO NOT REMOVE OUTER MOST </DIV>.

<div align="right"> <a href="#" onClick="hidefadebox();return false"> Close This Box</a>
<div>
</DIV>

For your Information: We suggest you leave the above link for [ Close This Box ] inside the "Sticky Note" for obvious reasons. This gives your viewer the choice of closing the pop up manually unstead of having to wait for it to close on it's own.

* In regards to the <BODY> section of code. We suggest you place it just above the closing </BODY> tag. Reason being is quite simple. Since it is an absolute positioning tag, by placing it at the bottom of the page gets it out of the way of anything else you have or will add on the page. It is a completely separate entity and can be isolated to avoid any other coding within the document. No matter where you place it , it will still appear in the center of the page on pop up. It is also what is called a "static" effect. This means it will appear on top of anything else on the page.

Little Extra Not Included In The Script: The last this we shall cover is to make the <HEAD> section of the script into an external.js file and called from an external location. Reason you may want to do this is quite simple. This section of code is a little large and bloated. Why bloat your document (page) with all this code. Just make it into an external.js file. Do not confuse this section of code with the CSS style code which is also in the <HEAD> section. If you need a little refresher on howto, see below.

The <HEAD> section of code starts and ends with opening and closing JavaScript tags, See below:

Opens With:
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here
Closes With:
</script>

Remove the opening and closing JavaScript tags.

Copy/cut and paste everything in-between into a notepad and save it as stickyNote.js*

The newly created (Saved As) file will look something like this

Upload the newly created stickyNote.js into your directory

Paste the below snipplet of code into the <HEAD> section of your document to call stickyNote.js

<script type="text/javascript" src="stickyNote.js"> </script>

If you have uploaded the stickyNote.js into a different directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

* We named our external.js file stickyNote.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

If you would like to see an example of this effect with the use of an external.js file in the <HEAD> section, grab the below link and you are there.
[ Sticky Note With External.JS File ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. 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 ]