0

I am trying to resize a div onload without having a javascript function in the header. So far my code looks like the code below, and while I am somewhat familiar with javascript, I am very much so a beginner.

What I am wanting to do is take a div that has a height set in the stylesheet of 100%, and subtract 60px of height on load. Am I even close, or am I lost?

EDIT: I would not be opposed to other methods of doing this. I just don't know of any other way.

<div id="pageContent" onload="document.this.style.height = clientHeight - '60px';">
  • This type of stuff *shouldn't* go within your HTML though. – Sampson May 08 '12 at 02:26
  • 1
    Clean separation of markup/scripting. This way, programmers don't tamper with the markup, and designers don't tamper with the programming. – Sampson May 08 '12 at 02:29
  • Check my answer bellow, it shows clear separation of code, and will work across multiple browsers. If you've got any questions please feel free to ask. – Jack May 08 '12 at 02:46
  • first of all, does `div` have an `onload` attribute? second, even if it did, when the browser renders, it the page probably hasn't finished loading, so it might set the height of the body at that point, but the body might grow afterwards. it's best to do this in a script tag, when the dom is ready. – vol7ron May 08 '12 at 02:55

5 Answers5

4

I have used jQuery, as detecting window height is prone to cross-browser compatability issues. It is good practice to keep clear seperation of markup, css style, and JavaScript functionality.

Here is a coded example of what I believe you're trying to achieve:

http://jsfiddle.net/AKmaB/2/

For if you haven't used jQuery before, make sure you include this before any of your other JavaScripts within your web page source:

Inclusion of jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Jack
  • 15,614
  • 19
  • 67
  • 92
  • I agree with this, though it's a repeat of what Jonathan Sampson said, without giving him any credit. If credit was given, I would have upvoted – vol7ron May 08 '12 at 03:19
  • I think it's a general view shared by any good web developer, what I wrote wasn't mean't to plagiarizer Jonathans comment. I even +1'd his comment after I read it to make it more apparent to the viewers of this thread :) – Jack May 08 '12 at 09:49
  • 1
    Well he hasn't said anything, so I'll just upvote you up anyhow. ha – vol7ron May 08 '12 at 13:00
1

You want something like this perhaps:

this.style.height = (document.body.clientHeight - 60) + "px";

EDIT:

Forgot to mention, you cannot do an onload on a DIV element, only on the body. So if you insist running your javascript that way, you can do it this way...

<html>
<head></head>
<body style="height:100%; background:blue;" onload="document.getElementById('pageContent').style.height = (document.body.clientHeight - 60) + 'px';">
<div style="background:green;" id="pageContent">FOO</div>
</div>
</body>
</html>

To summarize:

  • Can't onload on anything, but body see: How to add onload event to a div element?
  • Get clientHeight from the document.body. It's not a global property.
  • If you were using something like onclick, you can reference the target object using 'this', but not in the way you have it there with document.this. That's invalid.
Community
  • 1
  • 1
Art
  • 5,864
  • 3
  • 30
  • 32
1

Firstly, HTML 4.01, XHTML 1.0 DTDs and HTML5 Specs do not define an onload attribute event for the div element, so it's no a good idea to do so.

In order to make the code work, you must run it after the element you're trying to modify has been loaded in the DOM. There are some ways to achieve this, for instance, after the div declaration:

<div id="pageContent"></div>
<script>document.getElementById('pageContent').style.height = 
        (self.innerHeight ? self.innerHeight :
         document.documentElement.clientHeight ? document.documentElement.clienteHeight :
        document.body.clientHeight) - 60 + "px";</script>

or right before the </body> tag.

<script>document.getElementById('pageContent').style.height = 
        (self.innerHeight ? self.innerHeight :
         document.documentElement.clientHeight ? document.documentElement.clienteHeight :
        document.body.clientHeight) - 60 + "px";</script>
</body>
rdleal
  • 987
  • 5
  • 15
0

Try something like this:

<div id="pageContent" onload="this.style.height = (document.body.clientHeight-60)+'px'">

I believe that should work.

emphaticsunshine
  • 3,725
  • 5
  • 32
  • 42
  • I am sorry. I just missed 'px' at the end. Try it now. – emphaticsunshine May 08 '12 at 02:30
  • still not correct, i tried changing `document` to `this`, but that also did not work –  May 08 '12 at 02:34
  • document.height is defined in chrome. May be other browsers use document.body.clientHeight. Thats why I use jQuery for cross browser in which you can do something like this: $(document).height(); – emphaticsunshine May 08 '12 at 02:36
0

jsFiddle Example

<body onload="document.getElementById('pageContent').style.height = 
              parseFloat(document.body.scrollHeight)-60 + 'px';">
<div id="pageContent"></div>
  1. div does not have an onload attribute (you have to use body)
  2. even if this does work body may be filled in with other stuff afterwards, so it'd be best to apply this on dom ready, as well as to a window resize event
  3. instead of clientHeight you might want to use scrollHeight of the body
vol7ron
  • 40,809
  • 21
  • 119
  • 172