Hi toggo,
ein leicht anderer Ansatz wäre es, den Loader bei Klick auf den Link am Anfang des Skriptes anzeigen zu lassen.
Die CSS-Dateien beinhalten dann eine Anweisung, welche den Loader wieder ausblendet.

D.h.: Sobald die CSS-Datei geladen ist, greifen deren Style-Definitionen, eine davon setzt die display-Eigenschaft des Loaders dann wieder auf none.
Somit entfällt wahrscheinlich die Prüfung per Skript, ob auch alles geladen wurde.
Das Skript muss nur zu Anfang den Loader sichtbar setzen.


Dies mal vorab als kleiner Denkanstoß, falls du schon etwas herumtüfteln möchtest...

Hallo toggo,
ich fühle mich geehrt, dankeschön!

Natürlich bin ich für dich ansprechbar.
Da du so einen Vorscherdrang (gute Sache sowas) hast, wollte ich dir die letzte Idee nicht vorenthalten, falls du selbst noch etwas tüfteln willst.
Solltest du es nicht hinbekommen, werde ich natürlich selbst die Idee auch noch ausprobieren.
Ob ich aber heute noch dazu komme, kann ich noch nicht sagen.

Hallo toggo,
ich habe die Tage immer mal wieder etwas herumprobiert.

Hat zwar noch etwas länger gedauert, dafür ist der Styleswitcher jetzt noch etwas optimiert und vereinfacht.
(Außerdem musste ich mit Notepad++ arbeiten )

Im Anhang findest du ein kleines Beispiel-Paket.
Ich werde hier jetzt nicht jede einzelne Zeile erklären, sondern nur die wichtigsten.
Schließlich soll dieser Beitrag ja nicht noch länger auf sich warten lassen.
Sollten dadurch noch fragen offen bleiben, können wir diese immer noch hinterher klären.


Die CSS-Dateien und die Bilder sind sozusagen das, was du auf deinen Server hochladen musst.
Die styleswitcher.html ist sozusagen dein Template, du musst eben die Elemente aus dem HEAD und BODY übernehmen in dein Foren-Template. (Vergiss nicht switcher_on(); per Onload aufzurufen)
Da die Test-Dateien selbst auf dem Testserver alle im gleichen Verzeichnis liegen, sind alle Pfad-Angaben relativ.
Beachte also, dass du die Pfad-Angaben für die Bilder und CSS-Dateien im Template anpassen musst und die volle URL verwendest.
Dazu zählen transparent.png, loader.gif und natürlich die Pfade zu den Styles, sowohl im Tag für den Standard-Style als auch im Skript.
Die Bilder solltest du evtl. nicht auf deinen Webspace legen, sondern bei einem Bilder-Hoster hochladen und dann diesen Pfad verwenden.
So bleibt der Lade-Bildschirm nicht verstümmelt, falls dein Server mal nicht erreichbar ist.

Bei den Änderungen werden dir auch gleich die größten Neuerungen auffallen.
Der Pfad zu einem Standard-Style muss nun nur noch einmal angegeben werden.
Außerdem werden die Bezeichnungen für das Dropdown-Menü direkt nach den Pfadangaben der Styles festgelegt.
Nebenbei müssen auch keine Nummern mehr selbst vergeben werden, sondern die Angaben erfolgen in einer mit Kommas getrennten Liste.


Um den Loader nach erfolgreichem Laden wieder auszublenden, fügst du den zu ladenden CSS-Dateien einfach folgendes am Ende an:

#style_loader {
	display:none !important;	
}
 

Sobald die CSS-Datei geladen wurde, wird dadurch der Loader wieder ausgeblendet.
Ich habe meistens nur noch ein kurzes Aufblitzen des Loaders gesehen. (wenn überhapt)
Allerdings hatte ich ja alle Dateien auf dem gleichen Server.

Sollte die CSS-Datei nicht geladen werden und der Loader dadurch nicht ausgeblendet, befindet sich im Loader immer noch ein Schließen-Link, damit die Seite weiterhin benutzbar bleibt.
Wenn du dir den Loader nochmals genauer anschauen möchtest, entferne einfach die obige CSS-Angabe aus einem Stylesheet und wechsle über das Dropdown-Menü darauf.
Er wird nun nicht mehr so schnell ausgeblendet und du kannst z.B. den Schließen-Button testen.

Im Anhang findest du zur Veranschaulichung noch einen Screenshot des Loaders.
Der gelbe Hintergrund des Styles wird durch den Loader etwas transparent ausgegraut.
Mit einer eigenen transparent.png kannst du den Effekt verstärken/abschwächen und die Farbe etwas variieren.


Ich hoffe, dass ich jetzt erstmal nichts übersehen habe und du den Styleswitcher so relativ leicht einbauen kannst.
Ich habe ihn in den gängigsten Browsern in relativ neuer Version getestet, kleine Bugs sind dadurch natürlich noch nicht ausgeschlossen.
Trotzdem wäre es schön, wenn alles so funktioniert, wie es soll.

Vielleicht probierst du das Paket auch zuerst einmal auf deinem Server aus, bevor du die Elemente der styleswitcher.html in dein Template übernimmst.
So bekommst du erstmal das gefühl für den neuen Styleswitcher und erkennst schneller kleine Fehler bei dem Einbau, wenn z.B. der Loader im Forum nicht so aussieht, wie er sollte.
Denk also an die Anpassung der Pfade für die CSS-Dateien (Skript und Standard-Style) und Bilder (auf Bilderhoster...)!

Dann wünsche ich dir noch viel Spaß mit dem neuen Styleswitcher!

Die Styles werden eigentlich nur durch eine Funktion gewechselt.

Wenn du in die href-Tags der Links folgende Anweisung schreibst, sollte sich der Style wechseln:

javascript:change_style(3);
 

Diese Anweisung wechselt zu Style Nr. 3.
Beachte, dass in dieser Version die Nummerierung für die Funktion ab 1 (und nicht wie meistens: 0) beginnt.
(javascript:change_style(0); wird keinen Style wechseln, die Zahl 1 hingegen wählt den ersten Style...)

Hallo toggo,
ich würde gerne noch eine Kleinigkeit ergänzen, um einen JavaScript-Fehler zu vermeiden, falls du komplett auf das DropDown verzichtest.

Ich empfehle dir, deine Links innerhalb des umgebenden DIVs einzufügen, damit die Funktion switcher_on() weiterhin funktioniert und bei deaktiviertem JavaScript der Platzhalter angezeigt wird.
Behalte also das äußere DIV und ersetze die FORM im Inneren durch deine Links:

<div id="switcher" style="display:none;">
	<form action="" style="display:inline;">
		<select class="tarea" size="1" name="Styleswitcher" onchange="javascript:self.location = this.form.Styleswitcher.options[this.form.Styleswitcher.selectedIndex].value;">
			<option value="">Style ändern...</option>
			<optgroup id="style_labels" label="Styles">
				<option value="">&nbsp;</option>
			</optgroup>
		</select>
	</form>
</div>
 

Da dir ja nun die Dropdown-Liste fehlt, welche in der Funktion switcher_on() befüllt wurde, solltest du in der Funktion folgenden Code-Teil entfernen:

document.getElementById('style_labels').innerHTML = '';
	for (i=0; i<style_names.length; i++) {
		var style_opts = document.createElement('option');
		var style_value = document.createAttribute('value');
		style_value.nodeValue = 'javascript:change_style('+(i+1)+')';
		style_opts.setAttributeNode(style_value);
		var style_name = document.createTextNode(style_names[i]);
		style_opts.appendChild(style_name);
		document.getElementById('style_labels').appendChild(style_opts);
	}
 

Dadurch wird nicht wegen des Fehlens der Dropdown-Liste ein Fehler erzeugt.

In der Funktion bleibt also eigentlich nur noch diese Zeile übrig:

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

Kleine Anmerkung:
Wenn du bei deaktiviertem JavaScript keinen Platzhalter für den Styleswitcher möchtest, kannst du auch das DIV um die FORM herum entfernen, genauso wie die NOSCRIPT-Tags und die komplette Funktion switcher_on() (auch deren Aufruf per Onload).
Dann werden deine Links permanent eingeblendet, egal ob Scripts deaktiviert sind oder nicht.


Wenn du also darauf achtest, dass JavaScript nicht auf nicht mehr vorhandene Elemente zugreift, dann wirst du auch trotz der Liste mit Links keine JavaScript-Fehler erhalten.
Wie man die Styles per Links wechselt, funktioniert dann immer noch so, wie vorher beschrieben.
Die obigen Umbaumaßnahmen sollen nur evtl. auftretende Fehler vermeiden, damit deine Skripte im Forum weiterhin wie gewünscht ohne Probleme funktionieren.


Have Fun!

Hallo toggo,
meinst du damit, dass du noch zusätzliche CSS-Dateien außer denen der Styles selbst auch noch verwenden möchtest?
Falls ja, kannst du ja evtl. mal probieren, die gleiche Funktionalität für ein weiteres Style-Tag zu aktivieren.

Ein Styleswitcher wechselt dann die Quelle des einen Style-Tags und der andere wechselt zwischen einer zweiten Auswahl an Styledateien.
Du wirst für Kombinationen aus mehreren Style-Dateien nicht drumherum kommen, verschiedene Style-Tags einzubauen.

Falls es das nicht ist, könntest du dieses Problem ansonsten noch irgendwie veranschaulichen?

Hallo toggo,
ja dazu müsstest du ein weiteres Array mit den Pfaden zu den neuen CSS-Dateien erhalten.
Dieses zweite Array enthält dann deine CSS-Dateien, welche die ersten nach dem Laden ergänzen.

Hallo toggo,
nur Geduld, in der Ruhe liegt die Kraft.

Für solche Sachen "braucht man eben einen Kopf dazu".
Ich will aber nicht andere Aufgaben und Arbeitsblätter komplett vernachlässigen und dann später Probleme bekommen.
Es muss sich einfach alles ergeben.
Deshalb ist es auch schwer Prognosen abzugeben.
Ich will ja nicht wie bei HPM/Xobor sagen, nächste Woche und Jahre später ist es immer noch nicht da...

Dennoch habe ich dir nun hier ein funktionierendes Skript.
Es basiert auf meinem letzten Post mit angehängtem Beispiel.
Ich habe hier ausnahmsweise das meiste verdoppelt, immerhin funktioniert es.

Wenn du wieder Links statt DropDowns haben möchtest, sollte wie schon einmal funktionieren.
Achte eben darauf, dass die Styledefinition, DropDowns, Skriptteile etc. teilweise doppelt vorkommen.
Du müsstest also nochmals eine Linkliste anlegen, welche den Style mit einer anderen Funktion wechselt.


Also dann noch eine gute N8.

Hallo toggo,
ich denke, das wäre nicht ganz der Sinn der Sache.
Ich fände es irgendwie komisch, am hellichten Nachmittag ein Hintergrund für die Nacht zu sehen.

Außerdem hat es für die User mehr Reiz, nur zu wissen, dass es tageszeitabhängige Hintergründe gibt.
Solange sie aber nicht genau wissen welche, macht es dieser Umstand nur interessanter, später mal wieder vorbeizuschauen.
Ansonsten könntest du ja immer noch in einem Beitrag ein paar Bilder posten, die deine verschiedenen Hintergründe zeigen.

Wenn die User selbst einen Hintergrund wählen sollen, dann benutze lieber das Skript, mit welchem man einen Benutzerdefinierten Hintergrund selbst wählen kann.
Das sollte noch hier irgendwo oder in Wolfgangs Forum herumschwirren.

Wer unbedingt alle Hintergründe sehen möchte, aber aus unbekannten Gründen keine Zeit dazu hat, soll einfach seine Windows-Uhr umstellen...


Generell stehe ich solchen Style-Anpassungen inzwischen etwas kritisch gegenüber.
Sie sind sehr pflegeintensiv (Erstellung der Styles selbst, der Skripte, deren Wartung...) und womöglich auch störanfällig.
Man beachte dazu auch das große Browser-Angebot, es kann auch mal leicht etwas durch ein neues Addon/Plugin trotz gleichem Browser anders dargestellt werden.
Gerade die große und tolle Vielfalt im Web bereitet manchmal auch Probleme.

Ich empfehle auch, nicht allzu viele JavaScripts auf der Webseite einzubauen.
Einerseits vermeidet man so unnütze Probleme und andererseits läuft die Seite viel flüssiger und schneller.
Manche Seiten setzen sozusagen mit zu viel JavaScript den Browser lahm...


Aus diesen Gründen rate ich von dieser neuen Funktion also eher ab.