Working in an environment where only css-selectors are available for retrieving elements I want to obtain the element in the DOM which covers the whole browser-window. Using developer tools I found out that <body> has some margin in my case which makes it unsuitable for my requirements.
I further discovered that the <html> element covers the whole area of the browser-window. Is it safe to use that DOM-node when it is about the document properties? I.e. getting the width/height for example?
Does by any chance <html> correspond to what is referred to as document in javascript?
EDIT: Side note on the setup:
I'm working with interns wrapped WD version and want to coordinate mouse movements relative to the document. I was aiming for using a method like selectByCssSelector to coodinate mouse movements with respect to that selected element. Working with the <html> node here seems to work out so far. I just never touched the <html> node before and never saw anyone else do, that is why I wanted to be assured that it is not bad using that node.
The document object is a DOM HTML object so, yes, it does correspond to the <html> tag, but not in the way you think. It is not like a <body> or <span> tag. It tells the browser that the following code or information is HTML. Just like how <?php tells the server that there is PHP code and <script type="text/javascript"> tells the browser that there is Javascript code. For more information on that, check out this page.
If you don't want to get the width and height of the body, you can use window.innerWidth and window.innerHeight. This should get the height and width of the entire window (excluding any scrollbars or toolboxes).
You can also use documentElement to get the width and height of the entire document.
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
This may be the final answer that you are looking for, but you can also find the width and height of the entire document by using document in jQuery.
var width = $(document).width();
var height = $(document).height();
The html represents all markup and content in the document, but it does not correspond to the document object. Instead, it appears as its property, document.documentElement (though it can be referred to in many other ways, too, e.g. document.children[0]).
As you note, the body element may have a margin, and by default it has a 8px margin on all sides. Thus, instead of it, the html element is the one you should refer to as corresponding to the entire viewport in the browser window, assuming that you let the dimensions of the html element default to that. You can get the dimensions as document.documentElement.clientWidth and document.documentElement.clientHeight.
However, for historical reasons, by CSS definitions, the background of the html element always covers the entire canvas even if the element has been set to smaller dimensions. You can see this if you set both a background and a border on it; the background may extend outside the border. Moreover, the CSS spec also specifies that if no background set for html, the background of body is used instead.
Related
I am working on an extension that will give you a response based on your text, this works and is good and all, but the height of the browser action won't reset.
To try to fix this, I have attempted to resize the window using window.resizeTo and tried to manually set the height of both 'html' and 'body' using jQuery. Nothing has worked. Is this a bug with Google Chrome or am I doing something wrong? This does not make it work, as it stays at the same size.
As you can see in the pictures, the window starts out perfectly sized and then I enter a question and go back to the window being larger than it was initially.
The popup can't become smaller than its content and/or CSS allows.
Find the element and/or CSS rule that occupies the full height by inspecting the popup (right-click it and choose Inspect popup), point over various elements inside <body> to see them highlighted and their actual height displayed. If all the elements are smaller than the popup it could only mean that you have a CSS rule on <body> or <html> that specifies the minimum height. If possible, remove that rule from the CSS or override it.
The problem in your case was a CSS rule html {min-height: 100%} in one of the 3rd party styles.
Set both height and min-height for body and html, for example like this:
document.body.style.height = '0px';
document.body.style.minHeight = '0px';
document.documentElement.style.height = '0px';
document.documentElement.style.minHeight = '0px';
Or use 'auto' instead of '0px'.
Is it possible to have text fill the page depending on the window dimensions?
For example, I would like to have something like the following:
The text of the left of the screen fills the div that is it in. If I were to re-size the window the number of lines of "ExampleText" should change.
Unfortunately I don't have any code to show since I have no idea how to start this. I imagine that I'll have to use JS for some of it, but I'm not sure how to get JS to gather the dimensions of the window.
Many thanks.
You can get the height of the window in javascript with:
var h = window.innerHeight;
If you know the line-height of "ExampleText" (you may have already set it in the CSS or you can try getting it with document.getElementById('div_name').style.lineHeight), then divide the the window height by the line-height. That should give you the number of lines that'll fit in the window.
Alternatively, in CSS, you can set a div to height: 100% (assuming all parent elements have a 100% height) and then set an inner div to position:absolute;bottom:0; so the text starts counting from the bottom to the top. You'll have to deal with choosing to show scrollbars or not, since the text will inevitably be larger than the containing div.
jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:
$('#contentDiv').width($('#containerDiv').width())
In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.
In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?
The best solution I found while working around this solution is this:
http://chris-spittles.co.uk/?p=531
jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!
UPDATED:
None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.
To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).
The function looks like this:
function noScrollWidth(div){
var measureDiv = $('<div id="measureDiv">');
div.append(measureDiv);
var width = measureDiv.outerWidth();
measureDiv.remove();
return width
};
I then use this to size my content div:
$('#contentDiv').width(noScrollWidth($('#containerDiv')));
Working fiddle.
Try this:
$('#contentDiv').width($('#containerDiv')[0].clientWidth)
For more information about that solution, see this StackOverflow answer.
Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.
Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.
Are there any workarounds to read proper element dimensions when it's display value is set to none?
Well, one would be to hide it without changing the display, but visibility property instead. While it gives proper dimensions, the element affects document flow.
One more way I can think of is opacity, but then the browser support kicks in.
The element I'm working with is appended to body.
Oh yes, I'm looking for computed style. There are no static CSS properties set for dimensions etc.
Any other solutions?
When display is none, by definition elements non-block elements have no dimensions. (Thanks, #Pekka) One potential way around this is to position the element far off-screen by setting position: absolute and left: -999em. The element will still exist so you can get its dimensions, but it won't appear in the document and should not affect flow.
There is a way to do it with offsetHeight and javascript
<script type="text/javascript">
<!--
onload=function() {
var divh = document.getElementById('top').offsetHeight;
alert(divh +"px");
}
//-->
</script>
I am currently working on an existing site that uses iframes(sigh!), these are pretty painful to work with and I'm having problems getting the height of the iframe to scale with the height of the HTML content.
I've tried a few different script snippets that floats around on the interwebs, but none of them have worked for me. I really want to use jQuery to do this, but that's not an option because IT wants to keep the size of the pageload down.
Does anyone know of good way to do this, in a way that works on both FF and IE 6+?
You should just be able to simply set the height and the width parameters - since these are both valid attributes of the iframe dom element.
function resize(width, height) {
var frame = document.getElementById('my_iframe');
frame.width = width;
frame.height = height;
}
Of course, this only applies if you are attempting to resize the iframe from it's parent element (the document with the actual iframe tag). If you are trying to resize the iframe from within the iframe (the document the iframe loads) you will need to call a public function of the parent element to perform the resize.
In iframe:
parent.resize(600, 800);