Javascript screen resolution reset on load
I am using a javascript function to reset the style of 3 DIVs based on the user screen resolution using the onload event.
if(screen.width > 1024 && screen.width < 1300){
document.getElementById('wrapper').style.width = '1250px';
document.getElementById('innerwrapper').style.width = '1250px';
var elms = getElementsByClassName("colmask", "div")[0].style.width = '1250px';
}
if(screen.width > 1300 && screen.width < 1500){
document.getElementById('wrapper').style.width = '1350px';
document.getElementById('innerwrapper').style.width = '1350px';
var elms = getElementsByClassName("colmask", "div")[0].style.width = '1350px';
}
if(screen.width > 1500){
document.getElementById('wrapper').style.width = '1580px';
document.getElementById('innerwrapper').style.width = '1580px';
var elms = getElementsByClas开发者_如何学PythonsName("colmask", "div")[0].style.width = '1580px';
}
The problem is every time the user navigates to a new page the screen resizes it self after loading the page. Is there a way to avoid having to resize the pages all the time ?
I agree with the comments above and to make it dynamic based on the size of the browser is pretty easy if you decide to use Jquery
all you have to do is var wcontent=$(window).width();
and
$("#wrapper").width(wcontent);
and so on
which you can place on the $(document).ready(function () {}
精彩评论