首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在窗口大小调整时运行jQuery脚本

在窗口大小调整时运行jQuery脚本
EN

Stack Overflow用户
提问于 2014-07-11 08:40:09
回答 2查看 1.1K关注 0票数 1

我有一些脚本可以在窗口大小调整时运行各种函数,

代码语言:javascript
代码运行次数:0
运行
复制
$.event.add(window, 'load', resizeFrame);
$.event.add(window, 'resize', resizeFrame);

function resizeFrame(){
    // various scripts //
}

这是非常好的工作,我在那里运行的脚本也工作。然后,我有了一个单独的脚本,它在文档加载上设置各种div的高度,这也很好。

代码语言:javascript
代码运行次数:0
运行
复制
var h = 0,
    target = $('.home #content .items-row .item article');

target.each(function(){
    if (h < $(this).height()){
        h = $(this).height();
    }
}); 
target.each(function () {
    $(this).css("height", h + 'px');
});
$('.testimonials .items-row').each(function () {
    $('.span4 article', this).css('height',
        Math.max.apply( Math, 
            $.map($('.span4 article', this), function(x) {
                return $(x).height();
            })
        )
    );
});

但是,当我尝试将两者结合起来时,我的div将在加载时调整一次大小,但在窗口大小调整时不会再次调整大小。我就是这样把这两者结合起来的,

代码语言:javascript
代码运行次数:0
运行
复制
function articleResize(){
    var h = 0,
        target = $('.home #content .items-row .item article');

    target.each(function(){
        if (h < $(this).height()){
            h = $(this).height();
        }
    }); 
    target.each(function () {
        $(this).css("height", h + 'px');
    });

    $('.testimonials .items-row').each(function () {
        $('.span4 article', this).css('height',
            Math.max.apply( Math, 
                $.map($('.span4 article', this), function(x) {
                    return $(x).height();
                })
            )
        );
    });
}

$.event.add(window, 'load', resizeFrame);
$.event.add(window, 'resize', resizeFrame);

function resizeFrame(){
    articleResize();
}

如果任何人有任何线索,我们将不胜感激。

编辑

这里的背景是整个resizeFrame

代码语言:javascript
代码运行次数:0
运行
复制
function resizeFrame(){

    var screenWidth = $(window).width();

    function phoneEnable(){
        $('#MainNav ul.nav').prependTo('.sidr-inner').addClass('nav-list nav-collapse');
        $('#MainSocial ul.roundIcons').prependTo('.sidr-inner');
    };
    function phoneDisable(){
        $('#sidr ul.nav').prependTo('#MainNav').removeClass('nav-list nav-collapse');
        $('#sidr ul.roundIcons').prependTo('#MainSocial');
    }

    if (screenWidth >= 980){
        phoneDisable();
    } else{
        phoneEnable();
    };

        var highestBox = 0;
    $('.blog-featured .item article', this).each(function(){
        if($(this).height() > highestBox)
        highestBox = $(this).height();
        });
    $('.blog-featured .item article',this).height(highestBox);

    articleResize();
};
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-07-11 09:11:14

你的负载事件不是在我试过的样本中发射的。

不要注册当前的事件,尝试如下:

JSFiddle:http://jsfiddle.net/j9SR5/1/

代码语言:javascript
代码运行次数:0
运行
复制
// jQuery DOM ready shortcut event handler (with locally scoped $)
jQuery(function($){

   // Register for window resize
   $(window).resize(resizeFrame);

   // Do initial resize
   resizeFrame();
});

更新:http://jsfiddle.net/TrueBlueAussie/j9SR5/5/

您正在设置一个固定的高度,因此下次调整高度时,将按照前面指定的高度进行调整(不会更改)。新JSFiddle首先将高度重置到它们的自然状态。

代码语言:javascript
代码运行次数:0
运行
复制
// Revert to height based on content
target.each(function () {
    $(this).css("height", '');
});
票数 0
EN

Stack Overflow用户

发布于 2014-07-11 08:47:58

jQuery只是包装标准的调整DOM事件,例如。

代码语言:javascript
代码运行次数:0
运行
复制
window.onresize = function(event) {
    ...
};

jQuery可能会做一些工作,以确保在所有浏览器中一致触发调整大小事件,但我不确定是否有任何浏览器不同,

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24693509

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档