Javascript and Alternate Stylesheets

[Borvik]

I'm working on a website where I'm providing Alternate Stylesheets as different templates for viewing the site (in IE providing a way within the site to change it).

The question is in modern browsers that support Alternate Stylesheets (ex. Firefox) is there a way (in javascript) to detect when the user switches stylesheets?

Currently I have the unload event grabbing the active stylesheet and saving it in a cookie, but I'm hoping I can do it before then as it's throughing off my PHP reading of the same cookie.

 

[Foamcow]

Take a look at

http://www.alistapart.com/articles/n4switch/

and

http://www.alistapart.com/articles/bodyswitchers/

see if it gives you any help

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Foamcow]

Actually, the problem is just tying the cookie writing bit of your code into an event is it not?

How do people select what stylesheet they want?
Presumably you have a button or a drop down list or something?
How about using the onclick event?
Could you not call the cookie setting function immediately after setting the desired stylesheet?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[Borvik]

The problem is not switching stylesheets, or setting the cookie - it's when the cookie is being set.

With Firefox (and other modern browsers), users will be able to use the built in way to select a stylesheet or use a settings page once they are logged in.

With IE (and browsers that don't support selecting stylesheets), the user will have to use the aforesaid settings page.

With the page that I am testing with I have it using the unload event to figure out which style is selected and then store the cookie.

Within the php that is generating the page I have it look for that cookie and then output that stylesheet as the preferred stylesheet (by making sure that it is the one label "stylesheet" and not "alternate stylesheet").

The problem is coming from the modern browsers. I select the style using the built-in menu, and then I hit refresh. Watching the cookie I know that it is being set by the unload event, but not before the PHP reads the previous value from the cookie. This causes the page to alternate between styles as the user hits refresh.

I'm looking to see if there is a way to trap when the stylesheet is changed on modern browsers so that the cookie gets set before the unload, thus allowing the PHP to read the correct cookie value.

 

[BillyRayPreachersSon]

I don't know if there's any event that fires when a CSS is enabled / disabled, but I do know that you can test which CSS are enabled.

If you do this:

var cssItems = document.getElementsByTagName('link');

then you can check the disabled property for each of your CSS before unloading, to know which is enabled or not.

It works for me in Firefox, anyway. I've not tried Opera yet.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Borvik]

Thanks Dan, but I've got the checking for the enabled stylesheet working - it's just the timing of when it's happening that is the problem (currently in unload, but it appears that that is too late).

 

[BillyRayPreachersSon]

Why would it be too late? If you can fire a check off to see which is currently enabled, and store it, surely that would work?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Borvik]

Ok, first I look at the cookie. It contains the value of the title of the current stylesheet. I then change the stylesheet using the View > Page Style menu in Firefox. Then I refresh the page. The page refreshing is a PHP page and I have it reading the same cookie. It, however, is reading the value of the cookie I saw first, before I changed the style. When I look at the cookie again (after the refresh) it contains the value it's supposed to have (the value set from the unload event).

After thinking about the problem I can see two possibilites: one, to have a javascript timer that constantly sets this cookie (undersirable though to eat up unnecessary CPU); or two, to have javascript set the style onload (as the PHP is reading the cookie to output the stylesheets in the proper order for the default stylesheet to be the selected stylesheet).

It would be nice if there is a third possibility, however, I'm not so sure there is one? Confirmation - other ideas?