Simple JS question

**RyanReese** · Mar 19, 2009 15:12

Say I had a <div>. I want it to be the exact height of from the top lft corner of the screen to the bottom right. Not 100% height, but top left to bottom right. That distance. It has to work for all resolutions so is there some formula for that? I remember something like this in geometry class with triangles-anyone able to help me out

?

**Raffles** · Mar 19, 2009 15:26

Look up Pythagoras' theorem. You should pay more attention in maths class - it's one of the most basic things in mathematics and geometry. Or, you could have tried to look it up yourself.

This page will help you work out which two dimensions to use with the theorem.

**RyanReese** · Mar 19, 2009 15:31

I took geometry in freshman year-I'm a senior. Too long loll. + I sucked at math so much. Thanks for the link.

**RyanReese** · Mar 19, 2009 15:47

Head...hurts...

a squared+b squared=c squared? a and b = the width and height?

PS: Just trying to get a simple thing working

Code:

document.getElementByID('one').style.height=client.height+"px";

..

<div id="one"></div>

Not doing anything (I am newbbbish so don't yell)

Edit: Googled so much yet every time I tried to get an element to just be the height of the screen it wouldn't do anything. I tried many code variiations such as document.body.clientHeight, etc.

**Raffles** · Mar 19, 2009 16:05

Originally Posted by RyanReese

a squared+b squared=c squared? a and b = the width and height?

Yeah...

Code:

document.getElementByID('one').style.height=client.height+"px";

Check the page I linked to - no such thing as "client.height". Also, if you want the dimensions of the viewport (area visible to user where website is displayed), you'll want something else (but not supported in IE). So to make it cross-browser, you'll also need document.documentElement.clientWidth, an odd object in the hierarchy where the window is at the top and lowly text objects are arguably at the bottom. documentElement only works properly if IE is not in quirks mode, so you'll need a proper doctype.

Eventually you'll need JavaScript's Math.sqrt() method.

**RyanReese** · Mar 19, 2009 16:16

Code:

<!doctype html>
<html>
<head>
<style>
#one{background:black;width:30px;height:30px;}

}
</style>
<script type="text/javascript">
document.getElementByID('one').style.height=document.documentElement.clientWidth+'px';
</script>
</head>

<body>

 <div id="one">d</div>

</body>
</html>

Not working...? I know your explaining good but this stuff is japanese to me. I know what viewport is and that's exactly what I want-the height of the viewport (and width eventually, but I can get it once I know how to get height).

**Raffles** · Mar 19, 2009 16:22

For a start, you're using clientWidth, which is obviously not going to refer to the height.

Once you sort that out, you need to sort out getElementById, which is case sensitive.

Then you need to understand that your script will still fail because when the browser parses the javascript, #one does not exist yet (later on in markup). Therefore you need to tell the browser to wait (using window.onload) or put the JavaScript elsewhere (at the end of the BODY preferably).

This page will help a bit more at making it cross-browser. Remember, the documentElement bit is only needed for IE. Decent browsers can use the more sensible option that is a property of the window object rather than the document object.

**RyanReese** · Mar 19, 2009 16:25

Oh I just changed that on a whim-it was Height. Ahh I thought it looked wack (the document.getelementbyid)

More japanese. Here is the updated code

Code:

<!doctype html>
<html>
<head>
<style>
#one{background:black;width:30px;height:30px;}

}
</style>
<script type="text/javascript">
document.getElementById('one').style.height=document.documentElement.clientHeight+'px';
</script>
</head>

<body>

 <div id="one">d</div>

</body>
</html>

PS: So document.documentElement is just to force feed IE? Or the other way around?

**Raffles** · Mar 19, 2009 16:38

If you actually take the time to read and absorb the material I point you towards, instead of doing everything too quickly (therefore missing a lot of useful and important information), you will actually learn what is going on and understand it. This is why I'm reluctant to spoon-feed you the answer.

Yes, document.documentElement.clientWidth and document.documentElement.clientHeight are used for IE. All the other browsers support it as well, but they also support the more useful property of the window object that I'm trying to get you to find and use.

You also have ignored what I said about the browser parsing JavaScript before the markup, which is why your script will still fail as it is.

**RyanReese** · Mar 19, 2009 16:46

Ok I have this

Code:

<!doctype html>
<html>
<head>
<style>
#one{background:black;width:30px;height:30px;}

}
</style>

</head>

<body>

 <div id="one">d</div>
<script type="text/javascript">
document.getElementById('one').style.height=window.clientHeight+'px';
</script>
</body>
</html>

I don't want a spoon fed answer and I go fast by default-can't help it. window has the clientHeight property correct? Makes sense about JS after markup....ergh not working.

**Raffles** · Mar 19, 2009 16:53

No, it's not window.clientHeight!

Read the page I linked to (the last one). It's all there, you can find the answer without even scrolling down!!! (obviously if you can, it's worth reading the whole thing).

**RyanReese** · Mar 19, 2009 18:10

Amazing I love you Raffles. Sorry I'm a bit hard to get through. Let me try the theorm..

**JVLB** · Mar 19, 2009 20:09

If I read you correctly, screen.availHeight/Width might be useful. It gives a measure of the viewable area of the browser window, minus the chrome and does not have to wait for the page to load. Here's a quick example:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Work in Progress</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
</style>
<script type="text/javascript">
var ah = window.screen.availHeight.valueOf();
var aw = window.screen.availWidth.valueOf();
var hyp = Math.sqrt((ah * ah) + (aw * aw));
alert("Height: " + ah + " pixels \nWidth: " + aw + " pixels \nHypotenuse: " + hyp + " pixels");
</script>
</head>
<body>
</body>
</html>

I sympathize with your plight; being the victim of a modern American education it's almost surprising that you've mastered addition and subtraction.

**SoulScratch** · Mar 19, 2009 20:39

The screen properties of the window should not be used for this, because for this we need the height and width of the viewport as Rafael mentioned ( resize, anyone? ), not the dimensions of the browser minus the chrome.

And availHeight will return a number by default, there isn't really a need to use valueOf.. availHeight.valueOf() would be similar to the expression (5).valueOf() where it's already a number.

**JVLB** · Mar 19, 2009 21:27

You're right on both counts. I was just talkin' off the top of my head. I was thinking availHeight/Width returned a string, but of course with JS duck-typing it wouldn't matter anyway. I was just being careful. It could be written screen.availHeight, as well, as window is assumed.

Actually, the original poster asked about deriving the measurements of an element, I believe, which would be gotten from offsetHeight and offsetWidth of the element, not the viewport size.

**RyanReese** · Mar 20, 2009 07:35

Gave up on the idea since I was going ot use this as a quiz-an element from corner to corner but the rotation CSS3 property won't work properly in my present condition so I gave up on the idea-thanks for the help Raffles I feel sorry for you for having to help me

.

**Raffles** · Mar 21, 2009 15:33

It's OK Ryan, in future just look before you leap!

User Tag List

Thread: Simple JS question

Thread Tools

Display

Simple JS question

Bookmarks

Bookmarks

Posting Permissions