< Server2Go - Apache, MySQL, SQLite, PHP and Perl all on a CD-ROM | Adobe AIR and its Security Model >
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.)
Trackbacks
Trackback specific URI for this entry
No Trackbacks
Comments
Display comments as
(Linear | Threaded)
800x600 is the pits. We had most staff machines and public internets running at this resolution and I made a lot of noise and there was a "forced" upgrade to 1024x768. I think we still have some opacs running at the lower resolution but hopefully those will be upgraded in the near future...
It definitely is. I thought we had all of our staff machines running at 1024x768, and I know we have our public machines at that resolution. My boss who is in charge of staff machines told me that "we can't do that, man, we got too many oldies workin' here" (paraphrased). Our OPAC's design is basically the template provided by the vendor, and is made for 1024x768 resolution. Fun stuff. 
Thanks for always posting these great tips. This one was quite easy to follow. Looking for code demonstrations on Google is a tedious process (damn experts-exchange!), and I'm glad I've stumbled across your site.
Glad to help, and glad to hear that my own discoveries can help others. I wouldn't bookmark my site though, I don't have quite enough posts, or desire to write posts like this, to warrant that.