Using JavaScript to assign a CSS file...
Posted: Mon Oct 19, 2009 11:08 pm
I currently use the unobtrusive JavaScript approach at handling dynamic placement or assignment of CSS classes to markup elements. This approach is found over on the A List Apart website.
What I have found (as far as my personal website is concerned) is that this won't cut it. I need the classes that the JavaScript creates to be used as conditional modifiers, where once triggered or tripped in the proceeding IF clauses, it will enact a corresponding CSS file for the given monitor resolution.
So in other words, I would like something like the following:
It's not working, however, and I was wondering if someone could explain to me why this is... Is it because it can't assign CSS files in the way I'm trying or is there simply something wrong with my syntax?
What I have found (as far as my personal website is concerned) is that this won't cut it. I need the classes that the JavaScript creates to be used as conditional modifiers, where once triggered or tripped in the proceeding IF clauses, it will enact a corresponding CSS file for the given monitor resolution.
So in other words, I would like something like the following:
Code: Select all
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';
if(w_class = 'w_1024'){
document.getElementById('css').href = 'w_1024.css';
}elseif(w_class = 'w_1152'){
document.getElementById('css').href = 'w_1024.css';
}etc...
};