Динамический вызов функций jQuery в адаптивном HTML5-макете - PullRequest
0 голосов
/ 16 февраля 2012

Я работаю с адаптивной темой (Omega) в Drupal, которая определяет размер браузера и изменяет макет страницы на основе CSS для определенных размеров экрана (700px +, 900px + и 1100px +).

Я полагаю, что это происходит путем добавления медиазапросов и / или добавления классов css в тег body.

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

Можно ли это сделать?

У меня сейчас есть что-то вроде этого:

$(window).resize(function(){
 var width = $("body").width();
   if(width>1100)
     { 

                        $('.accordion').gridAccordion({width:1160, height:526, columns:4, distance:2, closedPanelWidth:50, closedPanelHeight:50, alignType:'centerCenter', slideshow:true,
                        panelProperties:{

                        }});

     }


      if(width>900)
     { 

                    $('.accordion').gridAccordion({width:920, height:417, columns:4, distance:2, closedPanelWidth:50, closedPanelHeight:50, alignType:'centerCenter', slideshow:true,
                    panelProperties:{

                    }});

     }

});

Проблема в том, что он не загружает мой div, пока я не изменяю размер окна, и также требует обновления, прежде чем он распознает, что размер окна был изменен.

Я ценю любую помощь, которую я могу получить в этом, заранее спасибо.

EDIT

Итак, я изменил свой код, чтобы он выглядел следующим образом

$(window).bind('resize load',function(){ var width = $("#zone-header").width(); if(width>1100)...

Теперь это исправило проблему с div, которая не загружалась сразу, но это все равно не решило мою проблему с изменением размера, если я не изменю размер, а затем не обновлю страницу. Я не могу не чувствовать, что я так близок к решению, но просто не знаю, куда идти отсюда.

1 Ответ

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

Первоначальный вызов не может быть легко решен простым первоначальным вызовом:

$(window).resize(function(){
    // stuff
}).resize();  // fire the resize

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...