Я работаю с адаптивной темой (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, которая не загружалась сразу, но это все равно не решило мою проблему с изменением размера, если я не изменю размер, а затем не обновлю страницу. Я не могу не чувствовать, что я так близок к решению, но просто не знаю, куда идти отсюда.