JQuery.height () not returning correct value
I have a website that needs to be full screen on every screen. For this reason I am using alot jQuery to define height, maximum height, margins, ...
I have a margin-top on the container id. When I call the height, which is the base for determining the margin-top, at the end of the script, it doesn't give me the amount I want.
While the height of the container id is wrong in var containerh, var keepert won't be right either.
var height = $(window).height();
var width = $(window).width();
var containerw = width * 0.9;
var containerl = containerw * 0.5;
var containerh = $("#container").height();
var containert = containerh * 0.5;
$("#container").css("margin-left", "-" + containerl + "px");
$("#container").css("margin-top", "-" + containert + "px");
alert($("#container").height());
* {
margin: 0;
padding: 0;
overflow: hidden;
}
h1 {
font-family: 'Hobo';
color: #0070c0;
font-weight: lighter;
}
font {
color: #ed27b9;
}
#container {
position: absolute;
top: 46%;
left: 50%;
}
video {
border: 2px solid #134963;
}
<center>
<div id="container">
<center>
<h1>Leur <font>« experience »</font> en quelques mots...</h1>
</center>
<center id="boven">
<video class="video2" frameborder="0" poster="../beelden/image39.png" webkitAllowFullScreen mozallowfullscreen allowFullScreen controls>
<source src="../video/film1.mp4" type="video/mp4">
<source src="../video/film1.ogg" type="video/ogg">
<source src="../video/film1.webm" type="video/webm">
Your browser does not support the video tag
</video>
<video class="video2" frameborder="0" poster="../beelden/image40.png" webkitAllowFullScreen mozallowfullscreen allowFullScreen controls>
<source src="../video/film1.mp4" type="video/mp4">
<source src="../video/film1.ogg" type="video/ogg">
<source src="../video/film1.webm" type="video/webm">
Your browser does not support the video tag
</video>
</center>
Can anyone help me with the top-edge and height of the container? It returns 552px on my screen, but the container id height is 546px
what is my example
+1
source to share
2 answers