KNOWLEDGE BASE

UPDATED (2009-05-25)!

Here's a quick and extensible framework to enable popup windows, popup bubbles, or popup anything. Currently the framework doesn't create extra DOM elements or style anything differently. It relies on the developer to create the DOM element that will be the popup bubble (or whatever). This extension give you the flexibility to bind any number of events to show or hide the bubble. It also supports having the bubble hide on a timer and comes with a complete event model allowing you to intercept the hide and show bubble events (and cancel them if needed) and fire your own methods upon completion.

I've included a full demo html page to demonstrate some different implementations.

• Here's the code: AlertBubble.zip (20.74 kb)
• Here's a demo

Here's an example of the usage:

$(".bubble").AlertBubble(
{
        fadeTime: 500,
        hideEvent: [
                {selector: $("#hideButton"), event: "click"}
        ],
        showEvent: [
                {selector: $("#showButton"), event: "click"}
        ],
        showOnStart: true,
        text: "I am a bubble",
        hideTimer:2000
});

The above code turns the elements with the class of .bubble into an AlertBubble. The parameters passed in are the parameters that are supported by this class: 

• fadeTime: the milliseconds to fade in/out. Default = 200 
• text: the text to show in the html element. If set to false (by default) it will use the markup that currently exists in the element.
• hideEvent/showEvent
  • Allows you to add/remove as many event handlers to show or hide the alert bubble
• showOnStart: if the bubble should show on page load or only when showOnStart exists
• hideTimer: If set, then the bubble will hide after the set number of milliseconds after shown. Default is false.
• onBeforeShowCallback: a function to call before the bubble is shown. If a callback is specified, it must return true for the code to proceed to show the bubble.
• onBeforeHideCallback: a function to call before the bubble is hidden. If a callback is specified, it must return true for the code to proceed to hide the bubble.
• onAfterShowCallback: a function to call after the bubble is shown.
• onAfterHideCallback: a function to call after the bubble is hidden.

The extension also has a simple API that can be accessed to show/hide the bubble on demand as well as using events. This is done by storing the API object for the popup bubble extension in the jQuery data object for the popup bubble selector.

API methods:

• showBubble()
• hideBubble()

To access the API, you can retrieve it from the jQuery data object with the key "AlertBubble":

var api = $(".myselector").data("AlertBubble"); 

Example:

$(".bubble").each(function() {
        var api = $(this).data("AlertBubble");
        if (api != null) {
                api.hideBubble();
        }
});