 |
| |
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-11-2003 05:23
Hi, guys. Long time no see.
How are you?
I am a bit tired. But probably fine.
BTW, could you read this story.
I made four button to upload four different stylesheets.
Each page 4 gifs to click and apply for each color like red, blue, green, and black.
Each individual pages work fine.
Problem is:
If I go to another page, user has to click again to choose favorite style. But what I want to is to keep user's choice unless they click another button.
Here is my code:
code:
<head>
<title>Home page of Data Organisation</title>
<link rel="stylesheet" type="text/css" href="../css/2.css" id="ss1">
<script type="text/javascript">
function sw(season){
document.all.ss1.href="../css/" + season + ".css"
}
</script>
</head>
and in body
code:
<body>
<img src="../button/red.gif" onClick='sw("2")'>
<img src="../button/green.gif" onClick='sw("3")'>
<img src="../button/blue.gif" onClick='sw("4")'>
<img src="../button/black.gif" onClick='sw("1")'>
Choose style
</body>
Well, hope my English is OK to tell you the problem.
I am looking forward to hearing from you.
Cya.
Hiroki Kozai
|
mr.maX
Maniac (V) Mad Scientist
From: Belgrade, Serbia
Insane since: Sep 2000
|
posted 07-11-2003 10:15
You should store last used style as browser cookie and then read it from onload event on each page and adjust CSS accordingly.
More information about cookies can be found in the :FAQ: How do I set and read cookies in JavaScript? and also by searching previous posts in this board for word "cookies"...
[This message has been edited by mr.maX (edited 07-11-2003).]
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 07-11-2003 15:41
There's also a couple of posts in the XHTML/CSS forum about supporting this with PHP to make the style changes more seamless across across different pages.
|
Nevel
Bipolar (III) Inmate
From: Amsterdam
Insane since: Jun 2002
|
posted 07-11-2003 20:02
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-12-2003 08:22
Hi, guys. Many many thanks for your advices.
And nice to talk to you, Mr. Max. I have been thinking of you for ages.
I am so excited to get post from you, Mr. Max.
How are you doing?
Anyway, I am at internet cafe at the moment.
So I cannot try anything now.
I will see the links and do the job on Monday.
Have a happy weekend, guys.
Again, thanks guys.
Cheers
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-15-2003 00:15
I am back to tech now.
Well, I will solve this problem today.
See you soon.
Hiroki Kozai
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-15-2003 02:16
Hi, guys. How are you?
I have been trying to figure out how to do CSS switcher.
But still doesn't work.....
Would you mind seeing what I have done so far???
code:
<head>
<title>Home page of Data Organisation</title>
<link rel="stylesheet" type="text/css" href="../css/default.css">
<link rel="alternate stylesheet" type="text/css" title="red" href="../css/red.css">
<link rel="alternate stylesheet" type="text/css" title="green" href="../css/green.css">
<link rel="alternate stylesheet" type="text/css" title="blue" href="../css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="black" href="../css/black.css">
<script type="text/javascript" src="../js/styleswitcher.js"></script>
</head>
code:
<body>
<!-- CSS Switcher -->
<a href="#" onclick="setStyle('red'); return false;" ><img src="../button/red.gif" alt="red"></a>
<a href="#" onclick="setStyle('green'); return false;" ><img src="../button/green.gif" alt="green"></a>
<a href="#" onclick="setStyle('blue'); return false;" ><img src="../button/blue.gif" alt="blue"></a>
<a href="#" onclick="setStyle('black'); return false;" ><img src="../button/black.gif" alt="black" ></a>
<br />
Choose style
<!-- End of CSS Switcher -->
</body>
And JS for switcher function
code:
function setStyle(style)
{
if (document.getElementsByTagName)
{
styles = document.getElementsByTagName('link');
}
for (i=0;i<styles.length;i++)
{
if (styles[i].title)
{
styles[i].disabled = true;
}
if (styles[i].title == style)
{
styles[i].disabled = false;
}
}
var expires = new Date();
expires.setTime(expires.getTime() + 1000*60*60*24*360);
document.cookie = 'sitestyle=' + escape(style) + '; expires=' + expires.toGMTString() + '; path=/';
}
Hmm........Would you see something wrong???
Looking forward to hearing from you!
Hiroki Kozai
|
mr.maX
Maniac (V) Mad Scientist
From: Belgrade, Serbia
Insane since: Sep 2000
|
posted 07-15-2003 11:24
Well, you also need to read previously stored cookie in onLoad body event in order to enable previously used style and disable others. As it is now, you're just storing a value as cookie and not doing anything with it later...
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-16-2003 02:50
Hi, Mr.Max.
Many thanks for your reply.
But I just wonder if you could possibly explain me more about:
quote:
stored cookie in onLoad body event in order to enable previously used style and disable others
Hmm.....Actally I have been having a hard time to do this.
I want to do it!!!!
Look forward to hearing from you.
Cya.
Hiroki Kozai
[Emp edit: fixing UBB]
[This message has been edited by Emperor (edited 07-30-2003).]
|
Emperor
Maniac (V) Mad Scientist with Finglongers
From: Cell 53, East Wing
Insane since: Jul 2001
|
posted 07-30-2003 12:16
I've upated this FAQ too:
:FAQ: How do I change stylesheets dynamically?
I notice that Suho (from where you got the code) doesn't seem to check for the cookie onload:
www.liminality.org
so my suggestion I made in th GN:
http://development.gurusnetwork.com/discussion/showthread.php?s=&postid=19326#post19326
still stands - I suspect it isn't being brought in properly (or something like that - the CSS in the wrong place). When you say it doesn't work are there errors? Can we see it running online?
___________________
Emps
FAQs: Emperor
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-30-2003 23:54
Hi, Emp.
Good morning. How are you today?
Yes, I uploaded my site here. And I uploaded two html files. So first two link, which is home and Binary definition will work.
Many many thanks for your help.
Ps. This thread is related to my post in gurusnetwork.com.
Hiroki Kozai
[This message has been edited by Hiroki (edited 07-30-2003).]
[This message has been edited by Hiroki (edited 07-31-2003).]
|
Emperor
Maniac (V) Mad Scientist with Finglongers
From: Cell 53, East Wing
Insane since: Jul 2001
|
posted 07-31-2003 00:43
Hiroki: It appears to work for me.
___________________
Emps
FAQs: Emperor
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-31-2003 00:51
Hi, Emp.
Many thanks for your reply.
I am sort of excited cuz at least it worked for you.
But I'd like to see it is working in front of me as well.
Could I ask you what browser you use at the moment???
I am using IE5 on Windows OS.
And I'd like to make sure what I'd like to acheive.
User can choose 4 styles from the left hand side menu. If user chooses *blue*, blue style sheet must be applied to the all page when user moves to another page. In my uplaoded site, I made first two page work.
What is happening is that I can change 4 colors stylesheet. That is no problem. But it goes default style as soon as I get to another page. I dont' know why.........
When I see Suho's site, it works like charm.
Hmm......Is that really working, Emp???
Hiroki Kozai
|
Emperor
Maniac (V) Mad Scientist with Finglongers
From: Cell 53, East Wing
Insane since: Jul 2001
|
posted 07-31-2003 01:28
Hiroki: Yep it works as far as I can tell - the text changes colour and the image moves. It might be IE5 that is causing you problems as it is an old browser although it is interesting that Suho's site works properly for you. It might be something to do with the styles or the coding of your page.
You really need to test it in amore up-to-date browser.
[edit: I'm using IE6/Win]
___________________
Emps
FAQs: Emperor
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-31-2003 01:41
Hi, Emp.
Many thanks for your replies.
What browser are you using???
Hiroki Kozai
|
Steve
Maniac (V) Inmate
From: Boston, MA, USA
Insane since: Apr 2000
|
posted 07-31-2003 02:40
Hiroki: It works for me too - I think. The navigation links at left and the headline change color (however - green and blue appear to be inverted - click blue square get green type, click green square get blue type.) If any elements besides those should change, they don't for me (oh - the flower graphic moves and loses its border when I click the gray square.)
Let me just clarify for you what Mr. Max means about cookies. You don't need a cookie to CHANGE the style sheet. You need a cookie to REMEMBER the user's choice when they go to another page in the site. The default color appears to be reddish. If I click, let's say, green and then go to another page, it's back to red. A cookie would store my preference and apply it to every page in the site until I changed my preference.
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-31-2003 04:23
Hi, Steve:
quote:
A cookie would store my preference and apply it to every page in the site until I changed my preference.
Many thanks for your reply. How are you today?
Well, probably I haven't made my desire clear.
As you can see that quote, user's preference has to keep being applied to each page until they change.
When I see my uploaded web site, I can change 4 different stylesheets. It is no problem. But when I click to another link(actually I move to another page), my preference has been lost then default sheet always sitting there.
Now could I ask one again?
Is that working *(preserving your preference)* when you had a look???
Hiroki Kozai
|
Steve
Maniac (V) Inmate
From: Boston, MA, USA
Insane since: Apr 2000
|
posted 07-31-2003 19:39
"Is that working *(preserving your preference)* when you had a look?"
no
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 07-31-2003 23:34
Hi, Steve.
Thanks a lot.
Hmm....I will find a way.
Hiroki Kozai
|
Archonian
Nervous Wreck (II) Inmate
From: Sweden, Malmoe
Insane since: Jan 2003
|
posted 08-01-2003 18:27
Hello,
this might be a weird method but you could try to use frames. Create a 0 or 1 pixel frame on the top and the bottom one should take the rest of the space, the one with the content.
Then you could save your style to the upper frame in a variable. Then get that data from that frame each time you load a new page.
parent.frame[0].variable=stylesheetused;
can be used, I think, to change the value of the variable in the upper frame.
|
Hiroki
Paranoid (IV) Inmate
From: NZ
Insane since: Dec 2002
|
posted 08-04-2003 02:05
Hi, mate.
Thanks for your help.
Is it lovely summer up there?
If so, I envy you pretty much.
From freezing place, Timaru
Hiroki Kozai
|
