在窗口大小调整时运行jQuery脚本
在窗口大小调整时运行jQuery脚本
提问于 2014-07-11 00:40:09
我有一些脚本可以在窗口大小调整时运行各种函数，
$.event.add(window, 'load', resizeFrame);
$.event.add(window, 'resize', resizeFrame);
function resizeFrame(){
// various scripts //
}这是非常好的工作，我在那里运行的脚本也工作。然后，我有了一个单独的脚本，它在文档加载上设置各种div的高度，这也很好。
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将在加载时调整一次大小，但在窗口大小调整时不会再次调整大小。我就是这样把这两者结合起来的，
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，
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();
};回答 2
Stack Overflow用户
回答已采纳
发布于 2014-07-11 01:11:14
你的负载事件不是在我试过的样本中发射的。
不要注册当前的事件，尝试如下：
JSFiddle：http://jsfiddle.net/j9SR5/1/
// 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首先将高度重置到它们的自然状态。
// Revert to height based on content
target.each(function () {
$(this).css("height", '');
});Stack Overflow用户
发布于 2014-07-11 00:47:58
jQuery只是包装标准的调整DOM事件，例如。
window.onresize = function(event) {
...
};jQuery可能会做一些工作，以确保在所有浏览器中一致触发调整大小事件，但我不确定是否有任何浏览器不同，
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24693509
复制相关文章
点击加载更多
相似问题
401:从Twitter API检索请求令牌时需要授权
Twitter Stream API - 401未经授权
需要AngularJs "401授权“的Vimeo API请求
Twitter授权/签名的get请求返回401未授权
Twitter401未授权-- OAuth请求令牌
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
