Javascript screen resolution reset on load

Question

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 = getElementsByClassName("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 ?

Answer 1

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 () {}