Question

I’d like to display pop-up bubbles with jquery when user hovers on red boxes. The problem is the code I meshed together just by experimenting… it makes no sense!

http://jsfiddle.net/PKzsS/

$(window).load(function() {
    $("#headloginuser ul li a").hover(function() {
        divW = $(this).next("div").width()/4;
        $(this).next("div").css({marginLeft: -divW }).animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("div").animate({opacity: "hide"}, "fast");
    });
});

This centers it, more or less, not perfect of course 🙂 but I’m dividng width by 4! shouldn’t I just divide it by 2? So I’ve half the width of the hidden div and I move it exactly that length on to the left?

I’m confused 🙂

S.

Answer 1

Yes, dividing by 2 will get you almost there. But know that this will centre it in relation to it’s starting point, which just so happens to match the left side of the red box above.
I assume you are trying to center in relation to the center of the box, if so, you will also need to account for the boxes’ width divided by 2.

I modified the following line and it seemed to center fine:

divW = ($(this).next("div").width() / 2) - ($(this).outerWidth() / 2);

–edit–

I’ve switched to using outerWidth() instead of width() as I noticed you had padding on the third button. Not sure if you wanted to account for that.