Check if whole div is visible in browser window

Question

I have a product listing on my website and when hovering over the product an info div shows up. The only problem is that in some cases parts of the div fall outside of the browser window.

I need to check with Javascript if thats the case, and if so I need to assign a class to that particular div. I know how to do the last part, but I have no idea how to check if the whole div is visible.

Can anybody give me a suggestion how to handle this?

surely this is just a css issue? if its position relative to the parent it shouldnt be off screen... — NoLiver92, Oct 31 '14 at 10:03
@NoLiver92 the products itself have a relative position, the popup has an absolute position. It (apparently) depends on the screen size wether the div is displayed in its whole — user3164891, Oct 31 '14 at 10:05
You will need to check by javascript on hover if the width of the info div is bigger than the window.width minus the infobox left property — nunopolonia, Oct 31 '14 at 10:11

score 0 · Answer 1 · edited May 23 '17 at 12:31

Your goal is to determine if your HTML element is in the viewport. If you're using jQuery - there are a few plugins tha handle this.

Jquery check if element is visible in viewport

http://opensource.teamdf.com/visible/examples/demo-basic.html

With the example above, you'd want to use detectPartial set to true -- so that you would know whether or not the thing is inside the viewport entirely.

//added by JG 3/10/2011, to extend selectors.
// Example:
//if ($('#whatever').is(':inView') ) {...}
jQuery.extend(jQuery.expr[':'], {
        inView: function(a) {
            var st = (document.documentElement.scrollTop || document.body.scrollTop),
                ot = jQuery(a).offset().top,
                wh = (window.innerHeight && window.innerHeight < jQuery(window).height()) ? window.innerHeight : jQuery(window).height();
            return ot > st && (jQuery(a).height() + ot) < (st + wh);
        }
});

I did that a number of years ago, based off of Remy Sharp's inview plugin (https://remysharp.com/2009/01/26/element-in-view-event-plugin) -- but these only check for vertical in-view, not horizontal (scrolling sideways/off the left or right).

Check if whole div is visible in browser window

1 Answers1