# Where to put the bubble?

**URL:** <https://www.ruby-forum.com/t/where-to-put-the-bubble/88475>\
**Category:** Rails\
**Created:** [March 11, 2007, 8:01pm UTC](https://www.ruby-forum.com/t/where-to-put-the-bubble/88475 "2007-03-11T20:01:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeffpritchard](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/43a26b/32.png) [@jeffpritchard](https://www.ruby-forum.com/u/jeffpritchard)\
**Post date:** [March 11, 2007, 8:01pm UTC](https://www.ruby-forum.com/t/where-to-put-the-bubble/88475/1 "2007-03-11T20:01:45Z")

</div>

OK, here’s the scenario. I’ve got a bunch of unordered lists on a page.  
Each

- item has a little bubble icon in it that is supposed to act  
like a rollover target. User rolls over one of these icons, and a help  
bubble pops up nearby to give some more information about that list  
item.

These list items groups are of varying size and sprinkled around the  
page, and not positioned using absolute positioning. There’s no way to  
know ahead of time where each one of these icons will be.

So when I bring up my magic info bubble, how can that code find out  
where the item is in the window so it can draw the info bubble nearby?

I can pass in to the drawing code an “id” for this item, so I guess a  
simpler way to ask my question, is how can a rails method get at the  
location of a page element given its “id”?

Alternatively, if the info has to be passed in as part of the rollover  
event, I’m using this inside my img tag to do activate the drawing code:

onmouseover=“new  
Ajax.Updater(‘fred’,’/welcome/make\_popup?param1=0&param2=Top’,  
{asynchronous:true, evalScripts:true}); return false;”

Is there some javascript I can add to that nasty looking thing that will  
add the window location of the icon to the params I’m sending back?

thanks,  
jp

---

<div class="post-metadata">

**Author:** ![jeffpritchard](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/43a26b/32.png) [@jeffpritchard](https://www.ruby-forum.com/u/jeffpritchard)\
**Post date:** [March 11, 2007, 8:21pm UTC](https://www.ruby-forum.com/t/where-to-put-the-bubble/88475/2 "2007-03-11T20:21:44Z")

</div>

Hi,

> So when I bring up my magic info bubble, how can that code find out  
> where the item is in the window so it can draw the info bubble nearby?  
> AFAIK there is no rails helper for this, so that leaves us with a pure  
> javascript question. You can get that information in javascript by using  
> the offsetLeft and offsetTop properties of your element. Notice you will  
> have to also take into account the parent offset, available in  
> offsetParent, and you’ll have to do it recursively in case that parent  
> has another parent and so on.

If i remember well, just adding your offset to all the parent’s offset  
works fine for both IE and FF (at least), but I’d say there were some  
issues if you had a scrollable element (no problem with page wide  
scroll, but with scroll in a div, for example). If you google for those  
three properties you’ll likely/hopefully find some multi-browser script  
to do that.

good luck,

javier ramirez

## –

Estamos de estreno… si necesitas llevar el control de tus gastos  
visita [http://www.gastosgem.com](http://www.gastosgem.com) !!Es gratis!!