Thursday, April 21, 2011

Get client width to fix 800x 600 resolution problem in IE and Mozilla using Javascript

              For last couple of weeks, one bug killing me. i.e., the page is not rendering properly in 800x600 resolution.
             Well,while assigning the defect I thought it will be so easy to fix and I thought nowadays who cares about that 800x600 resolution problem, but still some freaks are living with that 800x600 resolution.
              Let me share the experience/information to fix the defect using javascript. Though I found solution using css, but it not helped me to fix the defect.
Later I decided to fix the defect using javascript and the code as follows,
function windowWrapper() {
var cliRes = screen.width;
var cliHeight = document.documentElement.clientHeight;
if(cliRes<=800) {
 var newHeight = cliHeight-60;     
 document.getElementById("wrapping").style.height = newHeight+"px";
 document.getElementById("wrapping").style.overflow ="auto";
  } 
}
         Have you noticed, I have used wrapping inside getElementById. place the id wherever you want to reduce size of the screen in 800x600 resolution.
  //used to reduce the body screen size.
//reduce div container size.
Let me know how it was worked for you and waiting for your comments.