Here is the key question: How do you get the accurate offset top of an element (in this case text boxes) when scroll bars are present? Preferably all in javascript.
I have a page which will overflow the height of the browser window, which means there will be scroll bars. I have textboxes throughout the page with onblur events linked. Onblur the it will validate the value of the textobx. If the data is not valid. If not then it will/should move a speech bubble right on top of the textbox with an error message. element.offsettop doesn't seem to take into account any scroll bars which may be present on the page.
thank you! Please let me know if you don't understand what I'm asking.
Edit:
Can someone help me to find the height of the DOCUMENT CONTENT. Not the window height but the document content height so it will also include the height with scroll bars? Thanks!
Document sizes are a browser compatibility nightmare because, although all browsers expose clientHeight and scrollHeight properties, they don't all agree how the values are calculated.
There used to be a complex best-practice formula around for how you tested for correct height/width. This involved using document.documentElement properties if available or falling back on document properties and so on.
The simplest way to get correct height is to get all height values found on document, or documentElement, and use the highest one. This is basically what jQuery does:
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
Related
There are many ways of getting the height of a document, but due to different browser implementations most of them (I believe) return the highest of a number of values ... which is fine most of the time.
In my case I have a number of elements on the page that I know to be a smaller height than the window and viewport heights. What I'm trying to get is the actual height of all the rendered elements.
Things that don't work (with testing in Firefox):
$(document).height(); // gives the window height
document.body.scrollHeight; // gives 7, its always 7 I don't know why
document.body.offsetHeight; // also gives 7
document.documentElement.clientHeight; // sometimes gives window height
document.documentElement.scrollHeight; //gives window height
document.documentElement.offsetHeight; generally gives a value in the range of 23
At present I'm thinking that the way around this might be to insert a div with height: 0 at the bottom of my page and grab $(div).offset().top, but I feel that this is highly likely to go wrong at some point in the future.
So before I do that ...
Is there a way of knowing the content height when it's less than the window height?
EDIT:
People have asked for clarification. Heres a jsFiddle example of what I want / the results I'm getting.
https://jsfiddle.net/8Lu2zcw8/1/
Running that results in the same value for Win Height: and Doc Height being written out to the console.
EDIT2:
My issue was due to the body not wrapping the content correctly due to floated and absolutely positioned elements, as pointed out by #tim-vermaelen in the comments to his solution.
I suggest you use $(document.body).height().
In CSS you have to put:
html,
body { height: 100%; }
This will only give correct results in case of body padding, margin and borders of the body element are 0. When direct children are floating or put on position absolute, the height of these elements doesn't count. Hence for floating elements you always clearfix the parent to solve these wrapping issues.
If not you can use $(document.body).outerHeight(includeMargin)
$(document).height() will give you content size, not window's. If it gives you window's size, then you probably messed up your CSS. Also, you can try $('body').height()
beginner programmer so apologies if this is really obvious!
How can i get my website to open at a specific point on the page (in HTML)?
I can't find what this is called anywhere! Not Anchor etc. The website will be wider and longer than most screens. I want the screen/viewport to open at the very centre of a 2500x2500 pixel background.
I am working in DreamWeaver CC on Mac OS X 10
Thanks in advance!!
p.s no code to post, this is my first port of call in putting this together
You can get the client's screen with $(window).width() & $(window).height() , it's jQuery code so you'll have to add a balise script to the jQuery lib on your web page. Can you tell me more about what you want to do ? I have trouble understanding. You don't want any anchor but you want ? Apoligies for not understanding.
Try this bit of Javascript to fire when the page loads
window.onload = function(){
window.scrollTo(1250, 1250);
}
The window.scrollTo(x-coord,y-coord) function takes two parameters, x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left and y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.
I picked 1250, because that's 2500 divided by 2, but you may have to tweak that a little if you want that spot in the middle of the screen. You will have to get the screen's viewport and do some math.
(hint: window.innerWidth & window.innerHeight gives you the dimensions including the scroll bar; document.documentElement.clientWidth and document.documentElement.clientHeight is without the scrollbar)
The documentation for window.scrollTo() is here: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Some info about the viewport dimensions can be found here: http://ryanve.com/lab/dimensions/
As bryguy said, you can calculate the center of your screen and use scrollTo(). Alternatively, if you have a particular element that you want to scroll to, give the element an id and use the scrollIntoView() function. You can also center an invisible div positioning the div absolutely and setting the top and left values to 50%:
HTML
<div id="scrollToMe" style="position: absolute; top: 50%; left: 50%;"></div>
JS
window.onload = function() {
document.getElementById('scrollToMe').scrollIntoView();
};
You can do this without jQuery. You can use the native JavaScript function window.scrollTo() to scroll to the center.
To calculate the center of the screen all you have to do is:
For vertical center
Determine the height of the viewport: The height of the viewport is stored at document.documentElement.clientHeight.
Determine the height of the entire document: You can use document.documentElement.offsetHeight or document.body.scrollHeight to get the height of the entire document.
Calculate: Now simply subtract the viewport height from the document height and divide it by two like this:
(document.documentElement.offsetHeight - document.documentElement.clientHeight)/2
For horizontal center
Determine the width of the viewport: The width of the viewport is stored at document.documentElement.clientWidth.
Determine the width of the entire document: You can use document.body.scrollWidth to accomplish this.
Calculate: Now simply subtract the viewport width from the document width and divide it by two like this:
(document.body.scrollWidth - document.documentElement.clientWidth)/2
Now time to scroll
Finally, you'll want to make the window scroll to the calculated point.
window.scrollTo(centerWidth, centerHeight);
If you want to do all of it in one step, you'd do:
window.scrollTo( (document.body.scrollWidth - document.documentElement.clientWidth)/2, (document.body.scrollHeight - document.documentElement.clientHeight)/2 );
Please note that we've used document.documentElement.clientHeight (and clientWidth) and they give you the viewport size without the scrollbars. If you wish to include the scrollbars you'll have to use other variables. You can find examples of how to get those measurements on the internet.
For more information: Center a one page horizontally scrolling site in browser (not centering a div)
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.
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.
For some reason both document height and window height return the same value, so when subtracting window from document height it returns 0. Anyone know why this might be happening?
console.log($(window).height());
console.log($(document).height());
The above both return the document height
You might have forgotten the doctype <!DOCTYPE html> at the beginning of the page.
That's because your document fills the viewport (the zone accessible for displaying the document).
From the documentation :
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
If you document is long enough to take more than one page, the second value may be greater than the first (at least if the document is inside an iframe, look at this demo). There can be other cases generating differences but I have none in mind now.
I had a similar issues that I was able to fix.
I found that
$(window).height();
Was returning the entire height of the page in FF.
Eventually I realized that I was outputting a debug phrase 'test' before any of the html of the page. IE before the Doc type.
Once this 'test' text was removed the view port height was return as expected.