使用jQuery监听浏览器的宽度/高度变化 [英] Listen to browser width / height changes with jQuery

查看:2663
本文介绍了使用jQuery监听浏览器的宽度/高度变化的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一些在页面准备就绪时设置了绝对位置(CSS)的div,并且相对于另一个固定的div定位,这样可以正常工作。但是,在加载页面并设置所有内容之前,如果页面调整大小,那些绝对div不会跟随更改,移动到其他位置,我认为它们是相对于屏幕的顶部和左侧给出的值。 / p>

我用作起点的相对div的位置也可以相对于上面的位置改变位置。



有没有办法监听浏览器宽度/高度的变化,以使这些div保持在正确的位置。



在此先感谢!

解决方案

首先,您要将窗口调整大小事件绑定到您选择的函数。

  $(window).on(resize,methodToFixLayout); 

现在您可以确定新的高度和宽度,并从那里调整页面。

  function methodToFixLayout(e){
var winHeight = $(window).height();
var winWidth = $(window).width();
//调整元素css等.....
//$(|#someDiv\").css('someProperty',someValue基于winHeight和winWidth);
}

如果没有更详细的布局,很难说出你需要做出哪些改变确切但这应该让你朝着正确的方向前进。


I have some divs that are set with position absolute (CSS) when the page is ready, and are positioned relative to another fixed div, wich works fine. However, before the page is loaded and everything is set, if the page is resized, those absolute divs don't follow the changes, moving to other places, wich I think they are given values relative to top and left of the screen.

The position of the relative div I use as starting point to position the absolute ones may change position as well, relative to the ones above it.

Is there any way to listen the changes in the browser's width / height in order to make those divs stay placed in the right position.

Thanks in advance!

解决方案

First you want to start with binding the window resize event to a function of your choosing.

$(window).on("resize", methodToFixLayout);

Now you can determine the new heights and widths and make adjustments to the page from there.

function methodToFixLayout( e ) {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //adjust elements css etc.....
    //$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}

Without more specifics on your layout it's hard to tell what changes you'll need exactly but this should get you going in the right direction.

这篇关于使用jQuery监听浏览器的宽度/高度变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆