Funktionen & Template » Styleswitcher

Florians Forum � Webmaster � Xobor (Homepagemodules & Dynamicboard) � Funktionen & Template � Styleswitcher

Seite 1 von 3 � Seite 1 2 3 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Styleswitcher datum

04.01.2008 17:58 (zuletzt bearbeitet: 09.01.2008 16:09)

Eine der besten nachr�stbaren Funktionen ist der Styleswitcher. Er erm�glicht es dem User, das Design der Seite auszuw�hlen, ohne dass die Seite dazu neu geladen werden muss.
JavaScript muss aktiviert sein, damit die Funktion ausf�hrbar ist.
(Erkl�rung zum Styleswitcher)

Alle �nderungen erfolgen im Template Element "Obere Leiste"!

Teil 1, Funktion des Styleswitchers:

Folgender Quellcode muss zwischen

<HEAD>

und

</HEAD>

eingef�gt werden:

<!-- Styleswitcher Head Anfang -->

<script language="JavaScript" type="text/javascript">

var a = new Date();

a = new Date(a.getTime() +1000*60*60*24*365);

var styles = new Array();



/* Pfad zu den CSS-Dateien mit den Style-Informationen */

styles[0] = 'http://server.de/style1.css';

styles[1] = 'http://server.de/style2.css';

styles[2] = 'http://server.de/style3.css';



var foundstyle = false;

if(document.cookie) {

var c = document.cookie;

var foundstyle = false;

/* Cookievariablen ermitteln */

while(true) {

var i1 = c.indexOf('=');

var i2 = c.indexOf(';');

/* Falls Semikolon am Ende fehlt */

if(i2 < 0)

i2 = c.length;

var cookiename = c.substring(0, i1);

var cookiewert = c.substring(i1+1, i2);

/* Leerzeichen vor Name entfernen */

var i3 = cookiename.lastIndexOf(' ');

if(i3 > -1)

cookiename = cookiename.substring(i3 + 1);

/* Style festlegen */

if(cookiename == 'style') {

try {

var n = parseInt(cookiewert);

document.write('<link id="style" type="text/css" rel="stylesheet" href="' + styles[n-1] + '">');

foundstyle = true;

}

catch(err) {}

break;

}

/* Nächstes Cookie oder aufhören */

if(c.length > i2)

c = c.substring(i2+1);

else

break;

}

}



/* Standardstyle im Falle von Fehler oder keinem gewählten Style */

if(!foundstyle) document.write('<link id="style" type="text/css" rel="stylesheet" href="http://server.de/style1.css">');



function change_style(n) {

document.getElementById('style').href = styles[n-1];

/* Cookie setzen */

document.cookie = 'style=' + n + '; expires=' + a.toGMTString() + ';';

return;

}

</script>



<noscript>

<!-- Standardstyle falls Scripts nicht aktiviert sind -->

<link id="style" type="text/css" rel="stylesheet" href="http://server.de/style1.css">

</noscript>

Im Skript muss noch der Pfad zu den CSS-Dateien mit den Design-Informationen angegeben werden. (Anleitung zum Erstellen von CSS-Dateien)
Die Dateien m�ssen online verf�gbar sein, am besten auf den eigenen Webspace hochladen!

Es k�nnen beliebig viele Style-Dateien angegeben werden. Allerdings muss am Anfang der Zeile die Zahl in der eckigen Klammer immer um 1 erh�ht werden.
=> styles[0] -> styles[1]

Au�erdem muss noch zweimal der Pfad zu einem Standardstyle gesetzt werden, der im Falle eines Fehlers oder bei abgeschaltetem JavaScript ausgew�hlt wird.

Teil 2, optionales Ausblenden bei deaktiviertem JavaScript:

Optional: wenn das Skript nicht eingef�gt wird, Kommentar zur Entfernung im letzten Quelltext befolgen:
Wenn der Styleswitcher bei deaktiviertem JavaScript gar nicht angezeigt werden soll, muss das folgende Skript auch noch vor

</HEAD>

eingef�gt werden:

<script type="text/javascript">

function switcher_on() {

document.getElementById('switcher').style.display=''

 }

</script>

Nun nur noch im body-Tag onload="switcher_on()" erg�nzen, damit die Funktion beim Seitenaufruf auch aufgerufen wird.

<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" onload="switcher_on()">

Die Funktion sorgt daf�r, dass bei aktiviertem JavaScript die Auswahl-Box des Styleswitchers eingeblendet wird. Ist JavaScript nicht aktiviert, so kann auch keine Auswahlbox erscheinen. Der Styleswitcher w�re sowieso funktionslos.
Wenn der Styleswitcher ausgeblendet wird, sollte der optionale Quellcode im letzten Quelltext stehen bleiben!

Teil 3, DropDown-Men�:

Jetzt fehlt nur noch die Auswahl-Box f�r den Styleswitcher:

<div id="switcher" style="display:none;"> <!-- Styleswitcher standardmäßig ausgeblendet, Zeile entfernen, wenn immer eingeblendet werden soll -->



<form>

<select class="tarea" size="1" name="Styleswitcher" onChange="javascript:self.location = this.form.Styleswitcher.options[this.form.Styleswitcher.selectedIndex].value;">

	<option value="">Style &auml;ndern...</option>

	<optgroup label="Styles">

		<option value="javascript:change_style(1)">Name Style 1</option>

		<option value="javascript:change_style(2)">Name Style 2</option>

		<option value="javascript:change_style(3)">Name Style 3</option>

	</optgroup>

</select>

</form>



</div> <!-- Styleswitcher standardmäßig ausgeblendet, Zeile entfernen, wenn immer eingeblendet werden soll -->



<!-- optional, falls Platzhalter eingefügt werden soll Anfang -->

<noscript>

[Styleswitcher]

</noscript>

<!-- optional, falls Platzhalter eingefügt werden soll Ende -->

Hier nur noch so viele Zeilen mit

<option value="javascript:change_style(Zahl)">Stylename</option>

einf�gen, wie oben Links zu CSS-Dateien angegeben sind. Auch hier muss die Zahl in der diesmal runden Klammer immer um 1 erh�ht werden. Die erste angegebene CSS-Datei erh�lt nun den ersten angegebenen Namen, die zweite CSS-Datei wird nach dem zweiten angegebenen Namen benannt, usw. ...

Der Abschnitt zwischen den Kommentaren, die mit dem Kommentar 
gekennzeichnet sind, sorgt daf�r, dass wenn kein JavaScript aktiviert ist, nur der Text [Styleswitcher] ausgegeben wird. Dies macht aber nur dann Sinn, wenn die zwei Zeilen mit dem Kommentar 
nicht entfernt wurden, da ansonsten eine nicht funktionsf�hige Auswahlbox angezeigt wird (s. Beschreibung zweiter Quelltext).

florian-zier hat folgende Bilder an diesen Beitrag angeh�ngt

styleswitcher.jpg

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Bitte geben Sie einen Grund f�r die Verwarnung an