The Thought Balloon

Creating a Css/HTML/Javascript comments balloon popup

Posted by Dan Eastwell Sat, 25 Nov 2006 11:26:00 GMT

Seeing as my site's called The Thought Balloon and I write a lot about CSS, Javascript and HTML, I get a lot of search engine queries for people looking for a 'CSS balloon' or a 'javascript balloon'.

The idea behind it is very simple: you have a link, that when you click on it (onclick) will either show or hide another CSS element (display:block,display:none).

If the user clicks on a visible balloon, it dissappears.

The Example

You can find the example here and download the script here.

The HTML

The required HTML is fairly straightforward - as a result, the javascript is necessarily more complicated to allow for this. In the future, it would make sense to abstract out that complicated code, leaving the actual nuts and bolts function that much simpler

The HTML you need is as follows:

<p>Make sure <span class="label_reference">Search by</span> 
is set to tags. <a class="popup" href="#popup_01">How?</a></p>
 <div id="popup_01" class="popup_item">
   <p>The <img src="images/image_searchby.gif" alt=""> drop-down 
should have 'Tags' selected.</p>
</div>

What's important here?

Well, the most important elements, i.e. the ones that the script looks for are: the class="popup" on the link you'll click to get the balloon to pop up and the class="popupitem" on the div to be displayed. It's also necessary that the the link's anchor reference (the bit after the '#') is identical to the id of the div you want to display as the balloon, as the script will use one to find the other.

The CSS

The CSS is fairly nominal. What's needed it to be able to layer elements. You can do this by changing their z-index. Only non-statically positioned elements can have a z-index, hence adding position:relative.

div.popup_item{
	position : relative;
	z-index : 10;	
	background : #fff url('../images/closer.gif') no-repeat top right;
	border-bottom : 2px solid #bbb;
	border-right : 1px solid #ccc;
	width : 200px   ;
	padding : 0px 30px 30px 10px;
	margin-top : 0em;
}

Only the first two style declarations are important, the rest just make the revealed balloon look pretty. If you wanted, you could even make the thing look like a balloon. You'd need some transparency know-how, though.

The script

Now comes the hard part.

Hide the comment popup balloons

The script first looks for all the links with a class of popup. The value of the link's href attribute will be the id of the div it wants to open. We go ahead and make all of these in the page invisible. People without javascript, of course, get served the tips as they are in the code, preferably just beneath the thing they are referring to.

function doPopup() {
 if (!document.getElementsByTagName) return false; 
 var links = document.getElementsByTagName("a");
 for (var i=0; i < links.length; i++) {
  if (links[i].className.match("popup")) {
   var SectionID = links[i].getAttribute("href").split("#")[1];
   var helpTextDiv = document.getElementById(SectionID);
   helpTextDiv.style.display = 'none';		
   
   [...]
   
  }
 }
}  

The first five lines find all the links and shoves them in an array. We loop over these and find the ones with a class of popup.

We then get the bit after the '#' and this is the id we're looking for: var SectionID = links[i].getAttribute("href").split("#")[1];. This isn't foolproof. Ideally after this we should be checking to see if anything has been found in the link. What we heedlessly do, though, is find the item with that id and set its display property to none. This takes the balloon out of the document flow and everything 'shoves up' into its place.

Setting the style in the javascript is abysmal practice. Why? Well, if you are going to maintain code, you want to separate content, presentation and behaviour. You want to find the way it looks in the CSS, not sifting through javascript code.

I'll be continuing this poor practice throughout this example, bear with me.

What else could you do?

A much better method would be to change the class name in the javascript and have an alternative look (display:none in this case) in the css for that class.

Assign event handlers: make it click!

We then add an onclick event handler to the current popup link we're dealing with (we're still in the loop going over all links).

This onclick will run a function, that will hide the balloon if it's present or show it if it's not and close all other open balloons.

The same code as above is used for hiding, and the display should be done by simply changing the class of the balloon. It's not, though, and I've set the styles in the javascript. Terrible thing to do...

We find the other open balloons by looping through the links in the document again and finding all the popup links: the other balloons are hidden if the value of the href attribute for this clicked link doesn't match the current one in the loop.

if (popups[i].className.match("popup")) {
 var ThisPopupID = popups[i].getAttribute("href").split("#")[1];
 var SelectedPopupID = this.getAttribute("href").split("#")[1];
 if(ThisPopupID == SelectedPopupID){							
 }else{					
  UnselectedPopupDiv = document.getElementById(ThisPopupID);
  UnselectedPopupDiv.style.display = 'none';	
 }
}

The next event handler we're going to assign is to the popup balloon itself. If you click that, you want it to close. We've already ascertained what this popup balloon is, when we revealed it. Now the onclick event handler will close it.

Improving the functions

This code could be vastly improved. The styling should be removed from the code and put into the CSS. Then the class name should be changed in order to show or hide.

The names of all classes used should be stored in a seperate file and referenced through variables, to allow for easier maintenance.

The looping functions can be generalised and abstracted out, as they're used a lot, as could the popup closing function.

Moving on

This funcionality is part of a larger article I'm going to write concerning drop down menus: in particular, a help menu.