Document size
Sunday, May 27th, 2007Screen height and width
To get the screen size and width we just use the existing screen object like this:
bwidth=screen.width bheight=screen.height
If we then write out that info:
document.write("You have screen resolution:" + bwidth + "x" +bheight)
We’ll get this result:
You have screen resolution:1400×1050
As you can see, this is correct, and good and well. This can for instance be used for opening a new window with the same size as the screen to cover up the screen (which is really annoying). But you can’t really trust these figures when it comes to available document size, most users with big monitors almost never surf with their browserwindow maximized. You can also never know what toolbars the user has. So, we have to get the exact document size, not the screen size.
Document height and width
This is a little more difficult since Explorer and Netscape uses different ways to get these sizes.
To get the available document sizes in Netscape we use the window properties called innerWidth and innerHeight. These properties can be accessed at any time in Netscape, like this:
bwidth=innerWidth bheight=innerHeight
If you have Netscape you’ll see this documents width and height here:
The document size: Width: 1386 Height: 795
The code I used to do that looks like this:
if(bw.ns4 || bw.ns6){
bwidth=innerWidth
bheight=innerHeight
document.write("t The document size:n"
+"Width: " + bwidth +"n"
+ "Height: " + bheight)
}else document.write ("t You are using Explorer")
Now the Explorer way; Explorer doesn’t have a window property that gives us those sizes so we have to get the value from the of the body in stead. We use the document object to get to the body object, we then use the offsetWidth and offsetHeight property of the body object to get the sizes. That should look something like this:
bwidth=document.body.offsetWidth; bheight=document.body.offsetHeight;
If you use Explorer you will now see this documents size:
You are using Netscape
Code:
if(bw.ie){
bwidth=document.body.offsetWidth;
bheight=document.body.offsetHeight;
document.write("The document size:n"
+"Width: " + bwidth +"n"
+ "Height: " + bheight)
}else document.write ("t You are using Netscape")
There are a couple of things you have to remember here, we are using the body object to get the document sizes here, so this won’t work just like that in a regular script since you usually place your JavaScript’s in the head tag the body tag won’t be loaded yet and you will get a error. So you have to get this value after the body tag is loaded.
lib_doc_size object
Here I’ll show you my lib_doc_size object constructor and show you how it works.
This is the object I use every time I need to know the window sizes. As I said you have different ways of getting these sizes in the different browsers so this object have to be crossbrowser. The PageObject constructor look like this:
//Document size object ********
function lib_doc_size(){
this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
if(!this.x2||!this.y2) return message('Document has no width or height')
this.x50=this.x2/2;this.y50=this.y2/2;
this.x10=this.x2*10/100
this.x15=this.x2*15/100
this.y10=this.y2*10/100
this.y15=this.y2*15/100
return this;
}
To make a page object you call it like this:
page=new lib_doc_size()
That makes page a lib_doc_size object, and we can now get all the info about the page size from it. Just look here:
page.x= 0 page.x2=1386 page.y=0 page.y2=795 page.x50=693 page.y50=397.5 page.x10=138.6 page.y10=79.5 page.x15=207.9 page.y15=119.25
Code used for that (the pageobject constructor in already in the source of this document):
page=new makePageObject()
document.write('tpage.x= '+page.x +'n'
+'page.x2='+page.x2 +'n'
+'page.y='+ page.y +'n'
+'page.y2='+ page.y2 +'n'
+'page.x50='+ page.x50 +'n'
+'page.y50='+ page.y50 +'n'
+'page.x10='+ page.x10 +'n'
+'page.y10='+ page.y10 +'n'
+'page.x15='+ page.x15 +'n'
+'page.y15='+ page.y15 +'n')
What are all these values? Let us see;
page.x and page.y are values set to 0, I just do this in case I am making a page where I want everything to start at another value then 0. So I just keep them in there.
page.x2 is the width of the document.
page.y2 is the height of the document and works the same way as page.x2.
The rest is values I often use, like page.x50 is the center of the document so to place something at center we just move the object too page.x50-the_width_of_the_object/2 See?
page.x10 and page.x15 equals 10 and 15% of the page. So if i wan’t something to be the width of 30% i just set it to page.x15*2.
Now you can have a look at this example page.