Develop Reference

How to set width and height of canvas to all height and width of browser without overflow?

I want to make a canvas with width and height of document without scrolls, but I don't know how to do this. I tried:
canvas.width = window.innerWidth;
canvas.width = parseInt(getComputedStyle( document.body ).getPropertyValue( 'width' ));
canvas.width = document.body.offsetWidth
canvas.width = document.body.clientWidth
But I got 1-20 unused pixels that I can scroll, also I can't reduce width and height by fixed number of pixels - different browsers show it differently.

Fixed by "display: block", canvas elements aren't blocks by default.

if you're asking how to make an element 100% of the viewport's width and height, you can use CSS...
#selector_id {
width: 100vw,
height: 100vh
}

window.innerWidth gives you the whole width inside the window frame ignoring the scroll bars.
document.body.clientWidth gives you the width inside the vertical scroll bar - if present.
These both work on current versions of Safari and Chrome - I just gave them a quick try.
Both should work on all modern browsers check here for
window.innerWidth and here for document.body.clientWidth.
I'd be interested to know any circumstances where these don't work as advertised.
(Of course if you executed the code exactly as you've shown it you would end up with just the value of document.body.clientWidth. I'm guessing you meant you tried each of them in turn.)

dynamically change height attribute

I am currently re-sizing a DIV class based on the users window size / resolution - I tested it and once I re-size my browser window to below 1024 x 768 the css attribute changes properly. The problem is now, when I maximize the window the attribute stays with the new properties (400 / 380). Is there a way to have it reset once my resolution goes back to over 1024 x 768?
$(function(){
$(window).resize(function(){
var h = $(window).height();
var w = $(window).width();
$("#scrollbar1").css('height',(h < 1024 || w < 768) ? 400 : 380);
});
});
Some advice would be appreciated, thank you.

Assuming your screen-resolution is height:768 * width:1024 :
First see the comment by https://stackoverflow.com/users/222714/mdmullinax , you currently detect if the width is < 768 or height is < 1024 , you should switch this.
Then: you cant rely on the fact that a maximized browser-window will have a inner size similar to the screen-size.
width()/height() will return the size of the viewport, so when the window is maximized there still may be some bars on the desktop (and the browsers bars like toolbar, adressbar etc. too) that let the browser-windows size differ from the screen-size)

Assigning custom starting position on a website

I want to create a website scrolled vertically. The problem I have is that I want starting point on the website to be on the center. I guess I need to use JS for this, but I don't know how.

Apparently outerHeight is only supported in Firefox. How about this?
var winWidth = document.body.clientWidth;
var winHeight = document.body.clientHeight;
window.scrollTo(winWidth, winHeight / 2);

This should work on most browsers. window.outerHeight is the height of the entire content of the page. window.scrollTo scrolls the browser to the specified x and y coordinate.
window.scrollTo(0, window.outerHeight / 2);

How to get document height and width without using jquery

How to get document height and width in pure javascript i.e without using jquery.
I know about $(document).height() and $(document).width(), but I want to do this in javascript.
I meant page's height and width.

var height = document.body.clientHeight;
var width = document.body.clientWidth;
Check: this article for better explanation.

Even the last example given on http://www.howtocreate.co.uk/tutorials/javascript/browserwindow is not working on Quirks mode. Easier to find than I thought, this seems to be the solution(extracted from latest jquery code):
Math.max(
document.documentElement["clientWidth"],
document.body["scrollWidth"],
document.documentElement["scrollWidth"],
document.body["offsetWidth"],
document.documentElement["offsetWidth"]
);
just replace Width for "Height" to get Height.

This is a cross-browser solution:
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

You should use getBoundingClientRect as it usually works cross browser and gives you sub-pixel precision on the bounds rectangle.
elem.getBoundingClientRect()

Get document size without jQuery
document.documentElement.clientWidth
document.documentElement.clientHeight
And use this if you need Screen size
screen.width
screen.height

You can try also:
document.body.offsetHeight
document.body.offsetWidth

This should work for all browsers/devices:
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}

If you want to get the full width of the page, including overflow, use document.body.scrollWidth.

window is the whole browser's application window. document is the webpage shown that is actually loaded.
window.innerWidth and window.innerHeight will take scrollbars into account which may not be what you want.
document.documentElement is the full webpage without the top scrollbar. document.documentElement.clientWidth returns document width size without y scrollbar.
document.documentElement.clientHeight returns document height size without x scrollbar.

How to find out the document width and height very easily?
in HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>
in javascript
var c=document.querySelector('#hidden_placer');
var r=c.getBoundingClientRect();
r.right=document width
r.bottom=document height`
You may update this on every window resize event, if needed.

Getting height and width of body or window of web page

Depending on which mode of IE8 i'm in (quirks or standard) i get different values for the height and width. I've tried standard javascript and jquery but both return different results.
In Quirks
$('body').width = 1239
$('body').height = 184
document.body.clientWidth = 1231
document.body.clientHeight = 176
In standards
$('body').width = 1260
$('body').height = 182
document.body.clientWidth = 1254
document.body.clientHeight = 176
Any ideas how to get a value unchanged by the mode of IE8.
Thanks in adv.

Perhaps the issue is due to the scrollbars being included in the width and height regardless of whether or not they are there. I don't have IE (on a mac) so can't verify.
However, I can tell you what does work as in my project jQuery Lightbox I have no such issue. We use the following code in it:
// Make the overlay the size of the body
var $body = $(this.ie6 ? document.body : document); // using document in ie6 causes a crash
$('#lightbox-overlay').css({
width: $body.width(),
height: $body.height()
});
// ... some code ...
// Get the window dimensions
var $window = $(window);
var wWidth = $window.width();
var wHeight = $window.height();
And the overlay displays correctly. I would trust jQuery's result of the width and height compared to that of the native result, as jQuery should naturally be taking into account any quirks with the browser.
It is important to note that the lightbox script above tends to prefer $(document) over $(document.body) for some reason - I can't remember sorry :O - so perhaps this solves the issue as well?

Just a quickshot. Try to give your body #page:
function getPageHeight() {
var pageHeight = document.getElementById('page').offsetHeight;
var pageWidth = document.getElementById('page').offsetWidth;
alert(pageHeight);
alert(pageWidth);
}

Try this:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
var width = viewport.width;
var height = viewport.height;