Menu
I have a main stylesheet with two groups of alternate stylesheets. The alternate two groups of stylesheets are all disable when one is activated. The main stylesheet is persistent and never disabled. The alternate stylesheets only contain different elements taken out of the main stylesheet and only implemented when activated. I added the class with the two groups to see if I could accomplish activating one inside a group and deactivating the others in that group but not any in the other group. Ive tried many other styler switchers and jquery methods and I have not got anywhere, this is the best result yet. Im really new to all this and would appreciate any help.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/files/theme/mainstyle.css" rel="stylesheet "type="text/css"/>
<link href="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" title="body1" />
<link href="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" title="body2" />
<link href="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" title="body3" />
<link href="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" title="para1" />
<link href="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" title="para2" />
<link href="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" title="para3" />
<script type="text/javascript" src="/files/theme/styleswitcher.js"></script>
</head>
the styleswitcher.js file from http://www.alistapart.com/articles/alternate/
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);
Crude stylesheet selector
<ul>
<li> <a href="#"
onclick="setActiveStyleSheet('body1');
return false;">body1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('body2');
return false;">body1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('body3');
return false;">body3</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para1');
return false;">para1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para2');
return false;">para2</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para3');
return false;">para3</a></li>
</ul>
If its possible to go about this in another way that considered the correct way, I would love to be pointed in that direction to figure it out. If not, I would still love to know if this is possible with what I have , learning lesson I guess. Thanks.
668
UPDATE
It sounds like you want to be able to have 1 stylesheet active from each group at a time. And since you're using cookies, you'll want to be able to save each stylesheet per group so a user will have all of their settings correct. I didn't understand what your getPreferredStyleSheet() function was for, because it just returns the first <link> that is a stylesheet. If you are starting with some links already turned on, it seems like you don't need that function at all. I figured that when you are creating your cookie, you could just call getActiveStyleSheets() instead because it's safe to assume that when the person is leaving the page, that they set it up the way they like it.
Anyways I edited your functions to allow multiple stylesheets to get set from a cookie, and to save multiple stylesheets to get saved in a cookie. You'll have to update your calls because I added an s to the function names.
JavaScript
function setActiveStyleSheets(ids){
ids = ids.split(',');
var i, j, l, link;
for(i=0; (link = document.getElementById(ids[i])); i++){
for(j=0; (l = document.getElementsByTagName('link')[j]); j++){
if(l.hasAttribute('switch') && l.className.indexOf(link.className) !== -1)
l.removeAttribute('href');
}
link.href = link.getAttribute('switch');
}
}
function getActiveStyleSheets(){
var i, link, active = [];
for(i=0; (link = document.getElementsByTagName('link')[i]); i++){
if(link.hasAttribute('switch') && link.href){
active.push(link.id);
}
}
return active.join(',');
}
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 i, c, ca = document.cookie.split(';');
for(i=0; (c = ca[i]); 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 || getActiveStyleSheets();
setActiveStyleSheets(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheets();
createCookie("style", title, 365);
}
HTML
<link href="/files/theme/body1.css" switch="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" id="body1" />
<link switch="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" id="body2" />
<link switch="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" id="body3" />
<link href="/files/theme/para1.css" switch="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" id="para1" />
<link switch="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" id="para2" />
<link switch="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" id="para3" />
...
<ul>
<li>
<a href="#" onclick="setActiveStyleSheets('body1'); return false;">body1</a>
</li>
<li>
<a href="#" onclick="setActiveStyleSheets('body2'); return false;">body2</a>
</li>
<li>
<a href="#" onclick="setActiveStyleSheets('body3'); return false;">body3</a>
</li>
<li>
<a href="#" onclick="setActiveStyleSheets('para1'); return false;">para1</a>
</li>
<li>
<a href="#" onclick="setActiveStyleSheets('para2'); return false;">para2</a>
</li>
<li>
<a href="#" onclick="setActiveStyleSheets('para3'); return false;">para3</a>
</li>
</ul>
HTML - Change your href attributes to switch and your title attributes to id
<link switch="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" id="body1" />
<link switch="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" id="body2" />
<link switch="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" id="body3" />
<link switch="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" id="para1" />
<link switch="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" id="para2" />
<link switch="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" id="para3" />
JavaScript - Change your setActiveStyleSheet function to this:
function setActiveStyleSheet(id){
var i, l;
var link = document.getElementById(id);
for(i=0; (l = document.getElementsByTagName('link')[i]); i++){
if(l.hasAttribute('switch') /*&& l.className.indexOf(link.className) !== -1*/)
l.removeAttribute('href');
}
link.href = link.getAttribute('switch');
}
If the <link> is not pointed to the stylesheet, then you can't have the styling. When you click on a <li> item, it passes the id to this function and this function checks if the <link> has the switch attribute and if it does, it makes sure there the href attribute is set to nothing. Now I couldn't quite tell if you wanted to allow a <link> from each class to be activated. If you do, just remove the /* */ from the second part of the if statement. If not, then you can just delete that part. Anyways, after all of the links href attributes are removed, the <link> with the corresponding id has it's href attribute set to it's switch attribute. So it is active while all of the rest are not.
Like I said I'm sure there's a better way to do this, but this was easy and it's late and I'm going to bed. Hope this helps.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
