CODEWITHSUNDEEP
javascript
Ankit Ahuja
Ankit Ahuja

Reputation: 73

Problem setting window.onload and window.onresize

<script type="text/javascript">
    window.onload = widthFunction();
    window.onresize = function widthFunction(){
        var viewportWidth;
        var fouronefour;
        rotdiv = document.getElementById("rotationdiv");
        viewportWidth = window.innerWidth;
        fouronefour = 414;
        if(parseInt(viewportWidth) < parseInt(fouronefour))
        {rotdiv.style = "visibility:visible;";}
        }
</script>

<body>
<div id="rotationdiv" style="visibility:collapse;">If you would like to see more columns, click <a href="WiderPage.aspx">here</a>.</div>
</body>

I know there is a problem with window.onload = widthFunction();. What I basically want this function to do is "on load and on resize, check the screen size. if the screen size is more than 414px, display the div asking the client to go to a wider page."

It's a gridview with many boundfields. I figured I'd try this because I'm scaling my website down to a mobile browser

Upvotes: 0

Views: 4371

Answers (4)

gen_Eric
gen_Eric

Reputation: 227240

window.onresize = function widthFunction(){...}

You are setting window.onresize to a function, but widthFunction doesn't do anything here. This will not create a function called widthFunction.

So, in the line:

window.onload = widthFunction();

widthFunction is undefined, because it was never defined.

What you want to do is, first declare widthFunction:

function widthFunction(){
   var viewportWidth;
   var fouronefour;
   rotdiv = document.getElementById("rotationdiv");
   viewportWidth = window.innerWidth;
   fouronefour = 414;
   if(parseInt(viewportWidth) < parseInt(fouronefour)){
       rotdiv.style = "visibility:visible;";
    }
}

Then set window.onresize and window.onresize to it:

window.onload = widthFunction;
window.onresize = widthFunction;

EDIT: There are some things bugging me with the widthFunction function.

Why are you making a variable called fouronefour? Just use 414. Also, you don't need parseInt there.

if(viewportWidth < 414){ // window.innerWidth returns you a number, not a string

Also, this:

rotdiv.style = "visibility:visible;";

should be:

rotdiv.style.visibility = "visible";

Upvotes: 1

Tesserex
Tesserex

Reputation: 17314

Get rid of the parens in your first line.

window.onload = widthFunction;

As it is, it's setting the return of widthFunction to the onload event - which is undefined.

edit: Actually, if your browser is implementing JS correct (as in you aren't in IE) I believe that this still won't work - the name widthFunction will not be defined outside the function itself. You would have to define widthFunction externally first, with

function widthFunction() {
    ...
}

or

var widthFunction = function() {
    ...
}

Also, why are you setting 414 to a weirdly named variable, and then parseInting it? Your parseInt's aren't doing anything since you're working with number types already. Also, if you're going to put 414 into a variable, you might as well give it a more meaningful name. "fouronefour" doesn't help in getting rid of magic constants.

Upvotes: 4

Joe
Joe

Reputation: 82604

This:

rotdiv.style = "visibility:visible;";

Should be 

rotdiv.style.visibility = "visible";

Upvotes: 2

johnmdonahue
johnmdonahue

Reputation: 653

Maybe try something like:

function widthFunction(){
    var viewportWidth;
    var fouronefour;
    rotdiv = document.getElementById("rotationdiv");
    viewportWidth = window.innerWidth;
    fouronefour = 414;
    if(parseInt(viewportWidth) < parseInt(fouronefour))
    {rotdiv.style = "visibility:visible;";}
} 
window.onresize = window.onload = widthFunction;

Upvotes: 1

Related Questions