Different site versions with javascript

[psychophage]

Hello everybody!
I'm quite new at javascript, so I don't really know how to make a script, yet.
I've a question :
On my website, I use frames. I have a navaigtion frame, an image ( in another frame ) and a main frame, where the pages you choose on the navigation frame are displayed.
What I would like to do, is have different site versions ( with 3 different main pages ), that would be done with external css. But, I don't want to change the links on the navigation frame.
I thought about doing something with an if statement.
The different css ( on the pages ) should be loaded, depending on which is the main page. For exemple, if I have mainpageblue.htm, I would like all the pages ( page1.htm, page2.htm and so on ) to be displayed with the blue.css. And if I load the mainpagered.htm, the page1.htm, page2.htm should be loaded with the red.css.
Any hints about doing that?
How can the pages detect which is the mainpage version?
Pleeeeasssee!

[korkus2000]

I suggest that you use a server-side technology for this. It is pretty easy with PHP or ASP to achieve this. JS just won't cut it very well.

[DrDoc]

Welcome to Webmaster World!

The easiest way to do this would be using PHP sessions. If you absolutely want/need to use JavaScript, you could set a cookie on the main page, then read that cookie to determine which style sheet to load.

Still, a server side solution is much better...

[psychophage]

how do you do this? And what is a server side?
I thought an if statement in js could do it, but as I said, I'm really a beginner... I don't know anything about php, by the way... would it work with frame pages?

[Arthalion]

Psycho~ It's fairly straightforward, but it's not exactly simple.

First, you need to load all of your stylesheets into the page at pageload (pick one to be the default, and set the others as alternates). When the page loads, the browser will assign a numeric stylesheet ID to each in the order that they were included. To change the stylesheet, just write a loop to set document.styleSheets[stylesheetid].disabled = false or true. If your third stylesheet were green and you wanted to switch to it, for example, you would want to set stylesheetid 1 and 2 to true, and 3 to false. This would enable the green stylesheet and disable the others.

The rest is just a matter of cookies. When someone clicks to change the stylesheet, write a cookie to record the id of the selected CSS. After that, just run a body.onload event to check the cookie and enable the matching stylesheet using the method I just described.

I should point out here that you'll want to be very concious of the number and size of your stylesheets since the user will have to download ALL of them, not just the current one. I learned this the hard way when I once used this method to allow the user to pick between fourteen stylesheets (for accessibility purposes) each about 10k in size. Counting the main page and the external JS file, the user ended up with a 160k download just to see the front page...unacceptable by any measure. So if you're going to do this, make SURE that your css files are compact and fast loading.

[psychophage]

so, actually, I don't want the user to choose between the versions... I just want to have three versions, randomly activated. Blue, green and black.
What I plan to do, is have 3 mainpages : a blue one, a green one, and a pink one ( no, just kidding, black, of course ).
I'm not sure I can post my url here, but it's just for the explanation. So you can see it at : <snip>
The 3 pages will have different images, different styles, and different navigation styles. BUT, I want the inner pages to stay the same, as I don't want to edit 3 different pages everytime I make an update ( already tried this, it was just a loss of time... ).
So, what I thought of, is have my inner page, with 3 external css, and the page would load the right one, depending on the color of the main page. My problem is not the choosing of the css, but HOW can the innerpage detect which is the mainpage version? Can I do this with the page title? Can it be done in javascript? Can the mainpage be considered as "parent"? ( I use frames )...

[edited by: korkus2000 at 11:02 pm (utc) on Feb. 19, 2004]
[edit reason] No code reviews please [/edit]

[psychophage]

hhheeeeeellllllllpppppppppp!

[DrDoc]

When you're saying "main page"... which of the following scenarios are we talking:

Is the relationship between "main page" and "other page" --

you click on a link to go from the main page to the other page... clicking "back" takes you back to the main page...

or

the main page is the page holding a frameset, where one or more pages are opened... main page being the parent, and the other page being the child...

or

the main page is a regular page with an iframe, where one or more pages are opened... main page parent, and the other page being the child...

[psychophage]

heeee.... Main page is my frameset page, holding three frames ( the navigation frame, the image frame and the frame where the inner pages open themselves )... Sorry!

[DrDoc]

1) set a cookie on your main page holding the frameset
2) let a script read the cookie on the other pages, using the cookie data to select the correct style sheet

[psychophage]

hrrr... how do you do that? I have nooooo idea how I'm supposed to make this cookie, not even about the script reading the cookie...
I'm really a beginner, you know!

[DrDoc]

I hope you take this the right way... As a way of helping you to learn

Do a site search for it... or Google for it. Then come back with what you've got, and we'll go from there :)

[psychophage]

ok...... I'll try this.... Is this javascript, or php? Can you just tell me that, so I know which way to look for it?

[psychophage]

Ok
I found how to put a cookie on the page, and how to get the cookie back....
But what if the cookie is on another page?
How can you get it back?
For the rest, I think I can manage this, it's a simple if else statement, so I'll try to do it by myself...
I have another question...
Is it possible to define the style, relative to the parent?
As every frameset will be different, depending on the version, I could use something like that :
document.write('<LINK REL=stylesheet HREF="'+parent.styleSheet+'" TYPE="text/css"> ')
No?

[DrDoc]

As long as the cookie is set for the same domain you are able to retrieve it. :)

Is it possible to define the style, relative to the parent?

It is possible, but not advisable... since the support is pretty poor.

But, you can do something like this:

document.write('<LINK REL=stylesheet HREF="' + cookiedata + '.css" TYPE="text/css">')

Assuming that 'cookiedata' holds the name of the style sheet to load that will work great.

[psychophage]

Ok, so if my style sheet's name is : blue.css, what you advise me to do is put a cookie on the frameset, which would be define like this :
document.cookie = "bluestyle=blue"
or, should the cookie's name be "blue", instead of the value?
So, you tell me that the cookie will be found, even if it's not on the same page?

[psychophage]

Hi again!
So, I tried the thing with the cookie, and it didn't work. It told me that the name of the cookie was not defined, so I had to define the style sheet relative to the parent, even if it's not the best solution... But it worked, at least...
So, I have another question :
Once I have my frameset with all my styles defined, and I open a link in my mainframe ( the style works fine ), if, from this page which was opened in the mainpage ( following me? ), you open another page ( with <a href.... target: _self.... ), it's not working any more. The style won't be defined... So how can I do it? Can I import the style from the previous page? Or can I export the style from the page 1 to the other page I open with the link ( and target: _self )?
Please!