podmiana stylów css javascriptem

[mayev]

Witam, mam kłopotliwy problem taki jak w temacie. Usiłuję stworzyć dwie skórki na stronę i dać użytkownikowi mozliwość ich podmiany. Nie za bardzo mi to idzie.

Korzystałem z tego źródła: http://www.kurshtml.boo.pl/skrypty/skorki.html

Wszystko działa, ale tylko dla index.html znajdującego się w głównym katalogu. Reszta stron, umieszczona w osobnym podkatalogu poziom niżej przyjmuje tylko domyślna skórkę i nie mozna jej zmienić. W kursie pisze, żeby w takim przypadku używać ścieżki domyślnej, ale albo ja ją źle wpisuje albo to nie działa ; | Wyjściem awaryjnym było by wrzucene wszystkich stron do tego samego katalogu, ale chce uniknąć takiego bałaganu.

Może mi ktoś z tym pomóc :/ ? Nie wiem za bardzo jak to zrobić...

Dla jednej z tych podstron, tak wyglądają linki umieszczone w head:

Kod:

<link rel="stylesheet" type="text/css" href="../css/ciepla.css" />
<script type="text/javascript" charset="utf-8" src="javascript/skin.js"></script>

a tak lekko zmieniony kod js w body:

Kod:

        <select id="skin" onchange="if (this.value == '') skin.reset(); else skin.set(this.value)">
        <option value="ciepla.css">skórka ciepła</option>
        <option value="zimna.css">skórka mroźna</option>
        (...)
        </select>
        <script type="text/javascript">
        // <![CDATA[
        document.getElementById('skin').value = skin.get();
        // ]]>
        </script>

[Dhofca]

Kod:

<link rel="stylesheet" type="text/css" href="../css/ciepla.css" />

Sprawdź czy na pewno ta ścieżka jest poprawna. No i czy wszystkie Twoje pliki korzystają z tego samego stylu.css
Nie tak dawno korzystałem z tego skrypciku właśnie z boo i z całą pewnością mogę poświadczyć, że działa.

[mayev]

Kod:

<link rel="stylesheet" type="text/css" href="../css/ciepla.css" />

Sprawdź czy na pewno ta ścieżka jest poprawna. No i czy wszystkie Twoje pliki korzystają z tego samego stylu.css
Nie tak dawno korzystałem z tego skrypciku właśnie z boo i z całą pewnością mogę poświadczyć, że działa.

Co do tej ścieżki jestem pewien że jest w porządku - inaczej strona sie sypię więc z dojściem do cssów jest raczej ok.

Jak dla mnie, to mam problem z js. Może robię złą ścieżkę, ale już probówałem na różne sposoby i nic to nie daje.

[Dhofca]

Hmm. Sprawdziłem i mi działa. Po kolei:

1. Robię plik skin.js i wklejam do niego to:

Kod:

/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/

function Skin(name, expires, path, message)
{
    this.expires = typeof expires != 'undefined' ? expires : 365;
    this.message = typeof message != 'undefined' ? message : 'Wymagana obsługa cookie';
    this.name = typeof name != 'undefined' ? name : 'skin';
    this.path = typeof path != 'undefined' ? path : '/';
    
    var link = null;
    var original = '';
    var css = '';
    
    this.get = function()
    {
        if (css != '') return css;
        var matches = document.cookie.match(new RegExp('(^|;\\s*)' + this.name + '=([^;]*)'));
        if (matches && matches.length == 3) css = matches[2];
        return css;
    }
    
    this.set = function(url)
    {
        document.cookie = this.name + '=' + url + (this.expires > 0 ? ';expires=' + new Date(new Date().getTime() + 86400000 * this.expires).toGMTString() : '') + ';path=' + this.path;
        css = url;
        if (this.message != '' && !navigator.cookieEnabled) window.alert(this.message);
        this.show();
    }
    
    this.reset = function()
    {
        css = '';
        document.cookie = this.name + '=;path=' + this.path;
        this.show();
    }
    
    this.show = function()
    {
        var url = this.get();
        if (url != '' || original != '')
        {
            if (link == null || original == '')
            {
                for (var i = 0; i < document.getElementsByTagName('link').length; i++)
                {
                    if (document.getElementsByTagName('link')[i].getAttribute('rel').toLowerCase() == 'stylesheet')
                    {
                        link = document.getElementsByTagName('link')[i];
                        original = link.getAttribute('href');
                        break;
                    }
                }
            }
            link.setAttribute('href', url != '' ? url : original);
        }
    }
    
    this.show();
}


var skin = new Skin();

2. Robię sobie plik index.html, który wygląda tak:

Kod:

<html>
<head>
<link rel="stylesheet" type="text/css" href="ciepla.css" />
<script type="text/javascript" charset="utf-8" src="skin.js"></script>
</head>
<body>
<a href="index2.html">index2</a><br />
<!-- Pierwsza opcja czyli zmiana poprzez linki -->
<a href="javascript:void(0)" onclick="skin.set('style.css'); return false">Skórka 1</a>< br />
<a href="javascript:void(0)" onclick="skin.set('ciepla.css'); return false">Skórka 2</a><br /><br />

<!-- Druga opcja czyli zmiana poprzez listę -->
<select id="skin" onchange="if (this.value == '') skin.reset(); else skin.set(this.value)">
<option value="style.css">Skórka 1</option>
<option value="ciepla.css">Skórka 2</option>
</select>
<script type="text/javascript">
// <![CDATA[
document.getElementById('skin').value = skin.get();
// ]]>
</script>
</body>
</html>

3. Robię dwa pliki css. U mnie nazwane: ciepla.css i style.css
Żeby je rozróżnić przy próbie w jednym z nich wpisuje:

ciepla.css

Kod:

body {
background:#ff0000;
}

a w drugim:

style.css

Kod:

body {
background:#ffffff;
}

4. Robię drugi plik.html, nazywam go sobie index2.html, a jego zawartosc to:

Kod:

<html>
<head>
<link rel="stylesheet" type="text/css" href="ciepla.css" />
<script type="text/javascript" charset="utf-8" src="skin.js"></script>
</head>
<body>
<a href="index.html">Link zwrotny</a><br />
<p>zawartość strony</p>
</body>
</html>

I śmiga. Robiłem tak jak w tym tutorialu. Sprawdź u siebie czy to co wklejasz do sekcji head w drugim pliku ma poprawne ścieżki do styli. A jak nie zadziała to zrób po kolei to co Ci napisałem i pewnie wyłapiesz swój błąd.

Powodzenia.

[mayev]

Dhofca, sęk w tym, że u mnie index śmiga że aż miło Nie mam problemu z podmianą stylów w nim, tylko w innych stronach umieszczonych w podkatalogu...
Że tak sobie pozwolę zademonstrować jak wygląda drzewko katalogów:

http://img130.imageshack.us/i/zrzutekranum.jpg/

A więc: w javascript znajduje się skin.js, w css pliki css'ów. W katalogu stronki - właśnie te podstrony, które czytają tylko jeden styl ale nie chcą go zmienić na inny. Z index.html wszystko jest ok.

To, czego potrzebuję, to utowrzyć odpowiednie dowiązanie tak, aby reszta tych stron mogła podmieniać te głupie style...

[Dhofca]

Hmm..bez sensu jest takie budowanie 'drzewa', bo właśnie powstają tego typu problemy, a na początku ciężko z tym się połapać. Zrób tak
powiedzmy:

Pulpit/stronka
Pulpit/stronka/index.html
Pulpit/stronka/podstrona/
Pulpit/stronka/css/pliki.css
Pulpit/stronka/javascript/pliki js
wtedy ścieżki będa łatwiejsze do ogarnięcia.
Aktualnie jestem na uczelni więc niebardzo mogę Ci rozpisać to tak jak w poście wyżej dla Twoich ścieżek więc albo zrób tak jak poleciłem teraz, no chyba, że koniecznie chcesz tak jak robisz Ty to jak wrócę do domu wieczorem to rozpiszę.

Powodzenia.

[mayev]

Aha-aa, w sensie, żeby wszystkie pliki html mieć w tym jednym katalogu głównym, na tym samym poziomie? No tak, wiem że to by zadziałało, ale no właśnie - chciałbym uniknąć takiego rozwiązania, i zastosowac je tylko w zupełnej ostateczności, jeśli naprawdę niczego innego nie da się wykombinować. Po to zakładałem ten temat
Wiesz, chodzi o to, że takie wybebeszenie wszystkeigo na wierzch źle mi wpływa na samopoczucie i zdrowie psychiczne ;X