2013-04-07 2 views
1

Я работаю на быстро реагирующем сайте и имею несколько конкретных функций, которые мне нужно запускать в определенные моменты при изменении размера окна: когда окно достигает определенной «мобильной ширины», когда он достигает определенной ширины «рабочего стола» и когда она достигает любой ширины в указанном массиве чисел (мои точки останова CSS).jQuery: функция триггера, когда ширина окна соответствует любому значению в массиве

Вот урезанная скрипка, показывающая, где я нахожусь (все прилагаемые элементы абзаца заполнители, где мои функции будут идти): http://jsfiddle.net/ygwug/

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

var breakpoints = [320, 480, 550, 650, 720, 790, 1000, 1190]; 
    window_w = $wind.width(); 

var breakpointHit = function() { 
    $('body').append("<p>Breakpoint was hit!</p>"); 
} 

if ($.inArray(window_w, breakpoints) > -1) { 
    breakpointHit(); 
} 

Из того, что я понимаю, $ .inArray должна возвращать -1, если значение не существует в массиве, а индекс стоимости, если она действительно существует, поэтому я использовал «> -1», чтобы определить, существует ли значение в массиве. Но поскольку я не вижу никаких синтаксических ошибок в Dev Tools, в моей логике должна быть ошибка.

Если бы кто-нибудь мог помочь мне указать мне в правильном направлении, я был бы очень признателен. Благодаря!

+1

Пробовал ваш jsfiddle как есть - кажется, работает отлично. Точка останова ударяется. Получение окна до точной ширины для одного из ваших значений в массиве жестко, хотя :-) – Fergus

+0

То же заключение, что и у Фергуса. Я, однако, не смог получить свое окно до этой точной ширины. – user1167442

+0

О, извините, если это было непонятно. Я хочу, чтобы функция срабатывала, когда точка останова передавалась, так как вы изменяете размер окна более узким и более широким, вы должны увидеть несколько «Точка останова была удалена!». сообщений, распределенных между настольными/мобильными сообщениями. Прямо сейчас все, что я вижу, либо «Окно теперь мобильное». или «Окно теперь является рабочим столом». –

ответ

3

Проверить это модификация оригинального jFiddle: http://jsfiddle.net/hKRrm/1/

Что изменилось:

  • Перевезу ваш тест точки останова в окне изменения размера
  • позволяет breakpointHit принять точку останова, который был удар
  • измените свой тест точки останова так, чтобы он был window_w < breakpoint, как наиболее вероятно предназначено (== никогда не доставит вас нигде)
  • Добавить в кэш текущей точки останова, чтобы предотвратить его обстрел более одного раза
  • переместил mobileCheck вызов в функцию breakpointHit, где он должен быть. Под этим я подразумеваю, что вы только хотите проверить, находитесь ли вы на мобильном телефоне, если точка останова поражена не все время.

Это может или не может ответить на ваш вопрос, но это то, о чем я толкую ваш вопрос как просьбу.

+0

Ах, это здорово! Спасибо за работу, я обязательно многому научусь копаться в коде, это даже лучшая функциональность, чем я изначально планировал. –

+1

@ R.J. Рад слышать это. Вы были в основном там, я только немного изменил его, так что вы не очень далеко от правильного курса. –

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