Dynamic Drive- Sticky Note script

Sticky Note script

Author: Dynamic Drive

Description: 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.

Well, run along and enjoy this script now!

Demo:

Directions:

Step 1: Add the below code to the <HEAD> section of your page:

Select All
<style type="text/css"> #fadeinbox{ position:absolute; width: 300px; left: 0; top: -400px; border: 2px solid black; background-color: lightyellow; padding: 4px; z-index: 100; visibility:hidden; } </style> <script type="text/javascript"> /*********************************************** * Sticky Note script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit DynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use * Go to http://www.dynamicdrive.com/ for full source code ***********************************************/ //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", 5] //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/////////// if (parseInt(displaymode)!=NaN) var random_num=Math.floor(Math.random()*displaymode) function displayfadeinbox(){ var ie=document.all && !window.opera var dom=document.getElementById iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset var docwidth=(ie)? iebody.clientWidth : window.innerWidth docheight=(ie)? iebody.clientHeight: window.innerHeight var objwidth=objref.offsetWidth objheight=objref.offsetHeight objref.style.left=docwidth/2-objwidth/2+"px" objref.style.top=scroll_top+docheight/2-objheight/2+"px" if (showonscroll=="yes") showonscrollvar=setInterval("staticfadebox()", 50) if (enablefade=="yes" && objref.filters){ objref.filters[0].duration=IEfadelength objref.filters[0].Apply() objref.filters[0].Play() } objref.style.visibility="visible" if (objref.style.MozOpacity){ if (enablefade=="yes") mozfadevar=setInterval("mozfadefx()", 90) else{ objref.style.MozOpacity=1 controlledhidebox() } } else controlledhidebox() } function mozfadefx(){ if (parseFloat(objref.style.MozOpacity)<1) objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree else{ clearInterval(mozfadevar) controlledhidebox() } } function staticfadebox(){ var ie=document.all && !window.opera var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset objref.style.top=scroll_top+docheight/2-objheight/2+"px" } function hidefadebox(){ objref.style.visibility="hidden" if (typeof showonscrollvar!="undefined") clearInterval(showonscrollvar) } function controlledhidebox(){ if (autohidebox[0]=="yes"){ var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000 setTimeout("hidefadebox()", delayvar) } } function initfunction(){ setTimeout("displayfadeinbox()", 100) } function get_cookie(Name) { var search = Name + "=" var returnvalue = "" if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset) if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){ if (window.addEventListener) window.addEventListener("load", initfunction, false) else if (window.attachEvent) window.attachEvent("onload", initfunction) else if (document.getElementById) window.onload=initfunction document.cookie="fadedin=yes" } </script>

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

Step 2: Insert the below HTML within the BODY section of your page, preferably at the very end:

The code of Step 2 is where you enter the HTML you wish to display.

Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

Hide Box