calculate centered absolute div inside relative

Question

I'm using 2 Javscript methods to position a hovering button inside a static element on my page. The button that is centered is inputted inside the first element and uses position absolute. The code I'm using to get the parent element measurements:

// calculate if the element is in the visible window
function elementVisibleRect(element) {
    element = $(element);
    var rect = {
        top: Math.round(element.offset().top),
        left: Math.round(element.offset().left),
        width: Math.round(element.outerWidth()),
        height: Math.round(element.outerHeight())
    };
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var scrollBottom = scrollTop + windowHeight;
    var elementBottom = Math.round(rect.height + rect.top);

    if (scrollTop < rect.top && scrollBottom > elementBottom) {
        return rect;
    }
    if (scrollTop > rect.top) {
        rect.top = scrollTop;
    }
    if (scrollBottom < elementBottom) {
        rect.height = scrollBottom - rect.top;
    } else {
        rect.height = windowHeight - (scrollBottom - elementBottom);
    }
    return rect;
}

and for using this information and centering the button inside

// center the element based on visible screen-frame
function elementPosition (element) {
    var visibleRect = elementVisibleRect(element);
    $('.editHoverButton').css({
        top: visibleRect.top + ((visibleRect.height / 2) - ($('.editHoverButton').outerHeight() / 2)),
        left: visibleRect.left + (visibleRect.width / 2) - ($('.editHoverButton').outerWidth() / 2)
    });
}

Now my problem is that a third party library requires the parent DIV to change position from the browser default "static" to "relative" which breaks my calculations in the second function.

It might be late, but no matter what I try I can't seem to figure out how to get this working for when the parent element has position set to relative. I can't seem to get the maths quite right, and my head is beginning to hurt. Any suggestions?

EDIT - ADDED JSFIDDLE

http://jsfiddle.net/RhTY6/

Answer 1

Elements with absolute positioning are removed from the natural flow (e.g. they don't leave a space where they were) and positioned relative to their first parent with non-static positioning. Since the positioning of the right-hand box is relative (not static), you can position the button with top: 50%; and left: 50%;. This will make the top-left corner at the center of the parent. Then all you have to do is subtract half the element's height and width from the position, using margin-top and margin-left. This is much simpler than what you were doing, as you can see below:

JavaScript:

function elementPosition() {
    $('.editHoverButton').css('margin-top', 0 - $('.editHoverButton').outerHeight() / 2);
    $('.editHoverButton').css('margin-left', 0 - $('.editHoverButton').outerWidth() / 2);
};

CSS:

.editHoverButton {
  position: absolute;
  z-index: 99;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: normal;
  background-color: #00bb00;
  top: 50%;
  left: 50%;
}

Nothing else has to change except to remove this from the elementPosition() function.

DEMO (Notice that the left one no longer works. This is because it is positioned static.)

EDIT--Using the same basic idea, this method should work:

The problem is that you have take the top and left positions of the element when defining rect. on the positioning calculations. Changing those to 0 (not the best method, but it works) fixes the problem for relative elements.

DEMO (Notice that the left one now does work. This is because it is positioned at 0,0 anyway.)

EDIT--This will work when the page scrolls:

This sets the container in a variable so that when the page scrolls, it can be repositioned automatically.

DEMO

Answer 2

EDIT: made it worked with your CSS and HTML (relative and absolute positioning) by altering the Script only.

The horizontal axis calcs were completely missing (I've applied the same calcs you applied to the vertical axis).

I've added some data and a ruler to help you finish the job: as you can see, it is (and it was, in your original fiddle) not perfectly centered (obviously you need to look at it when the container is smaller than the viewport), but this will be easy to work out.

Running Demo

Try to resize the fiddle window and to scroll both vertically and horizontally to see it works.

function elementVisibleRect(element) {
    $("#data").html("");

    element = $(element);
    var rect = {
        top: Math.round(element.offset().top),
        left: Math.round(element.offset().left),
        width: Math.round(element.outerWidth()),
        height: Math.round(element.outerHeight())
    };
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var scrollBottom = scrollTop + windowHeight;
    var elementBottom = Math.round(rect.height + rect.top);

    var scrollLeft = $(window).scrollLeft();
    var windowWidth = $(window).width();
    var scrollRight = scrollLeft + windowWidth;
    var elementRight = Math.round(rect.width + rect.left);


    addData("rect.top", rect.top);
    addData("rect.left", rect.left);
    addData("rect.width", rect.width);
    addData("rect.height", rect.height);
    addData("scrollTop", scrollTop);
    addData("windowHeight", windowHeight);
    addData("scrollBottom", scrollBottom);
    addData("elementBottom", elementBottom);
    addData("scrollLeft", scrollLeft);
    addData("windowWidth", windowWidth);
    addData("scrollRight", scrollRight);
    addData("elementRight", elementRight);


    if (rect.top < scrollTop) {
        rect.top = scrollTop;
    }
    if (scrollBottom < rect.top < scrollTop) {
        rect.top = scrollTop;
    }
    if (scrollBottom < elementBottom) {
        rect.height = scrollBottom - rect.top;
    } else {
        rect.height = windowHeight - (scrollBottom - elementBottom);
    }

    if (rect.left < scrollLeft) {
        rect.left = scrollLeft;
    }
    if (scrollRight < rect.left < scrollLeft) {
        rect.left = scrollLeft;
    }
    if (scrollRight < elementRight) {
        rect.width = scrollRight - rect.left;
    } else {
        rect.width = windowWidth - (scrollRight - elementRight);
    }

    return rect;
}