[英]jQuery multiple else if statements
I am trying to set a padding on a div based on the window height size. 我试图基于窗口高度大小在div上设置填充。 I simply couldn't find a better working way to center my content div vertically in another div with unknown dimensions.
我只是找不到更好的工作方式来将内容div垂直居中在尺寸未知的另一个div中。 My code is as it follows:
我的代码如下:
<script>
$(document).ready(function(){
var window_height = $(window).height();
var home_content = $('#home-content');
if(window_height <= 600) {
home_content.css({"padding-top", "13px"});
} else if(window_height > 600 && window_height <= 768) {
home_content.css({"padding-top", "97px"});
} else if(window_height > 768 && window_height <= 800) {
home_content.css({"padding-top", "113px"});
} else if(window_height > 800 && window_height <= 900) {
home_content.css({"padding-top", "163px"});
} else if(window_height > 900 && window_height <= 1050) {
home_content.css({"padding-top", "238px"});
} else if(window_height > 1050 && window_height <= 1080) {
home_content.css({"padding-top", "253px"});
} else if(window_height > 1080 && window_height <= 1200) {
home_content.css({"padding-top", "313px"});
} else {
}
});
</script>
It is not working. 它不起作用。 My web site is stuck on the preloader and simply won't load anyhing.
我的网站卡在了预加载器上,根本无法加载任何内容。 Any ideas where am I doing it wrong?
有什么想法我做错了吗?
Try changing: 尝试更改:
{"padding-top", "13px"}
to: 至:
{"padding-top":"13px"}
and so on... 等等...
The thing is that you can assign css style with jquery in two ways: 事实是,您可以通过两种方式为jquery分配CSS样式:
$("#element").css('padding', '30px');
(if you want to edit/add one style setting), or: (如果您要编辑/添加一种样式设置),或:
$("#element").css({'padding':'30px'});
(with this method, you can add how many settings as you like, just separate them with ,
, kudos to @dollarvar for pointing this out). (用这种方法,你可以添加多少设置,只要你喜欢,只要他们分开
,
,荣誉给@dollarvar指出这一点)。
The problem in your code was that you had an , instead of : . 在你的代码的问题是,你有一个,而不是:
Try this, You can remove {}
and use 试试这个,您可以删除
{}
并使用
home_content.css("padding-top", "13px");
instead of 代替
home_content.css({"padding-top", "13px"});
As an alternative instead of the JavaScript hack, you could make use of CSS Media Queries to specify the CSS rules to apply ( example ). 作为替代JavaScript的替代方法,您可以使用CSS Media Queries来指定要应用的CSS规则( 示例 )。 It does depend on exactly which browsers you need to support, http://caniuse.com/css-mediaqueries .
它确实取决于您需要支持哪些浏览器, http://caniuse.com/css-mediaqueries 。
@media (max-height : 599px) {
#home-content { padding-top: 13px; }
}
@media (min-height : 768px) {
#home-content { padding-top: 97px; }
}
@media (min-height : 800px) {
#home-content { padding-top: 113px; }
}
@media (min-height : 900px) {
#home-content { padding-top: 163px; }
}
...
This will also change the padding automatically when you resize your browser window, it's the same technique used for Responsive design. 调整浏览器窗口大小时,这也会自动更改填充,这与自适应设计所使用的技术相同。
EDIT: 编辑:
BUT, re-reading your actual question, it looks like your are trying to vertically center a div within a container. 但是,重新阅读您的实际问题,似乎您正在尝试将div在容器中垂直居中。 You really don't need to use any Javascript, you can do this completely with CSS and it will be much smoother: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
您真的不需要使用任何Javascript,就可以完全使用CSS来完成此操作,它会更加流畅: http : //coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css /
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
position: relative;
}
#home-container {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: 1px solid red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.