Cut & Paste Post-it note

Home / Free JavaScripts / Messages / Here

Cut & Paste Post-it note

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

Example:

[Close It]

Reminder:

Looking for free Java applets?
Be sure to check out our sister site Freewarejava.com

Looking for more scripts?
Visit our partner Dynamic Drive for free, original DHTML scripts and components.

Directions

Step 1: Copy the below into the HEAD section of your page:

Alter its values to control the post-it note's width and coloring.

Step 2: Moving on, insert the below to the BODY section, preferably at the bottom of page:

<div id="postit" style="left:150px;top:150px"> <div align="right"><b><a href="javascript:closeit()">[Close It]</a></b></div>  <b>Reminder:</b><br> <p><font size="2" face="Arial"><a href="http://freewarejava.com" target="_new">Looking for free Java applets?<br> </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?<br> </a>Visit our partner Dynamic Drive for free, original DHTML scripts and components.</font></p>  </div> <script> //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/// var ns4=document.layers var ie4=document.all var ns6=document.getElementById&&!document.all if (ns4) crossobj=document.layers.postit else if (ie4||ns6) crossobj=ns6? document.getElementById("postit") : document.all.postit function closeit(){ if (ie4||ns6) crossobj.style.visibility="hidden" else if (ns4) crossobj.visibility="hide" } function get_cookie4(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie4.length > 0) { offset = document.cookie4.indexOf(search) if (offset != -1) { // if cookie4 exists offset += search.length // set index of beginning of value end = document.cookie4.indexOf(";", offset); // set index of end of cookie4 value if (end == -1) end = document.cookie4.length; returnvalue=unescape(document.cookie4.substring(offset, end)) } } return returnvalue; } function showornot(){ if (get_cookie4('postdisplay')==''){ showit() document.cookie4="postdisplay=yes" } } function showit(){ if (ie4||ns6) crossobj.style.visibility="visible" else if (ns4) crossobj.visibility="show" } if (once_per_browser) showornot() else showit() </script> <script language="JavaScript1.2"> //drag drop function for ie4+ and NS6//// ///////////////////////////////// function drag_drop(e){ if (ie4&&dragapproved){ crossobj.style.left=tempx+event.clientX-offsetx crossobj.style.top=tempy+event.clientY-offsety return false } else if (ns6&&dragapproved){ crossobj.style.left=tempx+e.clientX-offsetx crossobj.style.top=tempy+e.clientY-offsety return false } } function initializedrag(e){ if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){ offsetx=ie4? event.clientX : e.clientX offsety=ie4? event.clientY : e.clientY tempx=parseInt(crossobj.style.left) tempy=parseInt(crossobj.style.top) dragapproved=true document.onmousemove=drag_drop } } document.onmousedown=initializedrag document.onmouseup=new Function("dragapproved=false") </script>

Here you can specify the note's left/top coordinates, its content, and finally, its display frequency.

Now post it!

Dynamicdrive.com DHTML code library
There's only one thing better than free JavaScripts, and that is free DHTML scripts. Dynamic Drive offers the web's most comprehensive collection of free, original DHTML scripts and components, all of which ultilize the latest in DHTML/ JavaScript technology. Visit Dynamicdrive.com today!