Style Switcher mit Javascript

[Galina]

Schönen Nachmittag,

ich hätte folgende Frage:

ich möchte auf einer Site einen Styleswitcher einbauen, über den der Benutzer die Farben der Site selber mittels Buttons auswählen kann (rot, blau,...). So weit funktioniert es ohne Probleme dass man auf der Site selber über die Buttons die Farbe ändern kann. Ich hätte jedoch gerne dass die Auswahl bestehen bleibt wenn man in der Site herum navigiert - im Moment kann man die Farbe immer nur in der gerade aufgerufenen Seite ändern, sobald man im Menu auf eine andere Seite wechselt ist die Anfangsfarbe wieder da. Gibt es eine Möglichkeit über Javascript dass die ausgewählte Farbe gemerkt wird?

Der Code im Head-Bereich ist:
<link href="../yaml/core/base.css" rel="stylesheet" type="text/css"/>
<link rel="alternate stylesheet" href="../yaml/core/base_lila.css" type="text/css" title="lila" media="screen, projection" />
<link rel="alternate stylesheet" href="../yaml/core/base_gruen.css" type="text/css" title="gruen" media="screen, projection" />
<link rel="alternate stylesheet" href="../yaml/core/base_rosa.css" type="text/css" title="rosa" media="screen, projection" />
<link rel="alternate stylesheet" href="../yaml/core/base_blau.css" type="text/css" title="blau" media="screen, projection" />
<script type="text/javascript" src="../switch.js"></script>

im Body:
<a href="javascript:setStyle('braun')"><img src="../pics/colorswahl_01.gif" alt="braun" width="18" height="20" border="0" /></a>
<a href="javascript:setStyle('lila')"><img src="../pics/colorswahl_02.gif" alt="lila" width="18" height="20" border="0" /></a>
<a href="javascript:setStyle('gruen')"><img src="../pics/colorswahl_03.gif" alt="gruen" width="18" height="20" border="0" /></a>
<a href="javascript:setStyle('rosa')"><img src="../pics/colorswahl_04.gif" alt="rosa" width="18" height="20" border="0" /></a>
<a href="javascript:setStyle('blau')"><img src="../pics/colorswahl_05.gif" alt="blau" width="18" height="20" border="0" /></a>

Javascript ist anbei.

Danke vielmals,

Galina

 

[ohrflieger]

Moin,

Also generell kann man schon sagen, dass per JS direkt solche Daten nicht seitenübergreifend gespeichert werden können. Dazu ist JS einfach nicht ausgelegt.

Es gibt aber viele andere Wege:

1. Cookies mit JS
Schreib die Farbe in einen Cookie, per JS kann man den einfach auslesen bzw. definieren.

2. Cookies mit PHP
Das gleiche wie mit JS, je nach Aufbau des Scripts nimmt man das eine oder das andere. Ich würde PHP nehmen.

3. Sessions mit PHP
Die Farbe wird in einer Session gespeichert. Die ist allerdings nur solange gültig, wie der User auf der Seite navigiert - Cookies können länger halten.

4. GET/POST-Übergabe in d. URL
Bei jedem Link per GET die Farbe übergeben - eher aufwändig und deshalb nicht zu empfehlen.

Das sind ein paar Möglichkeiten. Am besten wäre in deinem Fall wohl der Cookie.
Ich hoffe, das hat halbwegs geholfen ;)

 

[Galina]

Danke für dies schnelle Antwort - werde es mal ausprobieren ob ich dies hinbekomme!

lieben Gruß
Galina

 

[crash]

Generell sollte man das ohne JavaScript lösen. JavaScript sollte hier nur helfen den Stil direkt zu ändern, ohne dass die Seite neu geladen werden muss und den entsprechenden Cookie setzt. PHP kann dann den Cookie auslesen und das entsprechende Stylesheet anzeigen.

Lösen würde ich es in JS so:

function disableStylesheet (style) {
    if (typeof style.disabled != "undefined") {
        style.disabled = true;
        return style;
    }
    else {
        return style.parentNode.removeChild(style);
    }
}
function enableStylesheet (style) {
   if (typeof style.disabled != "undefined") {
       style.disabled = false;
       return style;
   }
   else {
       var head = document.getElementsByTagName("head")[0]
       head.appendChild(style);
       return style;
   }
}

whenDOMReady(function () {
    var select = document.getElementById("styleselect");

    var styles = Array.prototype.slice.call(document.styleSheets);
    var current = 0;
    for (var i = 0, style; style = styles[i]; i++) {
        if (style.tagName.toLowerCase() == "link" && style.media.toLowerCase() == "screen") {
            if (style.rel == "stylesheet") {
                current = i;
            }
            elseif {
                styles[i] = disableStylesheet(style);
                style.rel = "stylesheet";
            }
        }
    }

    addEvent(select, "change", function () {
        var val = +select.value;
        disableStylesheet(styles[current]);
        enableStylesheet(styles[val]);
        current = val;

        // Cookie setzen
    });
});

<select id="styleselect">
    <option value="0">normal</option>
    <option value="1">rot</option>
</select>