JQuery Overlay Позиционирование по умолчанию - PullRequest
Новая
       22

JQuery Overlay Позиционирование по умолчанию

0 голосов
/ 27 февраля 2012

У меня есть инструменты jquery, наложенные на один из моих блогов WordPress, и у меня есть код, который удерживает его в том положении, в котором я хочу его видеть при изменении размера окна. Но при первом щелчке, чтобы загрузить оверлей, он отображается в центре страницы, мне нужно установить слева дополнительные 250 пикселей.

Вот мой код для позиционирования: 

$(document).ready(function() { setDef() });

function setDef() {
var w = $('.simple_overlay').width();//get width of overlay
    var h = $('.simple_overlay').height(); //get height of overlay
    var l = ($(window).width() - w) / 2 + 250;  //calculate left property
    var t = ($(window).height() - h) / 2  //calculate top property
$('.simple_overlay').css({ 'left': l })
}

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

$(window).resize(function() { rePosition() });

function rePosition() {
    var w = $('.simple_overlay').width();//get width of overlay
    var h = $('.simple_overlay').height(); //get height of overlay
    var l = ($(window).width() - w) / 2 + 250;  //calculate left property
    var t = ($(window).height() - h) / 2  //calculate top property
    $('.simple_overlay').css({ 'left': l })

Я думаю, что мне нужно использовать что-то другое, чем (документ) .ready

Ps - Вы можете закрыть оверлей, нажав в верхнем правом углу, пока нет визуального индикатора, но курсор изменится.

Есть предложения?

Спасибо !!!

1 Ответ

2 голосов
/ 27 февраля 2012

Просто избавьтесь от функции setDef() и поместите вызов rePosition() в свой обработчик событий щелчка на изображении # search-box-nav (или какой-либо элемент имеет обработчик щелчка).

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

$("#search-box-nav img").bind("click", function() { rePosition(); });
...