How to get visible height for overflow element in jQuery

Question

I have an element who's overflow is hidden until a function is called. I am trying to determine if the mouse is hovering over this overflow material after I set overflow: visible;, but instead, it tells me that my mouse is hovering on the overflow content even when it's still invisible.

Is there a way to check visible height in jQuery? Here is what I was trying:

    off = $(curSub).offset();
    xSubStart = parseInt(off.left);
    ySubStart = parseInt(off.top);
    xSubEnd = xSubStart + parseInt($(curSub).width());
    ySubEnd = ySubStart + parseInt($(curSub).height());

    if ( (x >= xStart && x <= xEnd && y >= yStart && y <= yEnd) ||
         (x >= xSubStart && x <= xSubEnd && y >= ySubStart && y <= ySubEnd) ) {
        // display menu
        $(cur).css('overflow', 'visible');
        match = true;
    }

The xStart, xEnd, yStart, and yEnd variables are defined above that code and work just fine. I believe the problem is that the jQuery function width(), height(), outerWidth(), and outerHeight() don't test to see if the element is visible.

Is there anyway to achieve this? I thought about just moving it from hidden to visible physically with top and left specifications, but I think this way would be cleaner if it's possible.

Hope someone knows the answer.

Probably a duplicate of http://stackoverflow.com/questions/12868287/get-height-of-visible-portion-of-div — dlock, Feb 13 '13 at 00:03

score 0 · Answer 1 · answered Feb 13 '13 at 08:16

The problem is that JavaScript did not complete the action before executing the next line of your code.

You could use a callback function:

var setHoverAfterOverFlowVisible = function(cur, callback) {
    $(cur).css('overflow', 'visible');
    match = true;
    //other stuff

    callback();
}

setHoverAfterOverFlowVisible(cur, /*hoverFunction*/);

More info about callbacks: http://www.impressivewebs.com/callback-functions-javascript/

How to get visible height for overflow element in jQuery

1 Answers1