2015-07-17 14 views
0

Я использую пользовательский интерфейс jQuery для создания всплывающей подсказки для поля ввода поиска. Затем я хочу поместить всплывающую подсказку в соответствии с размером окна браузера (верхний, если меньше 768 пикселей, если больше).Изменить положение всплывающей подсказки при изменении окна

Я инициализируется подсказке с:

$('#search').tooltip({'placement':'top'}); 

Тогда я эту функцию, чтобы изменить размещение в зависимости от размера окна:

$(window).on('resize', function() { 
    if ($(window).width < 768) { 
     $("#damSearch").tooltip({'placement':'top'}); 
    } else { 
     $("#damSearch").tooltip({'placement':'left'}); 
    } 
}).trigger('resize'); 

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

[EDIT]

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

function positionTooltip() { 
    if (Modernizr.mq('(min-width: 768px)')) { 
     $("#damSearch").tooltip({'placement':'left'}); 
    } else { 
     $("#damSearch").tooltip({'placement':'bottom'}); 
    } 
} 

Затем следует в моем Javascript файл с:

$(document).ready(function() { 

    positionTooltip(); 
    // Fire the function on page load 

    $(window).resize(positionTooltip); 
    // Fire function on window resize event 

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

Как будто событие изменения размера не вызывает функцию.

[/ EDIT]

Как всегда вся помощь и совет высоко ценится. Тони.

ответ

0

вам нужно вызвать функцию ширина

if ($(window).width() < 768) { 

уведомление скобка ()

+0

Спасибо за вашу помощь PhilVarg но была опечатка в коде я вывесил. Я включил круглые скобки в свой исходный код, но оставил их при создании сообщения! Я обновил свой пост, чтобы отразить изменения, которые я сделал, чтобы попытаться (безуспешно) решить проблему. – tcarnell

Смежные вопросы