Drop-in content box v2.0

Author:Dynamic Drive

Note: Script completely rewritten May
10th, 11 with host of new features and labelled v2.0

Description: Ensure
that particular content on your page gets the attention it deserves, by
dropping it into view, using this script. Whether it is an important announcement, an
advertisement, or an ode to your pet you feel everyone should read,
the choice is yours! And to strike a good balance between being catchy but
not to the point of becoming a nuisance, the script supports precise frequency control,
letting you specify how often the box should drop in in terms of once per
browser session or every x
minutes, hours, or days. Lets run down the various features and attributes of
drop-In Content Box:

Content to be shown can either derive from an inline DIV on
the page, or sourced from an external file and fetched via Ajax.

Robust frequency control feature to dictate how often the
drop in box should appear on the page-"always", "once per browser session",
or once every x minutes, hours, or days.

Ability to defer the showing of the drop in box, either by x
seconds when the page first loads, or indefinitely; in the later case, the
box is shown on demand.

Easily position the drop in content box in a variety of
ways, from centering it on the screen to displaying it at the lower right
corner of the window.

Specify whether the drop in box should automatically
disappear after x seconds upon revealing.

Ability to show multiple drop in content boxes on the page.

Demos:

This content of this drop in box is defined inline on the page, inside the DIV with id="reminder" This DIV is dropped down using the "easeInExpo" animation option. The box will not automatically disappear until the user explicitly clicks on the "close" button or by calling the user function dropinstance.hide().

where dropboxinstance should be an arbitrary but
unique variable name for each instance of Drop In Box on your page (ie: "mybox1"),
and options is a list of supported options passed into the function, each
separated by a comma (except the very last one or if there's only one option
entered, which then should not contain a comma!). The following lists the
supported options:

setting/ option

Description

source

Required

Specifies the source of the DIV content that
should be used as the drop in content. You have two choices:

If your DIV content is defined inline on the page, simply set
source to the ID of this DIV, prefixed with "#", for example:
source: "#dropbox"

Adds the CSS classes of your choice to the
main container of your drop in box for styling purposes. Separate
multiple CSS classes with a space, for example:

var dropinbox1=new dropincontentbox({
source:['#dropbox', 'dropincontent.htm'], //#id of DIV to show if defined
inline, or [#id, path_to_box_content_file] if defined in external filecssclass:'dropinbox standardshadow', //arbitrary
class(es) to add to the drop in box to style it
showduration:10 //disappear after x seconds?
})

pos

Defaults
to ['center', 'center']

Sets the position (final resting place) of
the drop in box relative to the upper right corner of the window. The
syntax is [x, y], where both values should either be an
integer or the keyword "center" to center the box in that direction.
Here are some examples:

[30, 50] //positions the
box 30px to the right and 50px down from the browser's window edge
['center', 200] //centers the box horizontally and moves it 200px
downwards from the window edge
['center', 'center'] //default value: centers the box inside the window

You can also input negative integers, which lets you position the box
relative to the right and bottom edges of the window (instead of left
and top). For example, to display the box near the lower right corner of
the window, you can use the value [-20, -20]. Here are some more
examples:

[-100, 'center'] //positions the box 100px from
the right edge of the window and centers it vertically
[''center', -10] //centers the box horizontally near the bottom of the
window

freq

Defaults to
"always"

Sets the display frequency of the drop in
box. Possible values are:

"always": Box is displayed every time the page loads. Default
setting.

"session": Box is displayed once per browser session.

"xduration": Box is displayed once every x minutes, hours, or days.
Substitute x with an interger, and duration with "min",
"hours", or "days". For example:

freq: "30min" //box is displayed once every 30
minutes
freq: "2hrs" //box is displayed once every 2 hours
freq: "5days" //box is displayed once every 5 days

Note: Whenever you change the freq setting, such
as from "5days" to "10hrs", the script resets the persisted frequency
so the new setting has a chance to kick in.

showduration

Defaults to 0
(always).

If you want the drop in box to disappear
after x seconds, set showduration to an integer greater
than 0, such as showduration:10

deferred

Defaults to
0.5 (seconds).

Sets a delay before the drop in box is shown
when the page loads in seconds, or even completely stop the box from
showing automatically ("fullon"). The default value is 0.5,
or a delay of 0.5 seconds before each box drops into view.

When you
set deferred to "fullon", the script still initializes the
drop in box but doesn't drop it into view automatically when the page
loads. This is useful if you wish to show the box on demand, such as
with a click on a link. Take the following initialization code for
example:

var dropinbox1=new dropincontentbox({
source:['#mydiv', 'dropincontent.htm'], //#id of DIV to show if defined
inline, or [#id, path_to_box_content_file] if defined in external file
cssclass:'dropinbox standardshadow', //arbitrary class(es) to add to the drop
in box to style it
showduration:10, //disappear after x seconds?
freq:'session',deferred:'fullon'
})

With such an initialization, the "dropinbox1" drop in box won't auto
appear on the page when the page loads. To show it, you need to call one
of the two public methods available to all drop in boxes once they are
initialized, which are:

dropboxinstance.show() //shows the drop down box in question

dropboxinstance.hide() //shows the drop down box in question

where dropinboxinstance should be the name of the variable you
assigned the initialization code to when calling new
dropincontentbox(), in this case, dropinbox1.

fx

Defaults to
"easeOutBounce"

This setting lets you modify the animation
used to reveal the drop in box. The default is "easeOutBounce", which
gives you that bouncing up and down effect. In total 32 different
animations are supported, which are:

fx animation strings (click on
each one to see a live demo)

To use an animation type other than "easeOutBounce",
simply set fx to that animation string, such as
fx:'easeInOutElastic'

fxtime

Defaults to
500 (milliseconds)"

The duration of the drop in animation in
milliseconds. The default is 500, or 1/2 second.

Defining and styling your drop in
box content

As touched on when describing the source
setting, there are two ways to define your drop in content DIV and its
contents. The first is inside an external file on your server, then setting the
source setting to point to this file, such as:

var dropinbox1=new dropincontentbox({
source:['#dropbox', 'dropincontent.htm'], //#id of DIV to show if defined
inline, or [#id, path_to_box_content_file] if defined in external file
cssclass:'dropinbox standardshadow', //arbitrary class(es) to add to the drop
in box to style it
showduration:10, //disappear after x seconds?
freq:'session'
})

For the file path, you can specify an absolute URL instead of
relative URL to the file, though due to Ajax's same domain origin policy, the
file must reside on the same server as the page using the script. For example:

source:['#dropbox', 'http://www.mysite.com/files/dropincontent.htm'],

Inside dropincontent.htm, it
should consist of a single DIV with ID set to "#dropbox" (that defined inside
the source setting), plus the desired contents to show wrapped
inside. That's it.

The other way of defining your drop in box is directly inline on
the page, such as:

<div id="reminder">
This content of this drop in box is defined inline on the page, inside the DIV
with id="reminder" This DIV is dropped down using the "easeInExpo" animation
option. The box will not automatically disappear until the user explicitly
clicks on the "close" button or by calling the user function dropinstance.hide().
</div>

In this case, the source setting can just be set to the ID of
this DIV, ie:

source:['#reminder''],

Styling your drop in box

To style your drop in box(es), the easiest way is just to define
the desired styles inside
dropincontentbox.css as CSS classes, then
assign one or more of these classes to a drop in box using the cssclass setting:

cssclass:'dropinbox standardshadow',
//arbitrary class(es) to add to the drop in box to style it

Deferring the display of a drop in box

You can delay the showing of a Drop In Box, either by x seconds
when the page loads, or indefinitely so the box is only shown on demand. Set the
deferred setting to either an integer (in seconds), or the keyword "fullon"
to not show the box automatically at all:

var dropinbox1=new dropincontentbox({
source:['#mybox', 'dropincontent.htm'], //#id of DIV to show if defined
inline, or [#id, path_to_box_content_file] if defined in external file
cssclass:'dropinbox standardshadow', //arbitrary class(es) to add to the drop
in box to style it
deferred:'fullon',
freq:'session'
})

When you have the above, "dropinbox1" will not automatically
appear. Instead, to show it, you can call one of the two public methods
available to every drop in box once they are initialized, which are:

dropboxinstance.show() //shows the drop down box in question

dropboxinstance.hide() //shows the drop down box in question

So lets say you want to embed links on the page that will clicked on
manually shows or hides "dropinbox1"- the links would look like this: