the coding room

I was working till seven o’clock yesterday trying to see why the floating box I had created two weeks ago sometimes would not give up and disappear.

The story behind this project

The project is an online jewellery catalog, although you can think of it as an image gallery for simplicity. The goal is to show a pop-up bubble box, when the mouse is over an image, with extra information about that particular product.

The first approach

My first thought was to set a onmouseover callback to a function called showBubble(), onmousemove to a function movebubble() and onmouseout to a function called hideBubble(). When the mouse enters the thumbnail area it would call showBubble() and the script would go like this:

• setup an ajax call saying ‘bring me information about the product with that id’
• send the request
• wait for response (:P)
• onResponse show the bubble box with the extra information requested
• if the bubble leaves the image area, empty/hide the bubble box

In this post I will avoid going into server-side related code.

The problem with the above script is that it didn’t check what happens if the mouse pointer leaves the image area but the server has not responded yet, and that could happen for a million reasons. So, since we are talking about asynchronous approach here, the bubble sometimes, when I was entering and exiting the image area in great speed, would not disappear. In fact, it is not that the bubble did not disappear. It was the fact that the server response came after the mouse had left the image area, and of course called hideBubble() before actually showing it. And when the response finally came, the bubble would happily show up, even if the mouse pointer was nowhere near an image.

The first solution

Then I added a conditional to keep track of the mouse position. If the mouse was entering an area a boolean isMouseOverImage would be true and if the mouse exited that area the same boolean would be false. So now, whenever the server responsed, I would check the boolean and only show the bubble box if it’s actually over an image.

Real life problems

The real trick though is to make it smoother for online surfing. Yes, it works ok in my localhost where server response times are micro pico nano seconds. But what about the real web?

Well, in the real web, it is slower, that’s for sure. And when you mouseover an image and a box appears with some stuff about that image, that is cool, but what if the server hangs? or it just taked to long to echo the desired response? The we make another approach

The second solution

I set the bubble to pop up as the user enters the image. That way he would be aware that something is on his way, especially if there is a little thing circling inside that bubble, implying ‘loading…’. Then when the response came it would fill the bubble with the html we all have been waiting for.

All this for a popup?

I do not know if it is worth it, really, but here is why I am using it. I use smarty, hence a template system for my pages and all my html. And I hate constructing html in javascript code. I want my html to be clean, modable and easy to maintain. So I use ajax to ask for a template actually. That template could be anything. If I want to change it, I won’t have to got to javascript to pick my html. Javascript is one thing, html another. I like keeping clear of mixing different things together, as much as I can of course. So I do this to use smarty for my html, and at the end echo the template. It’s more clean.

But there are other ways this can be achieved. Actually I suggest you visit istockphoto for a glance at its javascript that easily creates popups without ajax.

That’s all for now.

See you.