JSBalloon: non modal feedback mechanism for DHTML applications

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.

You must Sign In to use this message board.


Per page

Thanks for this post
deepak_rai

0:18 25 Jan '08

Cooooooooooooooooolllllllllll. I like it very much.
Sign In·View Thread·PermaLink

how I can show a balloon
Tom_MJU

23:20 11 Sep '07

First, thank you for great script. I have one problem that how I can show a balloon (just one only).
Sign In·View Thread·PermaLink

How to pass .aspx page in this function
er.miteshpatel

17:48 11 Aug '07

Please help me to pass the .aspx url in this function?
Sign In·View Thread·PermaLink

How can i implement it in ASPX ?
amitsm143

22:14 2 Apr '07

Hi, I m just trying to implement it in my aspx form Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Button1.Attributes.Add("onclick", "ShowBalloon()") End Sub not working, Any Idea ! thnks in advance.............
Sign In·View Thread·PermaLink

Re: How can i implement it in ASPX ?
Arkady Lesniara

16:14 3 Apr '07

Well, if ShowBalloon() is your JavaScript function, you must add all the code between <script Language=JavaScript>....</script> as outlined in this article to your .aspx page source code (not .vb) for the call to actually do something. Hope this helps.
Sign In·View Thread·PermaLink

Printing page with balloons
dlbjr1

10:26 7 Mar '07

When printing a page that has balloons and the balloons have executed, the printed version is blocked out in white where the balloons had appeared. Any solution appreciated. dlbjr - invariable lunatic
Sign In·View Thread·PermaLink

Updates to JSBalloon [modified]
Niraj Sharma

6:50 8 Dec '06

First I wanted to thank Arkady for creating a really nice control.

I updated JSBalloon codebase and added some new features I needed. Recently I used new control to display AJAX balloons in a calendar application.

Some of changes I made include:

XBalloon.onClose - override event handler for clicking close button
XBalloon.contentDivID - for pulling HTML from another DIV to be used for content
XBalloonManager - to access all balloons currently displayed

and many others including support for both IE and FireFox.

You can see my XBalloon control (based on JSBalloon) here:

http://www.entechsolutions.com/Blog/ViewPost.aspx?PostID=7
It is free of course.

Regards,

Eric

-- modified at 18:10 Saturday 9th December, 2006

Unable to Immplement the JsBallon in my aspx file VS 2005
sew new

10:13 4 Aug '06

please help I want to use this JSBallon as follows
when I click to on my asp.net button I want to get a dialoug message box with yes and no option type of JSballon
and I have used button1.attribute.add("onclick","JsballonMethod();");
I think I have to use hidden control to store the dialog result i.e. yes or no
please can any body give me a way of doing this
just the full function of JsballonMethod()
please help

" Don't try so hard, the best things come when you least expect them to."

Did anyone get it working in firefox?
zquad

18:09 15 May '06

Hey dude, you did some excellent work. This script is excellent for a newbie like me. I encountered some problems. Ok the script does not work in Firefox 1.5.03 or previous, opera 8.52. Is there an update? Is there a link to the update?
Sign In·View Thread·PermaLink	2.00/5

Re: Did anyone get it working in firefox?
SemXYZ

12:42 19 May '06

Hi Follow all changes suggested here by Andy Krafft (FireFox Version) and the change suggested by Poinciana for firefox 1.5.2 then search function Hide() and there change: if(transHide) to if(ie && transHide) Working for me in firefox 1.5.0.3 Peace
Sign In·View Thread·PermaLink

Is this JSBalloon licensed or Free for use?
Wayne G. L

9:16 12 May '06

Hello,Arkady Your JSBalloon works excellent after I have done a bit change. I actually created a asp.net web control with your JavaScript codes. My question is Can I use the control for my company's products? Thanks Yong
Sign In·View Thread·PermaLink

Re: Is this JSBalloon licensed or Free for use?
Arkady Lesniara

9:29 12 May '06

You may use it in your products as long as you keep the notice at the top of the JS file. If you can, I would appreciate a link to some finished products, curiosity
Sign In·View Thread·PermaLink	2.00/5

Firefox 1.5.0.2
poinciana

5:25 20 Apr '06

Hi,

I've found a problem with Firefox 1.5.0.2 italian version, the interpreter show an error regarding these lines:

if(balloonDIV.filters(0).status==2 || balloonDIV.filters(0).status==1)
{
balloonDIV.filters(0).Stop();
}
balloonDIV.filters(0).Apply(); balloonDIV.style.visibility='visible';
balloonDIV.filters(0).Play();
"balloonDIV.filters is not a function"

Same problem exists in hide function, i 'fixed' replacing:
if(this.transShow){
....
}
with
if(ie && this.transShow){
.....
}

No 'special effects' but works fine.

Regards (I apologize for my bad english Sigh

)

You are delayed 1 year
Anonymous

9:42 9 Sep '05

Already it exists to one year in https://www.panamericano.com.br/html/content/cartaodecredito/pan_nacional_solicitacao.asp click in "avançar"
Sign In·View Thread·PermaLink

Re: You are delayed 1 year
SORUOPNEHPETS

10:20 21 Sep '05

Did you write this? If so do you have any details of you implementation that you would like to share with us? Steve
Sign In·View Thread·PermaLink

Firefox version
Andy Krafft

8:31 8 Sep '05

The following changes allow it to work in Firefox (and probably most other modern browsers).

Insert at line 19


var ie = document.all ? true : false

so it looks somehting like


| dealings in the software.                                                   |
\----------------------------------------------------------------------------*/

var JSBalloonPath="";
var ie = document.all ? true : false

/*	Class: JSBalloon
	Provides a flexible, encapsulated way to implement a passive feedback mechanism

Remove lines 404-409:


		if(document.readyState!='complete')
		{
			alert('Document needs to fully load before you may show JSBalloons.');
			return;
		}

Replace line 493:


var btnClose=balloonDIV.children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[2].children[0];

with


var btnClose = ie ? balloonDIV.children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[2].children[0] : balloonDIV.childNodes[0].childNodes[1].childNodes[2].childNodes[1].childNodes[1].childNodes[1].childNodes[0].childNodes[5].childNodes[0];

Replace line 581:


btnClose=balloonDIV.children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[2].children[0];

with


btnClose = ie ? balloonDIV.children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[2].children[0] : balloonDIV.childNodes[0].childNodes[1].childNodes[2].childNodes[1].childNodes[1].childNodes[1].childNodes[0].childNodes[5].childNodes[0];

Replace line 585:


btnClose=balloonDIV.children[0].children[0].children[2].children[0].children[0].children[0].children[0].children[2].children[0];

with


btnClose = ie ? balloonDIV.children[0].children[0].children[2].children[0].children[0].children[0].children[0].children[2].children[0] : balloonDIV.childNodes[0].childNodes[1].childNodes[4].childNodes[1].childNodes[1].childNodes[1].childNodes[0].childNodes[5].childNodes[0];

Also in my case I implemented the code change mentioned in "Balloon positioning upon scrolling". So this:


balloonDIV.style.top=parseInt(balloonDIV.style.top, 10)+parseInt(document.body.scrollTop, 10);

becomes this:


		if(ie) {
			balloonDIV.style.top=parseInt(balloonDIV.style.top, 10)+parseInt(document.body.scrollTop, 10);
		}

Enjoy!

ObjectOverlap
DeKale

12:43 5 Sep '05

One of your functions is more complex then necessarily and didn't function as it should. Here is an alternative, that is simpler, shorter and might work.


function ObjectOverlap(obj1, obj2)
{
	var obj1TopX = getLeft(obj1);
	var obj1TopY = getTop(obj1);
	var obj1BottomX = getLeft(obj1)+obj1.offsetWidth;
	var obj1BottomY = getTop(obj1)+obj1.offsetHeight;
	
	var obj2TopX = getLeft(obj2);
	var obj2TopY = getTop(obj2);
	var obj2BottomX = getLeft(obj2)+obj2.offsetWidth;
	var obj2BottomY = getTop(obj2)+obj2.offsetHeight;
	
	var overlapOnX = (obj1TopX < obj2BottomX && obj2TopX < obj1BottomX);
	var overlapOnY = (obj1TopY < obj2BottomY && obj2TopY < obj1BottomY);
	
	return (overlapOnX && overlapOnY);
}

The function now checks simply if the objects overlab horizontally (overlapOnX) and vertically (overlapOnY).

Re: ObjectOverlap
Arkady Lesniara

6:02 6 Sep '05

Thx. It seems to work better. I updated the code and it should appear as soon as the guys at the Code Project get around to doing it.
Sign In·View Thread·PermaLink

Balloon positioning upon scrolling
Andy Krafft

10:54 7 Aug '05

Hi

I'm not sure if it's the way I am doing it but if I employ the following then I find that if I scroll the page the balloon is not anchored but is offset (left or top) by double the scroll distance.

HTML:


<span onClick="xcBH('network', this);">network</span>

JS:

var xcRelevantContents = new Array();
xcRelevantContents['network'] = "A network is ..."
function xcBH(what, where) {
	xcRelevantContents[what]['anchor'] = where;
	xcBubbleHelp.Show(xcRelevantContents[what]);
}

Thanks
Andy

Re: Balloon positioning upon scrolling
Arkady Lesniara

4:52 8 Aug '05

Hi Andy. The balloon was originally designed for a fixed width and height screens that's why the body scroll wasn't taken into the account.
You may fix that like this:
1. Edit the JSBalloon.js file
2. Find the following fragment:

// Adjust all srollers
var scrollOffsets=ScrollOffsets(anchor);
balloonDIV.style.top=parseInt(balloonDIV.style.top, 10)-scrollOffsets[0];
balloonDIV.style.left=parseInt(balloonDIV.style.left, 10)-scrollOffsets[1];

3. Change it to :

// Adjust all srollers
var scrollOffsets=ScrollOffsets(anchor);
balloonDIV.style.top=parseInt(balloonDIV.style.top, 10)-scrollOffsets[0];
balloonDIV.style.left=parseInt(balloonDIV.style.left, 10)-scrollOffsets[1];
balloonDIV.style.top=parseInt(balloonDIV.style.top, 10)+parseInt(document.body.scrollTop, 10);

Hope this helps.

Re: Balloon positioning upon scrolling
albans

22:40 7 Apr '08

I have better results when replacing document.body.scrollTop with document.documentElement.scrollTop as follow:

var scrollOffsets=ScrollOffsets(anchor);
balloonDIV.style.top=parseInt(balloonDIV.style.top, 10)-scrollOffsets[0];
balloonDIV.style.left=parseInt(balloonDIV.style.left, 10)-scrollOffsets[1];
balloonDIV.style.top=parseInt(balloonDIV.style.top, 10)+parseInt(document.documentElement.scrollTop, 10);

.Show Delay
Alex Haines

15:26 28 Jul '05

I love these balloons. The only thing that would make it better is if there was a way to add a delay on the show. I've modified the fade speed (I like them showing up faster), but it would be nice if they didn't popup right away. That way a casual mouse over won't result in a balloon. Other than that, this is a great script! Thanks for sharing!
Sign In·View Thread·PermaLink

Re: .Show Delay
Arkady Lesniara

5:46 29 Jul '05

Thanks Alex, I appreciate it. Now, at this moment I can only offer you the following harness to try and solve your problem. Hope it helps:



<html><head><title>JSBalloon Delay Test</title>
<script type="text/javascript" src="JSBalloon.js"></script>
<script language="JavaScript">

var b0=new JSBalloon({width:250,
                            autoAway:true,
                            autoHide:true,
                            transShow:false,
                            transHide:false});
var tmrWait; // Need global variable for the timer to cancel

// Delay harness. It initiates the tmrWait
function ShowDelayed()
{
     tmrWait=window.setTimeout("ShowBalloon()", 3000);
     messages.innerText='Initialized. Waiting 3 seconds to pop balloon.';
}

// This actually does the popping
function ShowBalloon()
{
     b0.Show({title:'Delay Wrapper Test',
          message:'This balloon waited two seconds before popping up.',
          anchor:cellAnchor, icon:'Info'});

     messages.innerText='Balloon popped successfully.';
}

// This aborts the display onmouseout by clearing the timer tmrWait
function AbortDisplay()
{
     window.clearTimeout(tmrWait);
     messages.innerText='Balloon pop up aborted.';
}
</script>
</head>
<body>
<div align="center">
   <center>
   <table border="1" width="15%" style="position:relative;top:200px" bgcolor="#FFFF00">
      <tr>
         <td onmouseover="ShowDelayed();" onmouseout="AbortDisplay();" id="cellAnchor">
         <p align="center">Hover <br>your <br>mouse<br>here</td>
      </tr>
   </table>
   </center>
   <div id=messages></div>
</div>
</body>
</html>

Re: .Show Delay
Alex Haines

8:15 29 Jul '05

Thank you so much! That code didn't work right away for the way I'm using your balloons, but it helped push me towards a solution. Here's my code (sorry about the formating, it's only my second post):


<script language="JavaScript">
  var stdHelp=new JSBalloon({autoAway:false, autoHide:false});
  var endHelp=new JSBalloon({autoAway:false, autoHide:false});
  var refHelp=new JSBalloon({autoAway:false, autoHide:false});
  var xlsHelp=new JSBalloon({autoAway:false, autoHide:false});

  // Need global variables for the timer to cancel,
  // and to store which element to anchor to.
  var tmrWait;
  var myID;
  var myAnchor;

  // Delay harness. It initiates the tmrWait, sets the global anchor vars,
  // and calls ShowBalloon after 1 second.
  function ShowDelayed()
  {
    myID=event.srcElement.id;
    myAnchor=event.srcElement;
    
    tmrWait=window.setTimeout("ShowBalloon()", 1000);
  }

  // Shows the balloon.
  function ShowBalloon()
  {
    switch(myID)
    {
      case 'StartDateIBTN':
        stdHelp.Show({title:'Start Date', icon:'Info', 
          message:'Click here to select the beginning date in a date range.',
          anchor:myAnchor});
        break;
        
      case 'EndDateIBTN':
        endHelp.Show({title:'End Date', icon:'Info',
          message:'Click here to select the ending date in a date range.',
          anchor:myAnchor});
        break;
        
      case 'RefreshIBTN':
        refHelp.Show({title:'Refresh', icon:'Info',
          message:'Click here to refresh the current data view.',
          anchor:myAnchor});
        break;
        
      case 'ExcelIBTN':
        refHelp.Show({title:'Excel Download', icon:'Info',
          message:'Download the current data view as an Excel document.',
          anchor:myAnchor});
        break;
    }
  }

  // This aborts the display onmouseout by clearing the timer tmrWait,
  // and also hides the balloon if it's showing
  function HideBalloon()
  {
    window.clearInterval(tmrWait);
    
    switch(event.srcElement.id)
    {
      case 'StartDateIBTN':
        stdHelp.Hide();
        break;
        
      case 'EndDateIBTN':
        endHelp.Hide();
        break;
        
      case 'RefreshIBTN':
        refHelp.Hide();
        break;
        
      case 'ExcelIBTN':
        refHelp.Hide();
        break;
    }
  }
</script>

And here's my implementation...


<asp:ImageButton ID="StartDateIBTN" Runat="server" ImageUrl="images/date.gif" onmouseover="ShowDelayed();" onmouseout="HideBalloon();" />
<asp:ImageButton ID="EndDateIBTN" Runat="server" ImageUrl="images/date.gif" onmouseover="ShowDelayed();" onmouseout="HideBalloon();" />
<asp:ImageButton ID="RefreshIBTN" Runat="server" ImageUrl="images/refresh.gif" onmouseover="ShowDelayed();" onmouseout="HideBalloon();" />
<asp:ImageButton ID="ExcelIBTN" Runat="server" ImageUrl="images/excel.gif" onmouseover="ShowDelayed();" onmouseout="HideBalloon();" />

bad look when used in aspx page
ADuhoux

5:25 28 Jul '05

I'd really like to use this beautiful balloon, but... - I can't use anchor with control on a page.aspx (I used top and left for my test) - The balloon is not display like in your demo Images are not well positionned and there are blanks between images too bad, because it's a nice way to inform of a wrong value have you an alternative way to do this?
Sign In·View Thread·PermaLink	1.00/5