Design per Dropdown auswählen.

[celeptor]

Hi Zusammen.

Ich hab mal auf irgendeiner Seite gesehen wie man mit einem DropDown-Menu auf der eigenen Homepage das Design ändern kann. Auf dieser Seite war auch ein Beispiel. Anhand der Wahl wird ein anderes Stylesheet verwendet.
Leider kann ich die Seite nicht mehr finden!

Weiss jemand, wie der Code geht? Bin ein bisschen ein n00b, habe aber bereits Erfahrungen gemacht.
Die Auswahl musste nicht bestätigt werden (mit OK o.ä.), sondern es änderte sofort.

Gruess celeptor

[Mathias Brodala]

Hallo celeptor.

Ich hab mal auf irgendeiner Seite gesehen wie man mit einem DropDown-Menu auf der eigenen Homepage das Design ändern kann. Auf dieser Seite war auch ein Beispiel. Anhand der Wahl wird ein anderes Stylesheet verwendet.
Leider kann ich die Seite nicht mehr finden!

Weiss jemand, wie der Code geht? Bin ein bisschen ein n00b, habe aber bereits Erfahrungen gemacht.
Die Auswahl musste nicht bestätigt werden (mit OK o.ä.), sondern es änderte sofort.

Du könntest in dem betreffenden select-Element auf den http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=onchange-Event reagieren und eine Funktion aufrufen.

In dieser Funktion kannst du nun das link-Element, welches dein derzeitiges Stylesheet referenziert http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title=entfernen, ein neues http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=erzeugen und an die Stelle des alten http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=hängen. (Einfach den Wert des href-Attributes zu ändern verspricht noch nicht, dass der Client das Dokument neu rendert.)

Versuche dich erst einmal selbst an diesem Script und stelle Fragen, wenn du nicht weiter kommst.

Einen schönen Donnerstag noch.

Gruß, Mathias

[celeptor]

Hi.

(Einfach den Wert des href-Attributes zu ändern verspricht noch nicht, dass der Client das Dokument neu rendert.)

Versuche dich erst einmal selbst an diesem Script und stelle Fragen, wenn du nicht weiter kommst.

Wie schaffe ich es, dass das Dokument mit der Änderung, und somit mit dem geänderten Style, neu geladen wird?
Ich glaube, bis dahin hab ich es.

Gruess celeptor

[wahsaga]

hi,

Wie schaffe ich es, dass das Dokument mit der Änderung, und somit mit dem geänderten Style, neu geladen wird?

Wo war von neu Laden die Rede?
Nirgends.

Du sollst das Link-Element per Javascript austauschen.

gruß,
wahsaga

[celeptor]

hi,

Wie schaffe ich es, dass das Dokument mit der Änderung, und somit mit dem geänderten Style, neu geladen wird?

Wo war von neu Laden die Rede?
Nirgends.

Hier schreibt er in Klammer: ...dass der Client das Dokument neu rendert.
Vielleicht verstehe ich das Wort 'rendern' falsch, aber es ist ein klarer Hinweis, dass es neu gerendert werden muss.

Du sollst das Link-Element per Javascript austauschen.

Hab ich ja, passiert aber nichts.

Gruess celeptor

[wahsaga]

hi,

Hier schreibt er in Klammer: ...dass der Client das Dokument neu rendert.
Vielleicht verstehe ich das Wort 'rendern' falsch, aber es ist ein klarer Hinweis, dass es neu gerendert werden muss.

Nein, neu Rendern muss nicht mit neu Laden zusammenhängen.

Du sollst das Link-Element per Javascript austauschen.

Hab ich ja, passiert aber nichts.

Code?

gruß,
wahsaga

[celeptor]

Hi

Code?

Das im Header:

<script type="text/javascript">
function setzen () {
  document.getElementsByTagName("link")[0].setAttribute("href", document.Formular.bgcolor.value);
}
</script>

Und des im Body:

<select name="styleid" onchange="setzen()">
 <optgroup label="Style auswählen">
  <option value="6" class="" selected="selected"> "design2.css" </option>
  <option value="6" class="" > "design.css" </option>
 </optgroup>
</select>

Fehler?

Gruess celeptor

[wahsaga]

hi,

function setzen () {
  document.getElementsByTagName("link")[0].setAttribute("href", document.Formular.bgcolor.value);

Fehler?

Erstens greifst du nicht auf die Namen der CSS-Dateien zu - die stehen in deinen Options im Textinhalt, nicht aber im Value, da steht nur 6.

Und zweitens ist genau das die Vorgehensweise, die Mathias dir in seiner Antwort als die nicht erfolgversprechende genannt hat - wie du es stattdessen versuchen solltest, beschrieb er auch explizit!

gruß,
wahsaga

[celeptor]

Hi

Und zweitens ist genau das die Vorgehensweise, die Mathias dir in seiner Antwort als die nicht erfolgversprechende genannt hat - wie du es stattdessen versuchen solltest, beschrieb er auch explizit!

Ich weiss, aber ich dachte, dass es so vielleicht simpler geht. Aber ich werds nun in der erklärten Weise versuchen...

Ich meld mich wieder, sobald ich eine neue Lösung habe.

Gruess celeptor

[celeptor]

Hi

»»...ein neues http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=erzeugen und an die Stelle des alten http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=hängen. (Einfach den Wert des href-Attributes zu ändern verspricht noch nicht, dass der Client das Dokument neu rendert.)

Wie kann ich die Auswahl meiner Option mit dem Script zum Erzeugen verknüpfen?
» var myText = document.createTextNode("Eine sehr dynamische Seite");
In der Dokumentation steht einfach "Eine sehr dynamische Seite", wie greift dieser Teil auf die ausgewählte Option zu?

Gruess celeptor

PS: Ich hoffe, es ist diesmal die erwartete Metode...

[Mathias Brodala]

Hallo celeptor.

»»...ein neues http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=erzeugen und an die Stelle des alten http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=hängen. (Einfach den Wert des href-Attributes zu ändern verspricht noch nicht, dass der Client das Dokument neu rendert.)

Wie kann ich die Auswahl meiner Option mit dem Script zum Erzeugen verknüpfen?

Wie bereits gesagt: nutze den onchange-Event. Wie sieht dein derzeitiger Versuch aus?

var myText = document.createTextNode("Eine sehr dynamische Seite");
In der Dokumentation steht einfach "Eine sehr dynamische Seite", wie greift dieser Teil auf die ausgewählte Option zu?

Warum schaust du dir die createTextNode-Methode an, wenn ich dir die createElement-Methode verlinkt habe?

PS: Ich hoffe, es ist diesmal die erwartete Metode...

Das schon, doch dein derzeitiger Stand ist mangels Code noch unklar.

Einen schönen Freitag noch.

Gruß, Mathias

[Maxx]

Hallo,

Ich hab mal auf irgendeiner Seite gesehen wie man mit einem DropDown-Menu auf der eigenen Homepage das Design ändern kann.

warum wird immer wieder versucht Funktionalität die der Browser eh schon bietet nochmal in die Seite einzubauen?
Solche Dinge wie Zurückbuttons, Schriftgradänderung oder eben Styleswitcher.

Letzteres geht meiner Meinung nach viel einfacher:
<link rel="stylesheet"           type="text/css" href="style1.css">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="Alternative 1">
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="Alternative 2">

Grüße,

Jochen

[Mathias Brodala]

Hallo Maxx.

Ich hab mal auf irgendeiner Seite gesehen wie man mit einem DropDown-Menu auf der eigenen Homepage das Design ändern kann.

warum wird immer wieder versucht Funktionalität die der Browser eh schon bietet nochmal in die Seite einzubauen?

Weil manches Etwas, was sich Browser schIEmpft, nicht über eine solche Funktionalität verfügt. Kann hier in diesem speziellen Fall aber auch von Vorteil sein, wenn in den alternativen Stylesheets z. B. CSS in seiner Gänze ausgenutzt wird.

Einen schönen Donnerstag noch.

Gruß, Mathias

[celeptor]

Hallo

Letzteres geht meiner Meinung nach viel einfacher:
<link rel="stylesheet"           type="text/css" href="style1.css">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="Alternative 1">
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="Alternative 2">

Und wie binde ich das korrekt ein?

Gruess celeptor

[Maxx]

Hallo,

<link rel="stylesheet"           type="text/css" href="style1.css">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="Alternative 1">
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="Alternative 2">

Und wie binde ich das korrekt ein?

so wie oben beschrieben im <head> deiner Seite. Der Browser (mit Ausnahme der einen Anzeigesoftware die sich Browser schIEmpft) wird dir dann über das Menü eine Auswahl der Stylesheets anbieten.

Im Firefox sieht das dann so aus:

Grüße,

Jochen

[celeptor]

Hoi

so wie oben beschrieben im <head> deiner Seite. Der Browser (mit Ausnahme der einen Anzeigesoftware die sich Browser schIEmpft) wird dir dann über das Menü eine Auswahl der Stylesheets anbieten.

Im Firefox sieht das dann so aus:

das ist aber irgendwie doof....

Ich komm einfach nicht drauf, was in den Header muss, wenn ich mit dem Dropdown-Menu arbeite.

Gruess celeptor

[wahsaga]

hi,

Ich komm einfach nicht drauf, was in den Header muss, wenn ich mit dem Dropdown-Menu arbeite.

Du meinst, wenn du es lieber selber implementieren möchtest?

Dazu hast du von Mathias bereits eine https://forum.selfhtml.org/?t=143826&m=933712.

gruß,
wahsaga

[wahsaga]

Korrektur:

Dazu hast du von Mathias bereits eine ausführliche Antwort bekommen.

gruß,
wahsaga

[celeptor]

Hi

Ich komm einfach nicht drauf, was in den Header muss, wenn ich mit dem Dropdown-Menu arbeite.

Du meinst, wenn du es lieber selber implementieren möchtest?

Dazu hast du von Mathias bereits eine https://forum.selfhtml.org/?t=143826&m=933712.

Ich checks aber nicht so ganz! Ich habe noch nie mit solchen Scripts gearbeitet, kenne die Befehle nicht und hab keinen Bock alles mögliche auszutesten...

Ich bin doch nur ein kleiner armer n00b :(

Gruess celeptor

[wahsaga]

hi,

Ich checks aber nicht so ganz!

Dann gebe dir etwas mehr Mühe.

Ich habe noch nie mit solchen Scripts gearbeitet, kenne die Befehle nicht und hab keinen Bock alles mögliche auszutesten...

Die Erklärungen zu den wesentlichen Objekten und Methodne wurden bereits verlinkt.

Ich bin doch nur ein kleiner armer n00b :(

Dann suche dir eine fertige Lösung. Zu Stichworten wie Styleswitcher o.ä. sollte sich genügend Material finden lassen.

gruß,
wahsaga