This is probably one of those questions that you only ask when you think too deeply about something, but nevertheless, here goes nothing (and please bare with me)...
Is there a way to somehow store the contents of CSS files and only use it if a certain condition within a JavaScript logic block is met? Maybe somehow bundling everything using PHP and when it's output, somehow using JavaScript to indicate which CSS file should be dynamically placed within the markup HEAD element depending on the resolution? I know you can do this with classes or IDs on the client-side using only JavaScript, but I'm having problems trying to achieve this type of functionality with entire stylesheet files and I think it's because the files are being cached.
For example, if someone resizes a browser window to 800x600, then stylesheet 'A' would hypothetically be used, otherwise, stylesheet 'B' is applied and stylesheet 'A' is removed from the cache... I've been working on something to get this to happen and it only works if the browser window is refreshed--which means that all of the CSS files aren't being downloaded at once, but instead, only 1 at a time, hence only working via server-side calls... I guess I'm shooting for an Ajax approach at loading stylsheets, but loading only 1 at a time despite having every CSS file downloaded.
I'm pretty sure I'm not seeing things clearly because I have the tendency to over think things, but as it stands in my crazy mind, I'm trying to get every stylesheet downloaded but only used when needed by using JavaScript IF statements.
Could someone help me see through the clouds here? Can something like this be done? I apologize beforehand if this is a ridiculous post...
Downloading / Using CSS with JavaScript...?
Moderator: General Moderators
Re: Downloading / Using CSS with JavaScript...?
This is certainly possible, but in my mind it's too much work.
What bandwidth are you saving by only downloading one of the stylesheets? Have you tried minifying/gziping the CSS to see what savings you get there?
Also, what happens if the user has Javascript turned off?
What bandwidth are you saving by only downloading one of the stylesheets? Have you tried minifying/gziping the CSS to see what savings you get there?
Also, what happens if the user has Javascript turned off?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: Downloading / Using CSS with JavaScript...?
As far as those who choose to turn JavaScript off are concerned, there should be a decent contingency in place using a "base" CSS file. I have yet to try the gzip option as (I'm sorry to admit) that never even occurred to me as being an option (duh). As far as how much bandwidth I'm saving, this is something I can't say for sure as I've been just trying to get the darn thing to work. I know it would have to help though because my website will be using standard, resolution, and temporal CSS--so I know there will be space to be saved by doing this.pickle wrote:This is certainly possible, but in my mind it's too much work.
What bandwidth are you saving by only downloading one of the stylesheets? Have you tried minifying/gziping the CSS to see what savings you get there?
Also, what happens if the user has Javascript turned off?
I posted a similar version of this awhile ago when I was having some problems with it, and of course, I'm still having problems with it but I thought that posting it again may give a better idea about what I'm trying to do while also allowing you to see where I am:
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';
//document.body.className=w_class+' '+h_class;//un-commenting this shows null for body...!?
if(typeof styleNode == 'undefined'){
styleNode = document.createElement('link');
//styleNode.setAttribute('rel', 'stylesheet');
//styleNode.setAttribute('type', 'text/css');
styleNode.rel='stylesheet';
styleNode.type='text/css';
var url1 = 'http://localhost/websites/test/content/themes/default/test.css';
var url2 = 'http://localhost/websites/test/content/themes/default/test2.css';
var url3 = 'http://localhost/websites/test/content/themes/default/default.css';
if(w_class == 'w_1024'){
//styleNode.setAttribute('href', url1);
styleNode.href=url1;
}else if(w_class == 'w_800'){
//styleNode.setAttribute('href', url2);
styleNode.href=url2;
}else{
//styleNode.setAttribute('href', url3);
styleNode.href=url3;
}
}else{
styleNode = styleNode.parentNode.removeChild(styleNode);
};
document.getElementsByTagName('head')[0].appendChild(styleNode);
};If I recall correctly, I think the reason I fumbled with it was because it kept loading all the stylesheets after each window resize (causing major display problems)....
Re: Downloading / Using CSS with JavaScript...?
If you install the Firebug add on (which won't help you in IE obviously, but will help to get the basic logic working), you can View generated source. This is helpful if you have Javascript manipulating the DOM - viewing the generated source will show those changes. The regular "view source" only shows the code sent from the server.
Doing this will possibly help you see if the correct stylesheets are being added by Javascript.
Doing this will possibly help you see if the correct stylesheets are being added by Javascript.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: Downloading / Using CSS with JavaScript...?
The good news is that they are being assigned, but the bad news is that it's not happening on "window.onresize" like I have it set to do--the page requires refresh.
How can I make it happen on resize??? This seems to be the only remaining hurdle left...
How can I make it happen on resize??? This seems to be the only remaining hurdle left...