+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: podmiana stylów css javascriptem (/thread-podmiana-stylow-css-javascriptem)
podmiana stylów css javascriptem - mayev - 16-12-2009
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>RE: podmiana stylów css javascriptem - Dhofca - 18-12-2009
Kod:
<link rel="stylesheet" type="text/css" href="../css/ciepla.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.
RE: podmiana stylów css javascriptem - mayev - 18-12-2009
(18-12-2009, 02:29)Dhofca napisał(a):Sprawdź czy na pewno ta ścieżka jest poprawna. No i czy wszystkie Twoje pliki korzystają z tego samego stylu.cssKod:<link rel="stylesheet" type="text/css" href="../css/ciepla.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.
RE: podmiana stylów css javascriptem - Dhofca - 19-12-2009
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;
}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.
RE: podmiana stylów css javascriptem - mayev - 19-12-2009
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...
RE: podmiana stylów css javascriptem - Dhofca - 19-12-2009
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.
RE: podmiana stylów css javascriptem - mayev - 20-12-2009
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