Where to put the bubble?

Rails
1

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

    • 2

    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 !!Es gratis!!