[英]jQuery CSS method update on resize?
After struggling to vertically centre a div
inside the body
element using the "conventional" methods, I've decided to create a small jQuery function that figures out how far from the top an element needs to be to be "centred". 在使用“常规”方法努力使div
在body
元素内部垂直居中之后,我决定创建一个小的jQuery函数,以计算需要将元素“居中”到顶部的距离。
It works like this: 它是这样的:
For example if the body
had a width and height of 1000px
and this body
had a div.inner
child that had a width and height of 400px
the margin-top
of div.inner
would be 300px
because (1000-400) / 2 = 300
. 例如,如果body
部的宽度和高度1000px
和该body
有一个div.inner
的孩子,有一个宽度和高度400px
的margin-top
的div.inner
将是300px
,因为(1000-400) / 2 = 300
。
Here is a diagram to further explain what I mean: 这是进一步解释我的意思的图表:
NOTE : X
represents the margin-top
of the div.inner
(as I didn't have enough space for "Margin Top = " ). 注意 : X
代表div.inner
的页margin-top
(因为我没有足够的空间容纳“ Margin Top =” )。
To my amazement this actually works!!! 令我惊讶的是,它确实有效!!! Here is the test code: 这是测试代码:
// set the margin top for ".vertical-centre" elements $(".vertical-centre").each(function() { // set the margin-top for the child $(this).css("margin-top", function() { // NOTE: margin = (container.height - child.height) / 2 var margin = ($(this).parent().height() - $(this).height()) / 2; // default the margin to zero if it's a negative number // round the margin down to the nearest whole number // specify that the margin-top is in pixels return Math.floor(Math.max(0, margin)) + "px"; }); });
body { width: 100px; height: 100px; margin: 0; padding: 0; border: 1px solid black } div.inner { width: 40px; height: 40px; background-color: blue } .horizontal-centre { display: block; margin-left: auto; margin-right: auto }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner horizontal-centre vertical-centre"></div>
NOTE : I made the example above smaller so you could see it properly. 注意 :我使上面的示例较小,因此您可以正确看到它。
Unfortunately though, there is now another problem, when I resize the browser the margin-top
of the div.inner
element stays the same. 但是不幸的是,现在还有另一个问题,当我调整浏览器的大小时, div.inner
元素的margin-top
保持不变。
I would like for it to be responsive and update it's margin-top
property to the appropriate value when the window has been resized otherwise div.inner
will go out of view and the page will look a like this: 我希望它能够响应并在调整窗口大小div.inner
其margin-top
属性更新为适当的值,否则div.inner
将不div.inner
,页面将如下所示:
Wrap you code in a function 将代码包装在函数中
function align() {
$(".vertical-centre").each(function() {
// set the margin-top for the child
$(this).css("margin-top", function() {
// NOTE: margin = (container.height - child.height) / 2
var margin = ($(this).parent().height() - $(this).height()) / 2;
// default the margin to zero if it's a negative number
// round the margin down to the nearest whole number
// specify that the margin-top is in pixels
return Math.floor(Math.max(0, margin)) + "px";
});
});
}
And run it on window resize as well 并在窗口调整大小上运行它
align(); // first run
$(window).on('resize', align); // when window resize
You could use https://api.jquery.com/resize/ 您可以使用https://api.jquery.com/resize/
Create a function of your code 创建代码功能
function init_center() {..
Try calling the init_center
function from the resize event of window 尝试从窗口的大小调整事件中调用init_center
函数
SNIPPET SNIPPET
function init_center() { // set the margin top for ".vertical-centre" elements $(".vertical-centre").each(function() { // set the margin-top for the child $(this).css("margin-top", function() { // NOTE: margin = (container.height - child.height) / 2 var margin = ($(this).parent().height() - $(this).height()) / 2; // default the margin to zero if it's a negative number // round the margin down to the nearest whole number // specify that the margin-top is in pixels return Math.floor(Math.max(0, margin)) + "px"; }); }); } $( window ).resize(init_center); // Handle resize of window init_center(); // Doing it first time
body { width: 400px; height: 400px; margin: 0; padding: 0; border: 1px solid black } div.inner { width: 200px; height: 200px; background-color: blue } .horizontal-centre { display: block; margin-left: auto; margin-right: auto }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner horizontal-centre vertical-centre"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.