Sticky Note script v2.0
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
Step 1: Add the below code to the <HEAD> section of your page:
The above code references the following two external files, which you should download (right click, and select "Save As"):
- stickynote.js
- stickydata.txt (sample text file used by demo)
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:
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:
where "stickynote1" is the ID of the sticky note DIV on the page, for example: <div id="stickynote1" class="stickynote"> 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:
where "
|
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 |
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:
|
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: