Tom's Guide | Tom's Hardware | Tom's Games
 |
 |
 |
Hello.
What i want to is create many .css file for a webpage (It is a intranet site) with diffrent colour schemes, (i am fine on this). But i want to know how to give the use the option to apply diffrent .css to this same page.Also what i would like do is make it so that the user gets the same .css every time they come to the site. Maby some cookies or something. I am not sure about this part.
Any Help
Thanks.
You are correct in that a cookie can be used to
set that, and if you've got server side
scripting, then it's fairly easy. You could
add a form with a selection of avalible styles
or use links.
.<form action="some_script" method="post"> <select name="style" size="1"> <option value="1">some style</option> ... </select> </form> you could also use links and no form <a href="some_url?s=style1">style 1<a/> <a href="some_url?s=style2">style 2<a/> ...If you had server side scripting, then perhaps
you could read the cookie back using something
like below
<head>
<?php
if(isset($_COOKIE["userstyle"]) &&
!empty($_COOKIE["userstyle"])) {
echo "<link rel=\"stylesheet\"
type=\"text\css\" href=\"" .
$_COOKIE["userstyle"] . "\">";
?>In this case, the path of desired css file could
be stored in $_COOKIE["userstyle"]You could possibly use client side scripting alone
as well, but it would depend on whether or not
the user had it enabled. Which method are you
wanting to use?Sorry about the formatting, but this site seems
to have issues at times.
0 
Thanks for that shutat,
But now upon looking at that changing the css file would not work.
But i still like the cookie bit. So would it possible to use a cookie (like i said i don't know about cookies), so that when a user opens up the page, it lookes to see if the user has a cookie and if so use that page, if not uses the defult one. On the page there could be options to used diffrent pages (each a completly diffrent file) and every time they change the one they use it writes it to the cookie, and when they re-open the page - well back to the begin.I don't if this possible, but if it is, please put tit here, Thanks.
0
After doing a bit of research, it would seem that someone else has thought of this same thing, and has worked out a solution. :D Check out this page for a way to change, save, and load stylesheet choices. At the bottom of the page, there is a script you can download; however right click on the link and choose "save as" or it will spit out the contents to the browser.
If you still want to swap pages instead, then you could still use the download above and modify the cookie functions a bit. Instead of selecting a style, you could use something like
window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); } to window.onload = function(e) { var cookie = readCookie("style"); cookie ? window.location=cookie : window.location='default.html'; }The above would expect cookie to have a page as its data and not a style, so you'd also need to modify
window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); } to window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("some_page.html", title, 365); }Hope that helps.
0
I have gone back to the css change method, that is shown in
http://www.alistapart.com/articles/...
But it dose not work right, I can change the current css style, but when i revist the site it gose back to the default one.This is in the head section of the page
<head>
<link rel="stylesheet" type="text/css" href="style/default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="style/white.css" title="white" />
<script type="text/javascript"
src="scripts/styleswitcher.js"></script>
</head>And in the body section
<body>
(This is a < only) a href="#"
onclick="setActiveStyleSheet('default');
return false;">Default (Black)
(This is a < only) a href="#"
onclick="setActiveStyleSheet('white');
return false;">White
</body>The styleswitcher.js contains the following (I have not changed it since i downloaded it from http://www.alistapart.com/articles/... )
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
I an thinking that it worked when i first used it but now i dose not work.
I must be missing something but i don't know what.
Any help
Thanks.
0
Have you checked to see if the cookie is being set? If so, have you checked its value after the page loads once, again when you save a style, and a third time when the page unloads? If it's working right, then the cookie should change.
If you view the page in Firefox or Opera, have you checked the debug window to see if there are any script errors?
I haven't tried that script myself, so I don't know how well it works.
______________________
My work in progress. I hate JS. :P
0
There is a cookie, which with the default thems shows
style
default
intranet/
1088
4222047104
30073601
2196855904
30000176
*with the other style sheet, which is called white, the cookie dose not change in any way. so i think the problem must be that a change is stylesheet is not written to the cookie.
But i can't see what the problem is.any help
thanks.
0
I tried what you've typed in response 5 along with the styleswitcher.js file from the web site just a bit ago and found similar results; I'm not sure what isn't working right, but the style isn't being changed with the "white" stylesheet. My cookie was always set to default.
I don't know if you're interested or if it will help, but I tried piecing together a bit of code that *appears* to work in both Firefox and IE 6 (anyway).
<html> <head> <script language="javascript"> var cstyle = null; function getStyle() { var c = document.cookie.indexOf("usrStyle"); if(c == -1) { cstyle = "default.css"; } else { cstyle = document.cookie.substr(document.cookie.indexOf("=") + 1); } return (cstyle); } function setStyle(val) { var cdate = new Date(); var saved = new Date(); saved.setTime(cdate.getTime() + (3600 * 24 * 365 * 1000)); document.cookie = "usrStyle=" + escape(val) + "; expires=" + saved.toGMTString(); window.location.reload(); } document.write("<link rel='stylesheet' type='text/css' href='" + getStyle() + "'>"); </script> </head> <body> <form id="s"> <select name="sel" size="1"> <option value="style1.css">Style 1</option> <option value="style2.css">Style 2</option> <option value="style3.css">Style 3</option> <option value="default.css">Default</option> </select> <input value="set style" type="button" onclick="setStyle(document.forms.s.sel.value);"> </form> <input style="background-color: #ffffff; color: #000000; text-decoration: underline; border: 0px; cursor: pointer; margin: 0px" value="default" type="button" onclick="setStyle(this.value + '.css');"> <input style="background-color: #ffffff; color: #000000; text-decoration: underline; border: 0px; cursor: pointer; margin: 0px" value="white" type="button" onclick="setStyle(this.value + '.css');"> </body> </html>If it works for you, you would need to modify the style file choices to point to the proper location, and probably the selector to a type that you'd want to use for your page; I added both a select and a couple of buttons to test with.
Hope it helps.
______________________
My work in progress. I hate JS. :P
0
I have tried your code, and for me it dose not change your current stylesheet, but which ever you click on, it dose change the code.
0
The code doesn't really swap style sheets per say, but loads a different style sheet depending on which style is set, and would only work if the css files were "found."
Where are your default.css and white.css located relative to the document? When I tested that, I had a couple of css files in the same directory as the document.
______________________
My work in progress. I hate JS. :P
0
I changed a few paths from the source in your 5th post and then placed all files in the same directory; it appears to work fine. Have you cleared your browser's cache? That *may* be the problem you're having.
<html> <head> <link rel="stylesheet" type="text/css" href="default.css" title="default" /> <link rel="alternate stylesheet" type="text/css" href="white.css" title="white" /> <script type="text/javascript" src="styleswitcher.js"></script> </head> <body> <a href="#" onclick="setActiveStyleSheet('default'); return false;">Default (Black)</a> <a href="#" onclick="setActiveStyleSheet('white'); return false;">White</a> </body> </html>styleswitcher.js was left unchanged from the original.
0
Yes i have cleared all the cache files, and still no change.
It just seems it is not writing the style change to the cookie.
0  |
 |
 |
This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |
