Browsers have default padding for HTML page.
For example my FF sets 8px margin of body element by default.
I can calculate default width padding for HTML page using
jQuery(window).width() - jQuery('body').innerWidth();
due to body element spans all available browser viewport width.
Also I have other browser which sets different values for width and height padding.
Could you propose way to calculate height padding?
Previous code will not work due to body inner height will return actual page content height and will not span all available height.
Do you really need to calculate the padding? The padding is defined in an element's css setting for padding and margin.
You can get these easily in jQuery:
// Select the body element.
var bodyElement = $('body');
// Get the paddings
var widthPadding = bodyElement.css('padding-left') + bodyElement.css('padding-right');
var heightPadding = bodyElement.css('padding-top') + bodyElement.css('padding-bottom');
// Get the margins
var widthMargin = bodyElement.css('margin-left') + bodyElement.css('margin-right');
var heightMargin = bodyElement.css('margin-top') + bodyElement.css('margin-bottom');
You can remove the default user-agent (i.e. the browser's) settings by defining in your css file:
body {
margin: 0;
padding: 0;
}
Bypass the problem and use a CSS reset.
With a good reset, you will not have to calculate these as they will be set by yourself.
Related
FACTS:
clientHeight: Returns the height of an element, including padding
offsetHeight: Returns the height of an element, including padding, border and scrollbar
Conclusion:
offsetHeight should return more pixels than clientHeight. offsetHeight is bigger than clientHeight.
Question:
When I use these two properties on HTML tag, it returns 8 from offsetHeight and 778 from clientHeight.
Why's that? offsetHeight should be bigger than clientHeight, shouldn't it?
Then why is it only 8 pixels? What's happening here?
Code:
<!DOCTYPE html>
<html id = "foo">
<body>
<script>
var element = document.getElementById('foo');
var osHeight = element.offsetHeight;
var cHeight = element.clientHeight;
document.write("Offset Height is " + osHeight + "<br/>");
document.write("Client Height is " + cHeight);
</script>
</body>
</html>
Output:
Offset Height is 8
Client Height is 778
the clientHeight property is special for the html element. It returns the height of the browser's client area without the horizontal scrollbar for any doctype.
If no doctype is specified, the clientHeight property of the html element contains different values in the browsers.
detail:http://help.dottoro.com/ljcadejj.php
the offsetHeight property is special for the html element.
It returns the height of the browser's client area without the horizontal scrollbar in Internet Explorer like the clientHeight property of the html element.
In Firefox, Opera, Google Chrome and Safari, it returns the total height of the document.
detail: http://help.dottoro.com/ljuxqbfx.php
if you set *{padding:0px;margin:0px;} in css, offsetHeight will return 0 ;
http://jsfiddle.net/ufxt5Lzq/1/
Here, the client height is the height of the browser window. But since your html code is empty (i.e. it does not have any content), hence the offset height is 8 which is only the height of the area occupied by the <html> tag.
Isn't it a browser issue...? This is the output from Maxthon 4.4.3.2000 console. I ran the code on this page.
As stated by some of the other answers here, you're checking the height of a blank HTML element with no style customizations, so the clientHeight and offsetHeight are going to be the same regardless. The content you're writing to the element are not inserted until after the document is loaded and the heights are checked, therefore producing a weird result.
Take a look at this JSFiddle. I've set up a check on an element that has content and a border. You are indeed correct that offsetHeight is larger.
If you need to do checks on an element's size, height or width, you need to do these checks after you've manipulated the innerHTML, or you won't get an accurate result because you're checking the original element size instead of the manipulated element size.
CSS:
#foo {
border: 3px solid #000;
height: 24px;
padding: 6px;
margin: 6px;
overflow: scroll;
}
HTML:
<div id="foo">
Guess my height?<br />
<br />
<br />
</div>
<div id="height"></div>
JS:
function writeLn(content) {
document.getElementById('height').innerHTML += content + '<br />';
}
function showHeights() {
var element = document.getElementById('foo');
var osHeight = element.offsetHeight;
var cHeight = element.clientHeight;
writeLn('element.offsetHeight = ' + osHeight);
writeLn('element.clientHeight = ' + cHeight);
}
showHeights();
Is there a way to get the entire width of a div including margins without using JQuery?
div.outerWidth
doesn't seem to work and clientWidth excludes margins.
As far as I recall, there is no single property value to get this.
Basically you need to get the margin width (left and right) and add them to your existing dimensions. Additionally, unless you are using box-sizing (By default you are not) you will need to add padding left and right as well.
You can use getComputedStyle to get the actual values you require. For example:
window.getComputedStyle(element, null).getPropertyValue("margin-left");
Edit:
I forgot border :P.... left and right border width as well...
Please have a look below code, there is being alert total width of div 220 including margin.
<style>
#myDiv{
width:200px;
height:200px;
margin:10px;
}
</style>
<div id='myDiv'>
</div>
<script>
var div = document.getElementById('myDiv');
var style = window.getComputedStyle(div);
var leftMargin = parseInt(style.marginLeft.match(/\d+/));
var rightMargin = parseInt(style.marginRight.match(/\d+/));
alert(div.clientWidth + leftMargin + rightMargin);
</script>
I am trying to set up a black border around a webpage. For the left and right side, just making "width: 5%;" in the CSS is fine. But then I want JS/jQuery to work out how many pixels that is, and make that the height of the top and bottom div.
Is this possible?
Thanks.
This should work for you
var val = $(".leftAndRight").width();
$(".topAndBottom").height(val);
Or with one line:
$(".topAndBottom").height($(".leftAndRight").width());
You can determine the value for the border width programmatically, assign it to all four borders, and also refresh it any time you resize:
var width,
drawBorder = function () {
var body = $('body'),
width = body.width() * 0.05;
body.css('border-width', width + 'px');
};
drawBorder();
$(window).resize(function () {
drawBorder();
});
Demo
If you set the left and right width in your stylesheet and then use JS to give the same border width to the top and bottom, unless you use a resize function your left and right borders will change every time you resize but your top and bottom borders will remain fixed.
You can use .width() to find width without the border and .outerWidth to find the width including the border. I think .outerWidth also gives you the width with the padding you may have to subtract that.
I'm after a simple javascript function that will detect the total height of my web page which is dynamic and apply it to the height of a div which is the page background. Would it be possible to implement it?
The div is called bg...
Any ideas? Thanks in advance
Try:
var height = body.offsetHeight ? body.offsetHeight : html.offsetHeight;
document.getElementById ('divID').style.height = height + 'px';
Here an useful documentation:
http://www.quirksmode.org/dom/w3c_cssom.html
Im using currently following code to do that:
var getBodyHeight = function () {
var d = document,
bd = d.body,
dd = d.documentElement,
max = Math.max(
bd.scrollHeight,
bd.offsetHeight,
bd.clientHeight,
dd.offsetHeight,
dd.scrollHeight,
dd.clientHeight
);
return max;
};
This is what I use to figure out the height of content in iFrame for the purpose of adjusting it properly.
var body = document.body,
html = document.documentElement,
height = 0;
height = body.offsetHeight;
if(height === 0){
height = html.offsetHeight;
}
The reason for checking the body first is that the height of html is actually the height of the iFrame, which could be bigger than the content itself. However, in certain cases such as when body has no height, then it falls back to use height of html instead.
For your case, you might want to experiment with a similar scheme. I'm not sure why you have to use a div to set background so I can't really suggest a better alternative (if any).
Solution based on the comment below:
What you can do is the following. Have a div inside the main container with position absolute, width/height 100% and z-index -1. Then it will always be the correct size no matter how large the contain grow or shrink. With this approach, you will have to make sure that container always has size. This is a pure CSS solution, which might be simpler than using Javascript to adjust.
var height = screen.height;
var width = screen.width;
var resolution = width+"x"+height;
alert(resolution);
it gives the resolution of the screen.i know you want page height and width but it will help you later in web development. i am using it as most important part for my web!
I am trying to animate the div to its full height when a button is pressed and come back to its original height if the button is clicked again. The full height of the div is auto as it contains text with different word counts. I tried doing the below codes but it does not work properly.
The CSS :
.category_brief{
text-align:justify;
height:100px;
overflow:hidden;
}
Example 1 : This code does not animate the div when opening to full height , but animates while coming back to old height.
$(".slide").toggle(function(){
$('.category_brief').animate({height:'100%'},200);
},function(){
$('.category_brief').animate({height:100},200);
});
Example 2 : The output of this code is the same as of Example 1
var toggle = true, oldHeight = 0;
$('.slide').click(function(event) {
event.preventDefault();
var $ele = $('.category_brief');
var toHeight = ((toggle = !toggle) ? oldHeight : newHeight);
oldHeight = $ele.height();
var newHeight = $ele.height('auto').height();
$ele.animate({ height: toHeight });
});
Example 3 : This code animates the div to its full height but does not toggle.
var slide = $('.slide');
var slidepanel = $('.category_brief');
// On click, animate it to its full natural height
slide.click(function(event) {
event.preventDefault();
var oldHeight, newHeight;
// Measure before and after
oldHeight = slidepanel.height();
newHeight = slidepanel.height('auto').height();
// Put back the short height (you could grab this first
slidepanel.height(oldHeight);
slidepanel.animate({height: newHeight + "px"});
});
If possible please provide a bit explanation also as i am a newbie..
Update : Solved by the idea from #chazm..
#chazm : thanks for the idea. I got it working by combining 1st and 3rd example ... Here is the code in case anyone needs it .
var slidepanel = $('.category_brief');
$(".slide").toggle(function(){
var oldHeight, newHeight;
// Measure before and after
oldHeight = slidepanel.height();
newHeight = slidepanel.height('auto').height();
// Put back the short height (you could grab this first
slidepanel.height(oldHeight);
slidepanel.animate({height: newHeight + "px"})
},function(){
$('.category_brief').animate({height:100},300);
});
Working with 'auto' height it always quite tricky. I think there are different issues in your examples.
1) Browser can't define correct 100% height. Possible solutions - define height to all its parents. Either set it to 100% (till html tag) or set closest parent as relative (because height is calculated from closest relative parent). If you want to animate div to 100% of the entire page - think of the absolute positioning
2)The same as above i assume
3)When this code supposed to toggle back it can't determine that it should become lower that it is now. Not absolutely sure why though. Probably because 'auto' height from 100% is set to something wrong. You may check in firebug what value it has on the computed tab after that function is toggled back. Probably it will give you a clue
Try to combine 2) and 3). The idea - if toggle is true (it shoud be lowered) then set newHeight = slidepanel.height('100').
The solution depends on your implementation needs. If you know that at first the div should be 100px etc in height and when you click, it maximizes to an unknown height, the following solution would work. If you had a structure similar to
<div class="outer">
<div class="wrapper">Content of unknown length here</div>
</div>
and css
div.wrapper { position:relative; height:100px; overflow:hidden; }
div.outer { position:absolute; height:auto; }
then you'd get a div that is 100px in height, with the content that doesn't fit in 100px cut off. Now when you press the desired button, you could get the height of the wrapper div, since it is a long as it's content is (even though you only see the top 100px) and set the outer div's height according to it. Like so
var newHeight = $('div.wrapper').height();
$('div.outer').animate({height:newHeight},200);
Which would then animate the outer div to display the whole contents. When you click the button again, you could just do
$('div.outer').animate({height:'100px'},200);
And you would again have only the 100px height.