Design Wahl per CSS??
Hallo!
Ich suche eine Möglichkeit per Button ein neues CSS file dem aktuellen Document zuzuweisen. Also eine Art "Designwahl". Button 1 soll von mir aus bewirken das alle Tables braun sind... auf Button 2 von mir aus wird alles grün. Ich hab schon alles probiert komme aber überhaupt nicht weiter... Danke für Tips! CREAL |
Hi CReal,
was heißt du hast schon alles probiert? Javascript, Cookies, PHP? Welche Möglichkeiten stehen dir zur Verfügung? Gruß Thomas |
Naja...
Hi!
Also mit php is das ja kein Problem nur leider kann ich php nicht nutzen. Ich muss das irgendwie mit CSS, Javascript oder HTML machen. So siehts aus...aber ich hab gehört das dafür nicht unbedingt php nötig ist. Diese ganzen Background-change scripte gehen schon. Aber eben sie ändern nur den background. Und ich glaube das machen sie ganz ohne css nur per java. ...creal... |
das müsste man nur noch verbessern
<script language="JavaScript1.2">
function changesettings(){ if (document.all){ if (document.body.style.cssText==''||document.body.st yle.backgroundColor=='white') document.body.style.cssText="background-color:black;color:white;background-image:url()" else document.body.style.cssText="background-color:white;color:black" } } </script> Umschalten Das funktioniert zwar, jedoch kann ich eben nicht externe CSS files einbinden, und auch nur die BACKGROUND-COLOR ändert sich. Ich habs bis jetzt nicht geschafft das script an meine Vorstellung anzupassen... ::: |
Du kannst aber beim Seitenaufruf so etwas einfügen:
Code:
<link rel="Stylesheet" href="default.css" type="text/css" /> Thomas |
Danke.
Werd ich gleich mal ausprobieren. :) |
Zitat:
Hallo Thomas, könntest Du dies mal ausführlicher erläutern. |
Naja,
nehmen wir an, du stellst fünf unterschiedliche Designs zur Verfügung, dann nimmst du ein select-Feld: Code:
<form name="myform" onsubmit="setcookie()"> Code:
document.cookie="Gültigkeitsdatum" + aktuelleauswahl Code:
cssfile=document.cookie+".css" Gruß Thomas |
Styleswitcher
Ausführliche Infos zum Styleswitcher inklusive Cookies setzen:
http://www.alistapart.com/stories/alternate/ Frohen Layoutwechsel, MLB |
<link rel="stylesheet" href="../CSS/html.css" type="text/css" title="Standard Gelb">
<link rel="alternative stylesheet" href="../CSS/html2.css" type="text/css" title="Standard Blau"> function changeStyle(j) { for (i=0; i<document.styleSheets.length; i++) { if (i != j) document.styleSheets[i].disabled = true; else document.styleSheets[i].disabled = false; } } |
Zitat:
Wenn man mal die Fehler bereinigt hat: Code:
<link rel="alternate stylesheet" .................. Denn Mozilla bzw. Opera erkennen kein document.styleSheets.length Falls jemand so richtig Fit im JavaScript ist könnte er mal die komplette Lösung veröffentlichen. |
> Wenn man mal die Fehler bereinigt hat:
Das war wohl ein Schuß in den Ofen! Mit alternative funktioniert es im Mozilla und im M$IE (was Opera macht, weiß ich nicht), also ist diese Variante dem alternate wohl vorzuziehen. |
Du bist ja Toll..........
Im IE6SP1/XP geht es nun mal nicht. Ob es mit alternate oder alternative funktioniert ist mir wurscht - WICHTIG und gut wäre wenn es überall gehen würde. Wenn Du schon weißt dass es nur mit Einschränkungen funktioniert, warum erwähnst Du es nicht. Oder willst Du hier ein Quiz veranstalten. ___________________________________ Mit alternative Im IE läßt sich keine weiteresStylesheet zuweisen, nur aktives StyleSheet ab/zuweisen !! Im Mozilla 1.2.1 erkennt er überhaupt keine StyleSheet !! Der Opera 7.3 erkennt das erste StyleSheet reagiert aber nicht auf die Funktion! Mit alternate Im IE läßt sich jedes weitere Stylesheet zuweisen !!! Im Mozilla 1.2.1 erkennt er überhaupt keine StyleSheet !! Der Opera 7.3 erkennt das erste StyleSheet reagiert aber nicht auf die Funktion! ________________________________________ WO ist der Ofen.......... :shock: |
Ich will Dir ja nicht zu nahe treten, aber Deine Aussage daß Mozilla kein document.styleSheets kennt ist schlichtweg falsch.
Aber vieleicht liegt es ja daran, daß Du nicht mit einer offiziellen Mozilla Version arbeitest, in denen (1.0, 1.0.1, 1.0.2, 1.1, 1.2, 1.3, 1.3.1, 1.4) funktioniert jedenfalls alles bestens. |
Wäre ja schön.......... zumindest wäre ich damit zufrieden !!!
Vielleicht habe ich ja Deinen CODE nicht richtig eingebunden, oder es liegt am DOCTYPE, oder am XP, oder ..... Deshalb hier mal mein TestScript: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Hallo Ulle,
habe Deinen Code gerade mal getestet, hier das Ergebnis: im Opera funktioniert mal wieder nichts. im MSIE funktioniert es mit alternate (MSIE6) im Mozilla funktioniert es mit alternate und alternative (Mozilla 1.4) Windows XP professional |
Zitat:
Zitat:
Ich habe nun den Mozilla auf 1.4 gehoben, dann ging es aber immer noch nicht :cry: . Mein Fehler war dass ich die Test-Datei direkt als File aufgerufen hatte. Kaum über Webserver [localhost] aufgerufen ging es sofort. Deshalb vermute ich dass es wohl in den Vorgängerversionen des Mozilla wohl auch gegangen wäre. Interessant wäre nun ob dieses Script [function] auch in AOL und T-Online5.0 funtioniert. Stichwort Print-Layout Gibt es hier evtl. jemand der es Testen könnte - wäre super. |
Vervollständigung :arrow: JavaScript-Bereich maskiert
Code:
<script language="JavaScript1.2"> |
Eine Ergänzung zu ulles Vorschlag:
Es ist ebenfalls möglich, StyleSheets anhand ihres Titels auszuwählen: Code:
<script type="text/javascript" language="JavaScript1.2"> |
@Gumbo :arrow: Dein Script funktioniert so nicht :!:
Suche auch schon nach dem Fehler...... |
http://www.stichpunkt.de/css/switch.html
Weiter Infos zu dem Thema. |
siehe auch :arrow: Printversion-Style funktioniert nicht
|
|
Styleswitcher
Hi,
kleiner Tip: Zuerst mal zum Stichwort "alternate stylesheet" googeln oder beim w3c nachschauen. Danach mal nach "styleswitcher" googeln. Netter Nebeneffekt: Standardkonforme Browser wie der Firefox brauchen dann keinen Button mehr, solche Browser können das Umschalten zwischen diversen Styles von Haus aus. Tip: Mal meine Startseite mit dem Firefox ansehen: http://www.rorkvell.de/ Da sind wählbare Sylesheets drin. Allerdings nur in der xhtml-Version. Wer mit IE, Konqueror, Safari o.Ä angesurft kommt, bekommt meistens die html-Version ohne alternate stylesheets. Konqueror nd Safari haben da nämlich einen fürchterlichen Bug: Die ignorieren das "alternate" und mischen per Zufall die diversen Stylesheets durcheinander. Firefox: Ansicht - Webseitenstil - (je nach Angebot) Gruß Siegfried |
Hier solltet ihr auch mal vorbeischauen, dass ist zwar gerade das Gegenteil von dem, was gefordert war, denn es ist ein Styleswitcher ohne JavaScript nur auf PHP-Basis, der aber echt super funktioniert.
|
Wenn dus nicht so komplex willst, hab ich hier mal einen ganz einfachen geschrieben, funktioniert auch ohne JS.
PHP-Code:
PHP-Code:
PHP-Code:
|
Ohne Cookies?
|
Mit Sessions.
|
:shock: :mrgreen:
Ich hab’ von PHP null Ahnung. Ja oder nein? |
Nein. Es funktioniert mit Sessions. Ob man es nun mit Sessions oder Cookies macht ist in meinen Augen völlig egal, da sie - zumindest in diesem Beispiel - die selbe Funktion haben. (Ja der Style wird gespeicher (In einer Session)) ;)
EDIT Kleines Beispiel am Rande: http://dementius.underground-irc.net/switch/index.php |
Das ist nicht egal. Mit Cookies würde es bei mir nicht funktionieren, da ich sie deaktiviert hab’. Daher auch meine Frage.
Und auch meine nächste: Ist es generell so, daß Sessions die bessere Wahl sind als Cookies, wenn es mit beiden geht? So ähnlich wie CSS und JS. |
Wenn ich falsch liege korriert mich.
Der Unterschied besteht darin, dass du beim Cookie festlegen kannst wie lange es gilt/wann es verfällt. Somit hat man auf einer Seite, bei der man als hauptfarbe z. B. rot ausgewählt hat, am nächsten Tag (wenn man die Gültigkeit auf 24 Stunden gesetzt hat) immer noch das rote. Die Session gilt nur so lange wie das Browserfenster geöffnet ist. wählst also das rot, hast zwar auf den Folgeseiten, wie beim Cookie, auch rot, jedoch wenn du das Browserfenster schließt und später wieder neu aufrufst, dann hast wieder die normale Standardansicht (z. B. Schwarz/grün) und musst das rot erst wieder neu wählen. |
Stylesheet Auswahl permanent
Hi,
zumindest für den Firefox gibt es eine Extension, die das automatisch macht. Sehr empfehlenswert. Ich habe festgestellt, daß der Firefox nicht eine einzige Zeile JavaScript ausführt, wenn auf der Seite Irgendwas ist, was er nicht darstellen kann. Dann wird ein Hinweis eingeblendet, daß man ein Plugin bräuchte, und das war's dann. Man kann dieses lästige Verhalten allerdings in den Settings abstellen: plugin.default_plugin_disabled false Die FF Extension funzt auf jeden Fall, Javascript zum Umschalten nicht unbedingt immer. Ich habe mir übrigens aus diversen Quellen im Internet einen JavaScript styleswitcher zusammengestoppelt. Derzeit ungetestet, da ich derzeit im html keine wählbaren Stylesheets verwende (Bug in Safari und Konqueror), und im xhtml die Stylesheets anders einbinde. Aber wer's probieren will: http://www.rorkvell.de/styleswitcher.js P.S. Grad eben wieder den Link gefunden, wo ich wesentliche Teile des styleswitchers her habe: http://www.alistapart.com/stories/alternate/ |
Alle Zeitangaben in WEZ +2. Es ist jetzt 01:36 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023