I’m trying to implement an unobtrusive bottleneck for all common dimensions needing CSS style. The rationale behind this boils down to providing styles across multiple browser resolutions. I fear that what I thought was a good move may in fact be a depressing blunder but with all that aside, I’ll explain what’s going on…
Right now, I have a single JavaScript file that has a function in it responsible for assigning a CSS class to the body element given a certain viewport value is within a specified range. This class is then applied from the CSS file to setup specific resolution styles found to be visually necessary. The good news is that it seems to work relatively well with the slight issue of a brief “positional shuffle” prior to the JavaScript being applied.
So in other words, there are various times where I’ll click on a link within my website only to experience a very brief reshuffle of elements. For example, if I have an element that is positioned and has a width and height value, etc, the browser will apply the general CSS code only to apply the resolution-specific code afterward that would make the element display correctly. The browser appears to apply the CSS from the CSS file where it then waits on the JavaScript to finish loading so that the CSS resolution-specific class can be implemented.
The JavaScript I’m referring to here is below:
window.onload = function(){setScreenClass();};window.onresize = setScreenClass;
function setScreenClass(){
var w = document.documentElement.clientWidth;var h = document.documentElement.clientHeight;
var w_class = (w<=240)?'w_240':(w>240&&w<=320)?'w_320':(w>320&&w<=640)?'w_640':(w>640&&w<=800)?'w_800':(w>800&&w<=1024)?'w_1024':(w>1024&&w<=1152)?'w_1152':(w>1152&&w<=1280)?'w_1280':'w_1600';
var h_class = (h<=600)?' h_600':(h>600 && h<=768)?' h_768':(h>768 && h<=800)?' h_800':(h>800 && h<=1024)?' h_1024':(h>1024 && h<=1280)?' h_1280':' h_1600';
document.body.className = w_class;
document.body.className += h_class;
};
Since the CSS element is up in the HEAD and this JavaScript is down at the bottom of the markup, it’s making me believe that the page layout of the website is only completed AFTER the JavaScript is loaded, ergo, the very brief re-adjustment of the elements on the website and the slight momentary break of the layout (and when I say “momentary”, I mean only about 0.3 seconds or something–short enough to not be a disaster but long enough to be noticed). Because of this, I moved the JavaScript up in the HEAD to naively test my theory but as many of you probably already know, it never fixed it.
Is there any way around this? Is there some sort of trick I’m missing or would I be better off to just cut my losses and design for a single “most used” resolution (which I hate doing–it seems unprofessional or something)? Was I making the wrong move to try and accommodate for the other resolutions using this approach? I mean, if you make a site for 1024x768 and then look at it in either 800x600 or lower (or even higher than the native base), it can be embarrassing–which is why I did this to begin with…
Any wisdom is appreciated.