Drop-in content box v2.0
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.
- Customizable drop in effect with a selection of 20+ effects to choose from. Default is "easeOutBounce".
- 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:
Add the below code inside the <HEAD> section of the page:
The above code references the following external files, which you should download (right click, and select "Save As"):
- dropincontentbox.js
- dropincontentbox.css
- jquery.easing.1.3.js (jQuery easing add-on)
- dropincontent.htm (sample file containing one of the boxes' content)
-
(sole image used
by the script. Edit
$closebutton
variable inside dropincontentbox.js to ensure path to it is correct)
Step 2: Insert the below sample code into the BODY section of your page. It contains the markup for the 2nd drop in box used in the demo (the first drop in box is defined inside dropincontent.htm):
And with that you've got the high level overview of how to install the script. Lets get in closer now to understand all the offered options and how to use them.
Setting up the script- in detail
At the core of creating a drop in box is calling the constructor
function new dropincontentbox()
in the HEAD section of your page,
which has the following syntax:
var
dropboxinstance=new dropincontentbox({
option1,
option2,
option3 //<--No comma after last option!
})
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:
More info at "Defining and styling your drop in content box" |
cssclass Defaults to undefined |
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({
|
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 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 |
freq Defaults to "always" |
Sets the display frequency of the drop in
box. Possible values are:
freq: "30min" //box is displayed once every 30
minutes Note: Whenever you change the |
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 " var dropinbox1=new dropincontentbox({ 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:
where dropinboxinstance should be the name of the variable you
assigned the initialization code to when calling new
|
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 |
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:
- <a href="javascript:dropinbox1.show()">Show Box</a>
- <a href="javascript:dropinbox1.hide()">Show Box</a>