Downloading / Using CSS with JavaScript...?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Wolf_22
Forum Contributor
Posts: 159
Joined: Fri Dec 26, 2008 9:43 pm

Downloading / Using CSS with JavaScript...?

Post by Wolf_22 »

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...
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Downloading / Using CSS with JavaScript...?

Post by pickle »

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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Wolf_22
Forum Contributor
Posts: 159
Joined: Fri Dec 26, 2008 9:43 pm

Re: Downloading / Using CSS with JavaScript...?

Post by Wolf_22 »

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?
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.

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);
};
I had some help from a couple people around here and were it not for them, I wouldn't have been able to get as far as I have (pickle, juma929, and kaszu :) ). In spite of this, though, the file switch only occurs if I press "refresh". The really weird thing is that last week, I had it up to a point where it would work ON RESIZE but it wouldn't work in IE (and I anticipated this to a degree because I knew I had yet to work on it for IE). I really want the switch to properly occur if the window is resized, though--and I know it can work, but somewhere along the way, I've fumbled with it and now it doesn't do it like it did last week and it really has me frustrated. :banghead:

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)....
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Downloading / Using CSS with JavaScript...?

Post by pickle »

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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Wolf_22
Forum Contributor
Posts: 159
Joined: Fri Dec 26, 2008 9:43 pm

Re: Downloading / Using CSS with JavaScript...?

Post by Wolf_22 »

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... :cry:
Post Reply