CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DamianFox
DamianFox

Reputation: 902

How to know if an element is visible on the screen. If not, scroll the page


I'm trying to build a popup window like the one here. In this case, when I click the CUSTOMISE button, a window appears below the button. If the element is not entirely visible on the screen, the page scroll down or up until it is completely visible.

I was able to achieve half the result:

$('body').on('click',"#"+ID,function () {

        var $this = $(this);

        $('#attr-div-'+baseId).css({
            top: $this.position().top+55,
        }).show();
    });

How can I scroll the page until the element is entirely visible? Thanks!

Upvotes: 0

Views: 138

Answers (2)

Shikkediel
Shikkediel

Reputation: 5205

Something like this should work but a fiddle with the larger idea would be helpful :

$('body').on('click', "#"+ID, function() {

    var popup = $('#attr-div-'+baseId);
    var offset = $(this).offset().top+55;

    popup.css('top', offset).show();
    $(window).scrollTop(offset+popup.height()-$(this).height());
});

Assuming it doesn't have fixed position - if it's below the window then, you'd have to reposition it.

It could be refined (and animated as well of course instead of instantaneous) :

http://codepen.io/anon/pen/dPBNWY?editors=001

Upvotes: 2

DamianFox
DamianFox

Reputation: 902

I have found the solution:

$('body').on('click',"#"+ID,function () {

        var $this = $(this);

        $('#attr-div-'+baseId).css({
            top: $this.position().top+55,
        }).show();

        $('html, body').animate({
            scrollTop: $('#attr-div-'+baseId).offset().top-55
        }, 1000);
    });

It is not exactly what I want, but it allows me to make the popup window always visible.

Upvotes: 0

Related Questions