javascript - resize a div using onload

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';">

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';">

Share Improve this question edited May 8, 2012 at 2:38 asked May 8, 2012 at 2:18 user1106352

This type of stuff shouldn't go within your HTML though. – Sampson Commented May 8, 2012 at 2: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 Commented May 8, 2012 at 2: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 Commented May 8, 2012 at 2: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 Commented May 8, 2012 at 2:55

Add a ment |

5 Answers 5

Sorted by: Reset to default 4

I have used jQuery, as detecting window height is prone to cross-browser patability 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/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./ajax/libs/jquery/1.7.2/jquery.min.js"></script>

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.

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>

Try something like this:

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

I believe that should work.

jsFiddle Example

<body onload="document.getElementById('pageContent').style.height = 
              parseFloat(document.body.scrollHeight)-60 + 'px';">
<div id="pageContent"></div>

div does not have an onload attribute (you have to use body)
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
instead of clientHeight you might want to use scrollHeight of the body

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - resize a div using onload - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)