jQuery: как проверить, превышает ли элемент размер окна браузера, и как его переместить - PullRequest
Новая
       26

jQuery: как проверить, превышает ли элемент размер окна браузера, и как его переместить

2 голосов
/ 19 июня 2011

У меня есть этот код: 

var pos = $(this).offset();
var width = $(this).width();

userPreviewCon.css({
     left: (pos.left + 30) + 'px',
     top: (pos.top + 15) + 'px'
}).fadeIn();

... для размещения всплывающего окна относительно элемента, на который указывает мышь.

Но когда элемент находится близко к границе окна, некоторая часть всплывающей подсказки не отображается, потому что ее часть превышает размер окна. Вопрос в том, как изменить положение всплывающей подсказки, чтобы она больше не выходила за границы окна.

Ответы [ 2 ]

5 голосов
/ 19 июня 2011

Чтобы получить ширину окна, вы должны сделать это 

$(window).width();

А затем проверить и посмотреть, не слишком ли это далеко от той стороны, которую вы бы сделали (судя по тому, что вы опубликовали, сделайте этооценка 

(pos.left + 30) > $(window).width();

И, наконец, если эта оценка верна, вы можете сделать следующее 

pos.left -= pos.left + 30 - $(window).width();

И это должно сделать так, чтобы окно всплывающей подсказки всплыло так, чтобы его правый крайнаходится на правом краю окна.

1 голос
/ 19 июня 2011

Используйте Math.max () и Math.min () , который выбирает большее / меньшее значение предоставленных переменных, например: 

var pos = $(this).offset();
        var width = $(this).width();
        userPreviewCon.css({
            left: Math.min((Math.max(0,pos.left + 30)+$(this).width(),$(window).width()) + 'px',
            top: Math.min(Math.max(0,pos.top + 15)+$(this).height(),$(window).height()) + 'px'
        }).fadeIn();

Таким образом, если вычисленное значение равно > 0, то 0 является более высоким значением и будет выбрано, если оно пытается выйти за пределы слева. Аналогично, если x+width>window.width(), нижнее значение, то есть window.width() будет использоваться с правой стороны.

...