wahl zwischen verschiedene CSS-Datein

[SolCom]

ich habe gerade was neues gelernt :). durch den link (im HTML-document)

<link rel="alternate stylesheet" type="text/css" href="level01.css" title="Standard-Test" />

gibt man dem surfer die möglichkeit zwischen verschiedenen CSS-Datein zu wählen (um das Layout zu ändern).
bisher habe ich aber nur beim OPERA (Ansicht->Seitendarstellung) und MOZILLA (Ansicht->Webseiten-Stil) die Funktion gefunden. gibt es das beim Internet-Explorer nicht ?

 

[feyyaz]

Du hast völlig recht, IE unterstützt diese Funktion nicht obwohl sie vom W3C definiert wurde. Aber natürlich gibt es auch dafür ein workaround. Du findest eine komplette Beschreibung dafür unter folgendem Link

http://www.alistapart.com/articles/alternate/

feyyaz

 

[SolCom]

in erster line ging es mir darum ob ich die funktion beim IE übersehen habe :)
leider ist mein englisch nicht besonders und kann daher mit deinem tip nichts anfangen :(
wenn du noch einen deutschen vorschlag hast ?

 

[SolCom]

wie schon geschrieben reicht mein englisch nicht um mit dem vorschlag von feyyaz was anfangen zu können.
aber ich habe mal eine frage dazu :
wird bei dieser art der auswahl der user ständig danach gefragt was für eine css-datei er benutzen möchte ?

 

[feyyaz]

gut ich versuche das mal für dich anzupassen. kann aber ein paar minuten dauern.

zu deiner frage: neine der user muss nicht ständig wählen. mit dem script wird das so realisiert, das der user oben auf einen style klickt und dieser dann in einem cookie gespeichert wird. beim nächsten besuch des users wird dann der gleiche style verwendet. Ohne cookie muss er immer wieder neu wählen.

so schau mir das englische tutorial nochmal an. bis später

 

[SolCom]

mensch ein cookie, darauf hätte ich aber auch kommen müssen *andenkopfschlag*
feyyaz, danke für deine mühe :)

 

[feyyaz]

Ist ja ein kinderspiel dank des genialen scripts die die jungs da geschrieben haben.

Als erstes ein Beispiel:
www.paob.de/html.de/csstest.htm
in dem beispiel habt ihr oben rechts eine auswahl zwischen black or white, das sind die styles zwischen denen ihr wählen könnt.

Was ihr braucht:
www.paob.de/html.de/styleswitcher.js

Anleitung:

Als erstes erstellt ihr eure CSS dateien. Ich gehe in dem beispiel mal auf drei ein. Nach der erzeugung dieser z.B black.css, white.css und funky.css, binden wir sie in unsere html dokumente ein.

<link href="black.css" rel="stylesheet" type="text/css" title="black">
<link href="white.css" rel="alternate stylesheet" type="text/css" title="white">
<link href="funky.css" rel="alternate stylesheet" type="text/css" title="funky">

Dabei wird, wenn noch kein cookie vorhanden ist, black.css als standart stylesheet geladen.

Nach der festlegung aller stylesheets binden wir die oben zur verfügung gestellte script datei styleswitcher.js ein.

<script type="text/javascript" src="styleswitcher.js"></script>

Zu guter letzt brauchen wir noch eine möglichkeit die styles zu ändern. das geschieht ganz einfach durch links. hier für die drei styles

[url="#"]select style black[/url]
[url="#"]select style white[/url]
[url="#"]lets get funky[/url]

So das wärs dann, fantastisch einfach finde ich und von jedem durchführbar.

Update: Diese Script wurde von Paul Sowden entwickelt. Hier noch einmal ein Link zu seiner englisch sprachigen seite http://www.alistapart.com/articles/alternate/

 

[SolCom]

So das wärs dann, fantastisch einfach finde ich und von jedem durchführbar.

bingo, besser als mit dem browser selber zu wechseln und ein grund mehr auch mal JavaScript zu lernen :)

 

[feyyaz]

natürlich ist nur das einbinden fantastisch einfach. schaut euch die scriptdatei mal an. da steckt dann doch schon ein wenig arbeit drinnen. aber es zu lernen kann nie schaden.

also viel spaß mit dem script

 

[virtuellesNugat]

[url="#"]select style black[/url]
[url="#"]select style white[/url]
[url="#"]lets get funky[/url]

Okay, das sollte also kein Problem mehr darstellen, danke dafür. Aber ich wollte die links jetzt als Combobox erscheinen lassen. Ich kann eine normale Combobox machen, dann dachte ich ich mache statt "Auswahl 1"

1

Aber da geht leider nicht.
Ich will also, dass ,wenn man in der combobox das skin ausgewählt hat, das skin dann angewendet wird, direkt, also ohne eine submit Funktion oder so. Wie muss ich das da machen? Ich habe das Forum durchsucht, habe aber nichts gefunden...

 

[feyyaz]

hier die antwort, sie bezieht sich auf das komplette beispiel in diesem thread.

<form name="sel_style">
  style: 
  <select name="style" onChange="setActiveStyleSheet(document.sel_style.style.options[document.sel_style.style.selectedIndex].value)">
    <option>black</option>
    <option>white</option>
    <option>funky</option>
  </select>
</form>

einzige problem hier ist, das standard mässig der style black angezeigt wird, auch wenn im cookie white gespeichert ist.

beispiel ist wieder hier zu finden.
www.paob.de/html.de/csstest.htm

 

[virtuellesNugat]

stimmt, der geht nicht wieder zurücl... hmpf, das ist schade. Wärs möglich, dass der das autmatisch danach refreshed? Also die box...