Hi,
Nun wen ich es mir überlege hätte ichs warscheinlich auf die einfache weiße über CSS lösen können. Ich habe das auch erstmals nicht gedacht und daher hier erst gefragt aber nach etwas überlegen bin ich doch drauf gekommen. Vielleicht wäre es auch wirklich die bessere Idee gewesen es so zu lösen (Wollte dich nicht zuviel schaffen lassen )
Der Button den du gebastelt hast ist schon mal sehr gut du wirst ja zu einem richtigen Profi, Respekt!
Ich habe zwar immernoch nicht die ahnung wie ich den Loader setze nach dem klick auf ein Link aber mal schauen vielleicht bekomme ich es hin auf die einfache Art oder du wo auch die Idee sich besser anhört als die einfache, schlisslich hat man dabei vorteile .
Ich weiß jetzt schonmal wie man die Fläche (Link) der Aktiv ist einen anderen Hintergrund setzt damit er angezeigt wird das er auch wirklich Aktiv ist, ob es aber auch so Funktionieren dann wird wie ich es mir vorstelle wird sich die Tage rausstellen.

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...

Naja JavaScript ist nicht wirklich meine Stärke.
Ich schaue mal ob ich was hinbekommen wen dann bist du ja gerne ansprechbar, oder?
Darf ich ein Lob noch sagen: Also alle Scripte die ich so mir ansehe und auch ausprobiere sind einfach Klasse!
Ich bin froh dich getroffen zu haben

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.

Aber gerne doch! Es stimmt ja auch deshalb möchte ich es weitergeben
Mach nur langsam es verweht nicht
Ich werde mal es mit dem Document diengens mal versuchen denke es wird klappen.
Wen deine Idee aber besser ist kannst du gerne es mir auch geben nur eben erst wen du die zeit dafür findest.
Ansonsten denke ich werde ich die CSS-Klasse die den Loader normal ausblenden solte ganz unten setzen damit es auch wirklich zuletzt gemacht wird.

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!

Erstmal Vielen Dank für das Script und das Funktioniert schonmal SUPER!!! (zumindest bei kurzem Testen funktioniert momentan wohl alles)
Allerdings muss ich jetzt fragen wie das ist wen ich nicht das Standardmäsige Auswahlmenü jetzt nehme sondern per Link die Styles aufrufe?
Ich habe es mal probiert aber es funktioniert nicht wie es sollte den es wechselt einfach nicht
Kann man da auch noch was machen?
Ich hätte dir sagen sollen das ich ein selber gemachtes Auswahlmenü verwende
Hoffe du muss jetzt wegen dieser Aktion nicht das ganze Script umschreiben das will ich nähmlich nischt
Danke!
PS: Aber ansonsten funktioniert das Super!

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...)

Danke! Da sieht man mal wieder das ich ein Brett vorm Kopf hatte
Das sollte dann funktinieren. Melde mich nochmals falls was wäre was ich aber jetzt nicht denke

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 Florian,
Vielen Dank für diese Scripte sie funktionieren auch soweit wunderbar.
Ich habe damit wie man schön sehe kann gemacht und da die Funktion auch noch so genial ist habe ich gleich mal ein ganzes Projekt gemacht.
Ich habe nun mal paar Designs gemacht die er sehr gut wechselt, Aber auch sowas wie die Schriftgröße wechseln oder den Schriftstil.
Das problem ist dabei wen ich diese Punkte aktivere also entweder bei Schriftstil "Bold" verschwindet das aktuelle Design was normal ist und stellt alles auf Fette schrift ein.
Wäre es möglich das ich beides drin habe? Also das Design und das die Schrift Bold ist?
Ich weiß wen ich mal damit anfange kann ich einfach nicht enden

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 Florian,
Ich habe hatte mal versucht das Script von Switcher zu kopieren und so Sachen wo was mit Style aufsich hatte umzubennenen, hat anscheinend nicht funktioniert.
Oder meinst du vielleicht ein neues Awrry zu erstellen und dann die mit Schriftgröße und Schriftstile dort einstellen?

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.

ich habe es versucht. Nicht wirklich gelungen also es kann bis jetzt immer nur ein Style angezeigt werden und nicht zwei Paralel (Aber nur Design und oder Schriftgröße oder Schriftstile sollten gewählt werden können)
So sieht der Code aus: Ich habe es halt mal versucht...

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
 
var styles = new Array(
	/* Pfad zu den CSS-Dateien mit den Style-Informationen */
	'{{link_css}}',
	'http://toggodamian.kilu.de/Css/Old%20Style%20Design.css',
	'style1.css',
	'style1.css',
	'http://toggodamian.kilu.de/Css/Garten%20der%20Poesie%20Design.css',
	'{{link_css}}',
	'style1.css',
	'style1.css',
	'style1.css',
	'style1.css',
	'style1.css',
	'style1.css',
	'style1.css',
	'style1.css',
	'style1.css',
	'style1.css',
	'{{link_css}}'
);
var styles2 = new Array(
	'http://toggodamian.kilu.de/Css/Schriftstil%20Bold.css',
	'http://toggodamian.kilu.de/Css/Schriftstil%20Italic.css',
	'http://toggodamian.kilu.de/Css/Schriftstil%20Underline.css'
);
var style_names = new Array(
	/* Anzeigenamen der Styles */
	'Name Style 1',
	'Name Style 2',
	'Name Style 3',
	'Name Style 1',
	'Name Style 2',
	'Name Style 3',
	'Name Style 1',
	'Name Style 2',
	'Name Style 3',
	'Name Style 1',
	'Name Style 2',
	'Name Style 3',
	'Name Style 1',
	'Name Style 2',
	'Name Style 3',
	'Name Style 1',
	'Name Style 2',
	'Name Style 3',
	'Name Style 1',
	'Name Style 2',
	'Name Style 3'
);
 

var a = new Date();
a = new Date(a.getTime() +1000*60*60*24*365);
 
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.getElementById('style_switch').href = styles[n-1];
				document.getElementById('style_switch').href = styles2[n-1];
				foundstyle = true;
			}
			catch(err) {}
				break;
		}
		// Nächstes Cookie oder aufhören:
		if(c.length > i2)
			c = c.substring(i2+1);
		else
			break;
	}
}
 
function change_style(n) {
	// Loader einblenden:
	document.getElementById('style_loader').style.display = 'block';
	setTimeout("document.getElementById('style_loader').style.display = 'none';",800)
	// Style-Quelle setzen:
	document.getElementById('style_switch').href = styles[n-1];
	document.getElementById('style_switch').href = styles2[n-1];
	// Cookie setzen:
	document.cookie = 'style=' + n + '; expires=' + a.toGMTString() + ';';
	return;
}
 
function switcher_on() {
	document.getElementById('switcher').style.display = 'none';
	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);
	}
}
 
/*]]>*/
</script>
 

Ich sollte mich noch unbediengt bei bei dir bedanken das du so einem anfänger helfen tuhst und das wirklich noch bei so wünschen

OK, ich weiß jetzt wirklich nicht wie ich es lösen könnte. Hilfe Bidde

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.

Hey, Klasse es funktioniert Tadellos!

Mensch, ich merke wirklich das ich viel zum Styleswitcher schon hier hinzugefügt habe, (Naja, eigentlich Floran, aber ich mit meinen Verbesserungswünschen )
Jetzt fange ich schon wieder damit an , Bekommt man das Script hierher auch noch rein?: Hintergrundwechsler für Uhrzeiten.

ich habe mir dabei vorgestellt, das man nur die Uhrzeit dann selber per eingabe oder ein Auswahlmenü sich einstellen kann, wan immer das Design sich zb. für die Nacht sich wechselt.
Ich merke schon, ich wünsche mir einfach zuviel in dieser richtung

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.