Jeremy Hodgson

Email conversation

From	Jeremy Hodgson
To	Me
Subject	Stylesheet Switcher
Date	21 December 2004 22:23

Ok, first off, I have been searching for so long to figure out how I can
change stylesheets within a page, and yours is the first one that I have
been able to get working for me, so thank you very much for that.

Now on to my problem. I have got your script to work, a rough example is
available here [address of page], nothing else really works on the page so
far, that is just my test site. It works very good for the first page, but
Im wondering if/how i can use the stylesheet that the user selects on that
initial page to work on the rest of the pages in the web site.
Example: You use the 'gray stylesheet' for the initial page, and then you
go onto the second page, and that page also uses the 'gray stylesheet',
without having to select it again.
Right now it does not do that. I would like to resist using frames if at
all possable, im going to attempt to make my web site compatable with W3C
standards if i can manage it.

Any help that you could offer me with this would be really appreciated,
and once i get my site up, I will for sure be linking to your web site, Im
sure it will help many of my friends like it has helped me. Thank you very
much.

-Jeremy Hodgson

From	Me
To	Jeremy Hodgson
Subject	Re: Stylesheet Switcher
Date	22 December 2004 08:45

Jeremy,

Good to hear you find it useful.

you are so close to getting it working :)
Every page that wants to use the style needs to use the onload event
handler to switch the styles - just like you did on the first page:
<body onload="useStyleAgain('styleTestStore');" onunload="rememberStyle('styleTestStore');">
If you put that in the other pages, they will use the style you chose on
the first page.

The one thing I will warn you is that using the dropdown <select> to choose
styles is not easy. It works, but getting it to show the correct selected
style on each page requires a bit of work. You would need to use a cookie
script to check the value of the cookie and then cycle through the options
of the select box, and select the appropriate one.

On other pages, I don't use a dropdown, because regular links are easier.
each stylesheet link can be assigned an ID, and then each stylesheet can
apply a special style to the appropriate link to make it obvious that that
is selected. My Opera pages use that:
http://www.howtocreate.co.uk/operaStuff/ (you will need a better browser
than IE to see those pages, but the link principle will work in IE as well)


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	Jeremy Hodgson
To	Me
Subject	Re: Stylesheet Switcher
Date	13 April 2005 19:11

Hi Mark, I replied to this a couple months ago, but I guess you never got it 
because I havent received a reply back. Anyways, I got the stylesheet switcher 
to work just fine, thanks for the help. There is just one thing that I am trying 
to do now. You have to have this

        <body onload="useStyleAgain('styleTestStore');"
        onunload="rememberStyle('styleTestStore');">

on every page. I would like to put that onload/onunload information in one of my 
css files that is called "all.css" that loads initially for each page. I have 
tried to set this up, but I cannot get it to work.  This is what my CSS code 
looks like for it:

        body {
         onload: useStyleAgain('styleTestStore');
         onunload: rememberStyle('styleTestStore', 30);
        }

Will this not work, or am I just doing something wrong here? :s Any help would 
be appreciated, thanks. I no longer have my test site online, but I dont think 
you will need an example to know what I am talking about.

-Jeremy Hodgson

From	Me
To	Jeremy Hodgson
Subject	Re: Stylesheet Switcher
Date	14 April 2005 11:30

Jeremy,

> I would like to put that onload/onunload information in one of my

> css files that is called "all.css" that loads initially for each page.
>         body {
>          onload: useStyleAgain('styleTestStore');
>          onunload: rememberStyle('styleTestStore', 30);
>         }
> Will this not work, or am I just doing something wrong here?   

It will not work. The code is JavaScript, not CSS. It belongs in a
JavaScript file, not a CSS file. (There are some extremely ugly hacks that
can make it work in some browsers, but lets not go there). Add this to the
bottom of the JavaScript file:

function applyst() {
    useStyleAgain('styleTestStore');
    if( window.XTRonload ) { window.XTRonload(); }
}
function savest() {
    rememberStyle('styleTestStore', 30);
    if( window.XTRonunload ) { window.XTRonunload(); }
}

//load handling adapted from
//http://www.brothercake.com/site/resources/scripts/onload/
if( window.addEventListener ) {
    window.addEventListener( 'load', applyst, false );
    window.addEventListener( 'unload', savest, false );
} else if( document.addEventListener ) {
    document.addEventListener('load' , applyst, false );
    document.addEventListener( 'unload', savest, false );
} else if( window.attachEvent ) {
    window.attachEvent( 'onload', applyst );
    window.attachEvent( 'onunload', savest );
} else {
    if( window.onload ) { window.XTRonload = window.onload; }
    if( window.onunload ) { window.XTRonunload = window.onunload; }
    window.onload = applyst;
    window.onunload = savest;
}

Jeremy Hodgson

Navigation

Search

Site navigation

Email conversation