Why Doesn't This Javascript Work? Style Change

Question

I cant for the life of me figure out why this doesn't work:

javascript:

//==================================//
// resize_middle                            //
//----------------------------------//
// Resizes the content and left     //
// navigation div to make up the        //
// remains of available space.      //
//==================================//
function resize_middle()
{
    min_height = (window.innerHeight - 276) + "px";
    middle_left = document.getElementById("middle_left");
    middle_right = document.getElementById("middle_right");
    alert("its not going to work!");
    alert("here goes...");
    alert(min_height);
    middle_left.style.minHeight = min_height;
    alert("it works!");
    middle_right.style.minHeight = min_height;
}
//==================================//
// event handlers                           //
//==================================//
window.onload = resize_middle();
window.onresize = resize_middle();

html(body & javascript bit in head shown only):

<script src="javascript.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="container">
        <div id="central_column">
            <div id="top_left">
                <img src="./images/icon.png" alt="icon" style="width:100%;height:auto;" />
            </div>
            <div id="top_right">
                top right
            </div>
            <div id="middle_left">
                middle left
            </div>
            <div id="middle_right">
                middle right
            </div>
            <div id="bottom">
                bottom
            </div>
        </div>
    </div>
</body>

I'v used this before and have a working copy of some only slightly different code, but it works perfectly. I get the debugging alerts up until "it works!", which I don't get. Thanks in advance, ell.

I strongly recommend using a proper debugger for JavaScript, like Firebug for Firefox. — Matt Ball
– Matt Ball, Commented Jan 8, 2011 at 19:21

Kurru · Accepted Answer · 2011-01-08 19:17:27Z

6

You need this instead:

window.onload = resize_middle;
window.onresize = resize_middle;

Because as having it resize_middle() the function is processed immediately and the result is added to the event. You want the function itself to be added to the event so you leave off the () unless your function returns a function for the event to use.

answered Jan 8, 2011 at 19:17

Kurru

14.4k18 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kurru Over a year ago

Catches everyone out at least once

user113716 · Accepted Answer · 2011-01-08 19:15:25Z

You need this instead:

window.onload = resize_middle;
window.onresize = resize_middle;

Currently you're calling those functions and assigning their return value to the event. What you want is to assign the functions themselves to the events, and let the events call them.

Side note:

Unless the variables in resize_middle are defined elsewhere and you intend for them to be accessible to the outer scope, it is good practice to use the var keyword when defining new variables.

function resize_middle()
{
      // Changed to use "var"
    var min_height = (window.innerHeight - 276) + "px";
    var middle_left = document.getElementById("middle_left");
    var middle_right = document.getElementById("middle_right");

    alert("its not going to work!");
    alert("here goes...");
    alert(min_height);
    middle_left.style.minHeight = min_height;
    alert("it works!");
    middle_right.style.minHeight = min_height;
}

Babiker · Accepted Answer · 2011-01-08 19:21:14Z

2

window.onload = resize_middle;

Read this resource on assigning event handlers.

edited Jan 8, 2011 at 19:21

answered Jan 8, 2011 at 19:15

Babiker

18.9k28 gold badges83 silver badges127 bronze badges

2 Comments

Ell Over a year ago

Oh you are joking me! I can't beleive this! Why does this work?

Matt Ball Over a year ago

@Ell: because resize_middle evaluates to the function, and resize_middle() evaluates to the value returned by the function.

Collectives™ on Stack Overflow

Why Doesn't This Javascript Work? Style Change

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related