JSBalloon: Non Modal Feedback Mechanism for DHTML Applications

• Download source files and demo project - 19.2 KB
• Download documentation - 17.7 KB

Introduction

While working on a large intranet application, I found that between validation errors, save confirmation messages, and other user feedback events, there were an awful lot of modal dialog boxes I had to pop and respond to. This DHTML object provides a balloon pop-up not unlike the Microsoft's tray balloon. While I agree that pop-ups are mostly a nuisance in the web environment, this form of rich tool tip may be very handy in streamlining user experience.

One of the features, in a form of an autoHide property, included in JSBalloon for example is the ability to hide the tool tip as soon as the user's mouse moves over it, thus swiftly allowing them to continue on with their work. Another advantage is the ability to place HTML code and form elements within a balloon, thus providing users with optional functionality that may either be easily dismissed or will hide on its own. The main purpose of this exercise, however, is to try and minimize the number of clicks and mouse moves the user needs to make.

Background

JSBalloon is not meant as a replacement for some other excellent DHTML (JavaScript) pop-up libraries, e.g., Jwin Popup Library or overLIB. Rather, it is meant as a very simple enhancement of tool tip functionality within the DHTML environment. Note that the code was tested and will run in Microsoft Internet Explorer 6 only. Also, it was created for a fixed screen.

Using the Code

The only thing you will need to do after copying the JSBalloon.js file to your web server is to update the JSBalloonPath variable with the full path where it is located. This is needed for locating the images and icons.

When instantiating new objects, make sure that your JSBalloon variables are globally scoped and instantiated only once per object:

<script language="JavaScript">

var b4=new JSBalloon({ width:150, 
                       autoAway:false, 
                       autoHide:false,
                       showCloseBox:true});

Once the object is created, you may use the Show method to display a balloon and Hide method to hide it.

The following example demonstrates how to show a balloon. Note that B3 is the ID of a button on a page. The anchor is optional and you may use top and left named arguments to place the balloon anywhere on a page instead.

b4.Show({title:'JavaScript Balloon Example',
    message:'This is an example of a JSBalloon object. '+
        'It\'s primary application is to provide ' +
        'a modeless feedback to DHTML applications.',
    anchor:B3});

You may also mix and match the arguments and properties:

var bl=new JSBalloon({ width:300});

function testBalloon()
{        
    bl.autoHide=false;
    bl.transShow=true;
    bl.autoAway=false;
    bl.showCloseBox=true;
    bl.transShowFilter="progid:DXImageTransform.Microsoft"+
        ".Stretch(stretchstyle=SPIN)";
    bl.transHideFilter="progid:DXImageTransform.Microsoft"+
        ".Slide(slidestyle=HIDE,Bands=1)";
    bl.Show({title:'JavaScript Balloon Example',
        message:'This is an example of a JSBalloon object. ' + 
                'It\'s primary application is to provide a '+
            'modeless feedback to DHTML applications.',
        anchor:B3, icon:'Info'});
}

and to hide:

b4.Hide();

Note that you don't have to call Hide if autoHide is true. Also, if autoAway is true, the Hide method is called when a user moves the mouse over the balloon.

Please review the included source documentation for all the methods and properties.

History

• 7^th September, 2005: Initial version