Click here to Skip to main content
Click here to Skip to main content

JSBalloon: non modal feedback mechanism for DHTML applications

By , 7 Sep 2005
Rate this:
Please Sign up or sign in to vote.

Sample Image - jsballoon.jpg

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Arkady Lesniara
Web Developer
Canada Canada
Arkady Lesniara is a Senior System Analyst/Developer based in Toronto, Canada, specializing in .Net solutions that focus on ASP .Net, VB .Net, T-SQL, AJAX, and all related technologies.

Comments and Discussions

 
QuestionLicense to use the code Pinmemberneildux12-Oct-12 5:22 
AnswerRe: License to use the code PinmemberArkady Lesniara12-Oct-12 5:31 
GeneralThanks for this post Pinmemberdeepak_rai24-Jan-08 23:18 
Questionhow I can show a balloon PinmemberTom_MJU11-Sep-07 22:20 
QuestionHow to pass .aspx page in this function Pinmemberer.miteshpatel11-Aug-07 16:48 
QuestionHow can i implement it in ASPX ? Pinmemberamitsm1432-Apr-07 21:14 
AnswerRe: How can i implement it in ASPX ? PinmemberArkady Lesniara3-Apr-07 15:14 
GeneralPrinting page with balloons Pinmemberdlbjr17-Mar-07 9:26 
GeneralUpdates to JSBalloon [modified] PinmemberNiraj Sharma8-Dec-06 5:50 
QuestionUnable to Immplement the JsBallon in my aspx file VS 2005 Pinmembersew new4-Aug-06 9:13 
QuestionDid anyone get it working in firefox? Pinmemberzquad15-May-06 17:09 
AnswerRe: Did anyone get it working in firefox? PinmemberSemXYZ19-May-06 11:42 
QuestionIs this JSBalloon licensed or Free for use? PinmemberWayne G. L12-May-06 8:16 
AnswerRe: Is this JSBalloon licensed or Free for use? PinmemberArkady Lesniara12-May-06 8:29 
GeneralFirefox 1.5.0.2 Pinmemberpoinciana20-Apr-06 4:25 
GeneralYou are delayed 1 year PinsussAnonymous9-Sep-05 8:42 
GeneralRe: You are delayed 1 year PinmemberSORUOPNEHPETS21-Sep-05 9:20 
GeneralFirefox version PinmemberAndy Krafft8-Sep-05 7:31 
GeneralObjectOverlap PinmemberDeKale5-Sep-05 11:43 
GeneralRe: ObjectOverlap PinmemberArkady Lesniara6-Sep-05 5:02 
GeneralBalloon positioning upon scrolling PinmemberAndy Krafft7-Aug-05 9:54 
GeneralRe: Balloon positioning upon scrolling PinmemberArkady Lesniara8-Aug-05 3:52 
GeneralRe: Balloon positioning upon scrolling Pinmemberalbans7-Apr-08 21:40 
General.Show Delay PinsussAlex Haines28-Jul-05 14:26 
GeneralRe: .Show Delay PinmemberArkady Lesniara29-Jul-05 4:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140421.2 | Last Updated 7 Sep 2005
Article Copyright 2005 by Arkady Lesniara
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid