CSS Codes
CSS Layouts
FF3+ IE6+ Opera8+

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.
  • 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:

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().
Show Reminder box again | Hide Reminder Box

Directions Developer's View

Add the below code inside the <HEAD> section of the page:

Select All

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

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):

Select All

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:
  • 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"
  • If your DIV content is defined inside an external file on your server (ie: dropincontent.htm), set source  to [#id, path_to_file], for example: source: ["#dropbox", "dropincontent.htm"]

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({
 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?
})

 
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:

  • <a href="javascript:dropinbox1.show()">Show Box</a>
  • <a href="javascript:dropinbox1.hide()">Show Box</a>

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post