...

View Full Version : Cycling through style sheets?



AshleyQuick
01-06-2004, 04:31 PM
I'm trying to modify this script so that, vs. having individual links for each of the four style sheets I want to use, I can use one href that will cycle through all of them as you keep clicking. Please help! :)

----
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);
----

Currently, it will only work using a separate link for each sheet:

<a href="#"
onclick="setActiveStyleSheet('style01');
return false;">change style to style01</a>

<a href="#"
onclick="setActiveStyleSheet('style02');
return false;">change style to style02</a> ...etc.

AshleyQuick
01-07-2004, 03:44 PM
Anyone? Should I have posted in the css forum?

shawn tate
01-11-2004, 01:05 AM
New I had seen that code before you took it from http://www.fjordaan.uklinux.net/moveabletype/fblog/archives/2002_02.html
So much for copyright

Garadon
01-11-2004, 01:27 AM
this is only a guess, assuming u know the number of styles and the active style:

activestyle=1;
numberofstyles=9;
function NextStyle()
{
activestyle=activestyle+1;
if(activestyle>=numberofstyles)
{
activestyle=0;
}
setActiveStyleSheet('style0'+activestyle);
}

the link

<a href="#"
onclick="NextStyle();
return false;">change style to style01</a>

Willy Duitt
01-11-2004, 02:38 AM
Here's one I wrote in response to the same question a little while ago.
You are welcome to use it if you like.
Name your style sheets:
style_1.css
style_2.css
style_3.css
style_4.css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>

<link rel="stylesheet" type="text/css" href="style_1.css">
<link rel="stylesheet" type="text/css" href="style_2.css">
<link rel="stylesheet" type="text/css" href="style_3.css">
<link rel="stylesheet" type="text/css" href="style_4.css">

<script type="text/javascript">
<!--//
function setCookie(new_style) {
var which = document.getElementsByTagName('a');
var what = which[new_style-1].name;
var duitt = new Date();
duitt.setTime(duitt.getTime() + 365*24*60*60*1000);
var expString = "; expires=" + duitt.toGMTString();
document.cookie = 'My_Style='+what+expString;
}

function setStyle(which_style) {
if (/My_Style=style_(\d*)/.test(document.cookie)) {
which_style = RegExp.$1*1;
}
else {
which_style = which_style;
}
if(document.styleSheets) {
which_style = which_style-1;
for(i=0;i<document.styleSheets.length;i++) {
if(i!=which_style) {
document.styleSheets[i].disabled=true;
}
else {
document.styleSheets[i].disabled=false;
}
}
}
}
setStyle(1)
//-->
</script>
</HEAD>

<BODY>
<div id="Layer1" style="position:absolute; left:8px; top:50px; width:95px; height:350px; z-index:1">
<a name="style_1" href="javascript:setStyle(1)" onclick="setCookie(1)">style one</a><br /><br />
<a name="style_2" href="javascript:setStyle(2)" onclick="setCookie(2)">style two</a><br /><br />
<a name="style_3" href="javascript:setStyle(3)" onclick="setCookie(3)">style three</a><br /><br />
<a name="style_4" href="javascript:setStyle(4)" onclick="setCookie(4)">style three</a><br /><br />
</div>

<div style="position:absolute; left:108px; top:50px; z-index:2;" >Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.</div>

</body>
</html>

.....Willy

liorean
01-11-2004, 03:00 AM
Have a look at the SwitchStyles bookmarklet on my site.
<http://liorean.web-graphics.com/>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum