XBalloon is a DHTML control that allows developer to display context sensitive information to the end-user.
It can be used for context sensitive help, submittable forms and alerts. It can be used in conjunction with AJAX to
dynamically display item information or enter/validate/save form information without refreshing the whole form.
Click on the following link to see XBalloon in action.
XBalloon Demo
Screenshot of using XBalloon in Calendar application
Features
There are many similar DHTML controls available, but XBalloon improves on all of them in the following areas:
1. Dynamic dimensions
To display rounded corners box, many 'balloon' controls use one background image which can not be resized dynamically
to fit content. On the other hand, XBalloon can be resized dynamically both horizontally and vertically. It uses
5 images (four corners and direction angle), so it will look pretty much the same for any content size.
2. Smart direction
Balloons/tooltips can often be displayed off-screen when there is some scrolling or it is near on of the border edges.
XBalloon resolves this issue by providing 4 different directions in which balloons can be displayed - North East, North West,
South East and South West. The best direction is automatically determined depending on where the balloon is about to be
displayed.
3. .NET Ajax implementation
Even though XBalloon is written in javascript/DHTML, I was able to integrate it with latest version of .NET AJAX Extensions
to pull and display dynamic information from the server. I also created forms and even multi-step wizards that would run
in the balloon without affecting/submitting parent page.
I will provide a demo for this in near future
4. Object oriented javascript
I paid special attention to writing clean and object-oriented java script code. It should be easy to read and integrate into your
own applications.
Example
Here is some code you can use to display the balloon when user clicks anywhere on the DIV.
The balloon will be displayed for 10 seconds, then disappear.
<script type="text/javascript" src="includes/XBalloon.js"></script>
<link type="text/css" rel="stylesheet" href="includes/XBalloon.css"/>
<script type="text/javascript" language="JavaScript">
<!--
function showBalloon(evt)
{
var pos=getPos(evt);
bl=new XBalloon();
bl.title="OnClick balloon";
bl.contentHtml="Balloon content";
bl.autoHide=true;
bl.autoHideInterval=10000;
bl.width=300;
bl.posX=pos[0];
bl.posY=pos[1];
bl.show();
}
function getPos(e)
{
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
var pos=new Array();
pos[0]=posx;
pos[1]=posy;
return pos;
}
-->
</script>
<div style="width:400px; height:200px; background-color: Blue;
border:solid 1px #000000" onclick="showBalloon(event);">
Click anywhere in this DIV to display balloon
</div>
Links and references
| Download XBalloon |
XBalloon code and demos |
| Product page |
XBalloon overview, features, etc... |
| CodeProject : JSBalloon |
Great article on DHTML balloons. XBalloon is based on this control. |
|