在HTML5中动态调用jQuery函数响应布局

我正在Drupal中使用响应主题（Omega），它检测浏览器大小并根据为特定屏幕尺寸（700px +，900px +和1100px +）提供的CSS更改页面布局。在HTML5中动态调用jQuery函数响应布局

这样做我相信通过添加媒体查询和/或添加css类到body标签。

我有一个稍微变化的函数，我想调用浏览器窗口大小变化的反应，但它必须响应，I.E.调用没有页面重新加载的相对功能

可以这样做吗？

我现在有这样的事情：

$(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，直到我调整窗口大小，并且它还需要刷新，然后才能识别窗口已调整大小。

我很感激任何帮助，我可以得到这一点，在此先感谢。

编辑

所以我修改我的代码看起来像这样

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

这现在已经解决了该问题与股利不加载向右走，但它仍然没有按除非我调整大小然后刷新页面，否则我不会修复调整大小的问题。我不禁感到自己如此接近解决方案，但只是不知道该从哪里出发。

来源

2012-02-16 The Pixelworx

的不最初称可以很容易地通过简单的最初自己调用它来解决：

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

至于需要刷新屏幕，这不应该是这样的。如果多次调用插件，我会怀疑问题在于您使用的插件不能正常工作，但我对该插件不熟悉。

来源

2012-02-16 15:57:28

插件我现在用的就是这个 http://codecanyon.net/item/grid-accordion/full_screen_preview/141991 我不使用jQuery是热，并询问是否插件作家他有一个响应版本，但他说目前只在生产中 – 2012-02-16 16:06:40

我已经对上述代码做了一些更改，但它仍然没有完全解决我的问题，您是否能够提供更多的帮助？谢谢。 – 2012-02-17 14:55:22

我不太确定我还能做什么。如果应用两次，许多插件无法正常工作。除了修改插件之外，唯一的解决方法是非常糟糕的。您可以保留原始'.accordion'的副本，然后每次删除插件所连接的副本，克隆原始文件并重新附加插件。或者你可以尝试找出插件所做的一切，将其逆转，然后重新应用。所有不好的选择。 – 2012-02-17 15:02:01

在HTML5中动态调用jQuery函数响应布局

回答

相关问题