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;
fo开发者_如何学JAVAuronefour = 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
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.
This:
rotdiv.style = "visibility:visible;";
Should be
rotdiv.style.visibility = "visible";
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;
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";
加载中,请稍侯......
精彩评论