Friday, June 19. 2009
Checking the viewport's width and height...
I've never been a fan of using JavaScript to fix up an interface. That is the purpose of using CSS. However, with that being said, I developed a very elegant website login page with a resolution of 1024x768 in mind. All of the CSS had been meticulously measured using quite a few pixel-based measurements (over EMs, because I was sure it would be fine for the two horizontal elements taking up the page width). Unfortunately, I had confused our public facing site with our backend staff site's statistics. 32% of our backend site is viewed with a resolution of 800x600. Uh oh!
Times are changing, and computers get upgraded. Although the staff members with an 800x600 resolution might be used to scrolling on some pages to view content, it really wasn't good for the staff site's login to require a scroll (the main site is not yet redesigned, and I designed that for an 800x600 display). I didn't want to have to start from scratch, and even resize images to make them fit. As time progressed, I expected the percentage of 800x600 site views to drop, so this is more of a temporary band-aid that's needed anyway... JavaScript to the rescue.
Screen resolution is easy.
Many people state that each of the major browsers use a different approach to determining the viewport, and this is true. But most people also create a function or IF/ELSE case for each possible outcome. I found some code that mixes all three in one line quite intuitively. Below is the actual JavaScript I used (jQuery methods found in there) to solve my issue (I pre-determined the width/height numbers manually for this specific layout).
Quite easy, quite nice, and the most important thing is that the login box is now clearly visible without any unnecessary scrolling (caused by CSS issues) at specific resolutions (tested at 600px width, minimum). If it's any less than that, I can assume it's a mobile browser and we don't (yet) support that; but when we do it'll be a completely different layout that's used.
I hope this might be helpful to someone else, but for the right reasons! (Credit to About.com for the viewport functions.)
Times are changing, and computers get upgraded. Although the staff members with an 800x600 resolution might be used to scrolling on some pages to view content, it really wasn't good for the staff site's login to require a scroll (the main site is not yet redesigned, and I designed that for an 800x600 display). I didn't want to have to start from scratch, and even resize images to make them fit. As time progressed, I expected the percentage of 800x600 site views to drop, so this is more of a temporary band-aid that's needed anyway... JavaScript to the rescue.
Screen resolution is easy.
screen.width and screen.height, respectively, will tell you about a visitor's monitor's current resolution, but in this case I needed to know the viewport.Many people state that each of the major browsers use a different approach to determining the viewport, and this is true. But most people also create a function or IF/ELSE case for each possible outcome. I found some code that mixes all three in one line quite intuitively. Below is the actual JavaScript I used (jQuery methods found in there) to solve my issue (I pre-determined the width/height numbers manually for this specific layout).
Quite easy, quite nice, and the most important thing is that the login box is now clearly visible without any unnecessary scrolling (caused by CSS issues) at specific resolutions (tested at 600px width, minimum). If it's any less than that, I can assume it's a mobile browser and we don't (yet) support that; but when we do it'll be a completely different layout that's used.
I hope this might be helpful to someone else, but for the right reasons! (Credit to About.com for the viewport functions.)