New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE6+ Opr8+

Sticky Note script v2.0

Author: Dynamic Drive

Feb 7th, 11': Script upgraded to v2.0, which supports multiple sticky notes on the same page, Ajax content etc.

Description: Sticky Note lets you displays floating content anywhere on the page that remains in view even when the page is scrolled. Each sticky note content can be defined either inline on the page, or inside an external text file and fetched via Ajax instead. Dictate whether the note should automatically disappear after x seconds, limit its display to once per browser session or randomly based on a percentage, and more. It's an effective yet graceful way to display content in a catching way. 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.
  • Content for each sticky note can either be derived from the inline markup on the page, or inside an external text file and fetched via Ajax.
  • Specify whether sticky note should be fixed on the page (using CSS's positon:fixed) or not.
  • Toggle the "fading" effect on and off.
  • Specify whether sticky note should automatically disappear after x seconds (default is by manually clicking on a link).

Well, run along and enjoy this script now!

Demo: Show first sticky note again

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.


Directions: Developer's View

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

Select All

The above code references the following two external files, which you should download (right click, and select "Save As"):

Edit the style sheet to configure the basic look of the Sticky Note.

Step 2: Insert the below sample HTML anywhere in the BODY section of your page, which contains the markup for the first sticky note used in the demo:

Select All

 The second sticky note's markup is defined inside stickydata.txt instead

To set up a sticky note on your page, inside the HEAD section of your page, call the constructor function new stickynote(setting) with the desired settings:

var unqiuevar=new stickynote({
 content:{divid:'test', source:'inline'},
 showfrequency:'always',
 hidebox:5
})

where "uniquevar" should be an arbitrary but unique variable for each instance of sticky note on your page.

new stickynote(setting) function reference

The following describes all the settings of the constructor function stickynote() for your reference. Only the first setting "content" is required:

setting Description
content: {divid:'noteid', source:'inline|url'}

Required

Specifies the ID of the DIV that contains the sticky note, and whether the script should look for this DIV inline on the page, or inside a specific external file on your server and fetched via Ajax instead. If your sticky DIV is defined inline on the page, set this option to something like:

content: {divid:'stickynote1', source:'inline'}

where "stickynote1" is the ID of the sticky note DIV on the page, for example:

<div id="stickynote1" class="stickynote">
Sticky Note content here
</div>

The above DIV would be defined within your page itself (hidden intially due to the CSS class) and given a unique ID attribute value.

If your sticky DIV is defined inside an external file on your server instead, for example, "stickydata.txt", set this option instead to:

content: {divid:'stickynote2', source:'somepath/stickydata.txt'}

where "stickynote2" is simply the ID of the sticky note DIV defined inside stickydata.txt, and "source" should be the path to this file relative from the current page. You're free to use absolute URLs when specifying this source, though it must originate from the same domain as where your page resides in due to Ajax's same domain origin restriction:

content: {divid:'stickynote2', source:'http://dynamicdrive.com/somepath/stickydata.txt'}

pos

defaults to ["center", "center"]

Sets the position of the sticky bar relative the browser window in the form [xpos, ypos]. You can either enter an explicit pixel value for each field, or one of the keywords "left", "center", "right" for the xpos field, and "top", "center", "bottom" for the ypos field, respectively. Here are some examples:

pos:[10, 10] //10px horizontally and vertically from browser viewpoint
pos: [50, "center"] //50 px horizontally  and centered vertically
pos: ["center", "center"] //dead center on page
pos: ["right", "bottom"] //bottom right corner of viewpoint

hidebox

defaults to 0

Sets whether the sticky note should automatically hide itself after x seconds from appearing. A value of 0 means never.

showfrequency

defaults to "always"

Sets how frequent the sticky note should appear whenever the page loads. Valid values are:
  1. "always": Sticky note appears each and every time the page loads.
  2. "session": Sticky note appears once per browser session.
  3. integer: Sticky note appears randomly based on the probability of 1/integer. For example, by specifying a showfrequency value of 2, the changes of the sticky note appearing would be 1/2, or around 50% each time the page loads.
fixed

defaults to true

Boolean variable that determines whether sticky note should appear fixed on the page, remaining in the same position relative to the browser viewpoint even when the user scrolls.
fade

defaults to true

Boolean variable that determines whether sticky note should fade into view when appearing.

All together, the following creates a sticky note with content fetched from a file "stickydata.txt", is positioned at the upper right corner of the browser, shows up 1/3 of the time when the page loads, and dismisses itself after 10 seconds:

var unqiuevar=new stickynote({
 content:{divid:'stickynote2', source:'stickydata.txt'},
 position: ["right", "top"],
 showfrequency:3,
 hidebox:10 //<--no comma following last setting!
})

Showing and Hiding a Sticky Note on demand

Once a sticky note appears on the page, it can be hidden or shown again on demand. Just call the public method:

stickynoteinstance.showhidenote("show|hide")

whereby "stickynoteinstance" is the name of the unique variable assigned to the new stickynote() function when invoking it (ie: uniquevar). Pass in a parameter of "show" or "hide" to hide the sticky note in question, respectively. Lets create some links to manually show/hide the two sticky notes above: