XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   Design Wahl per CSS?? (http://xhtmlforum.de/showthread.php?t=31987)

CReal 12.07.2003 02:14

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

Thomas (css 4 you) 12.07.2003 08:43

Hi CReal,
was heißt du hast schon alles probiert?
Javascript, Cookies, PHP?
Welche Möglichkeiten stehen dir zur Verfügung?

Gruß
Thomas

CReal 12.07.2003 09:30

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

CReal 12.07.2003 12:11

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

:::

Thomas (css 4 you) 12.07.2003 13:14

Du kannst aber beim Seitenaufruf so etwas einfügen:
Code:

<link rel="Stylesheet" href="default.css"  type="text/css" />
<script type="text/javascript"><!--

document.write('<link rel="Stylesheet" href="design1.css"  type="text/css" />')
//--></script>

Nun müsstest du für einen Stylewechsel die zu ladende CSS-Datei z.B. als Cookie ablegen, sobald der User ein neues Design wählt.


Thomas

CReal 12.07.2003 14:33

Danke.

Werd ich gleich mal ausprobieren.

:)

ulle 14.07.2003 21:05

Zitat:

Zitat von Thomas (css 4 you)
Nun müsstest du für einen Stylewechsel die zu ladende CSS-Datei z.B. als Cookie ablegen, sobald der User ein neues Design wählt.
Thomas

:?:

Hallo Thomas,

könntest Du dies mal ausführlicher erläutern.

Thomas (css 4 you) 14.07.2003 22:47

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()">
<select name="design">
<option value="css1">Design 1</option>
<option value="css2">Design 2</option>
<option value="css3">Design 3</option>
<option value="css4">Design 4</option>
<option value="css5">Design 5</option>
</select>

...

<form>

Die Funktion setcookie() speichert die aktuelle Designauswahl des Users als Cookie ab und reloaded das Dokument
Code:

document.cookie="Gültigkeitsdatum" + aktuelleauswahl
location.reload()

Im Dokumentenkopf wird beim Laden jedesmal der Cookieinhalt abgefragt und dann das Stylesheet geladen.
Code:

cssfile=document.cookie+".css"
document.write('<link rel="Stylesheet" href="'+cssfile+'"  type="text/css" />')

Ich habe es zwar nicht getestet, es müsste aber so funktionieren.

Gruß
Thomas

Anonymous 17.07.2003 10:07

Styleswitcher
 
Ausführliche Infos zum Styleswitcher inklusive Cookies setzen:

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

Frohen Layoutwechsel,

MLB

Anonymous 18.07.2003 08:22

<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;
}
}

ulle 18.07.2003 11:24

Zitat:

Zitat von Anonymous
<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">

Eine 'schicke' Lösung :!:

Wenn man mal die Fehler bereinigt hat:

Code:

<link rel="alternate stylesheet" ..................
Denn mit alternate statt alternative geht es dann im IE6 und bisher nur da !!!

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.

Anonymous 18.07.2003 13:48

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

ulle 21.07.2003 08:56

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:

Anonymous 21.07.2003 11:44

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.

ulle 21.07.2003 12:01

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="change_style_gelb.css" type="text/css" title="Standard Gelb">
<link rel="alternate stylesheet" href="change_style_blau.css" type="text/css" title="Standard Blau">
<link rel="alternate stylesheet" href="change_style_rot.css" type="text/css" title="Standard Rot">
<link rel="alternate stylesheet" href="change_style_gruen.css" type="text/css" title="Standard Gruen">

<script language="JavaScript1.2">
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;
        }
}
</script>

</head>

<body>
<div>
<h1>[h1] font-family: "Trebuchet MS"</h1>
<h2>[h2] font-family: "Trebuchet MS"</h2>
<h3>[h3] font-family: "Trebuchet MS"</h3>
<h4>[h4] font-family: "Trebuchet MS"</h4>
</div>
<div>
change_style_gelb.css
change_style_blau.css
change_style_rot.css
change_style_gruen.css
</div>
</body></html>

Danke im voraus

Anonymous 21.07.2003 13:13

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

ulle 21.07.2003 14:10

Zitat:

Ich will Dir ja nicht zu nahe treten, aber Deine Aussage daß Mozilla kein document.styleSheets kennt ist schlichtweg falsch.
Stimmt [ist falsch] :oops:


Zitat:

Zitat von Anonymous
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

Hurra - kann ich nun bestätigen :P .

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.

ulle 28.09.2004 14:15

Vervollständigung :arrow: JavaScript-Bereich maskiert

Code:

<script language="JavaScript1.2">
/*<![CDATA[*/
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;
        }
}
/*]]>*/
</script>


Gumbo 28.09.2004 14:55

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">
/*<![CDATA[*/
        function changeStyle(title) {
                for(i=0; i<document.styleSheets.length; i++) {
                        document.styleSheets[i].disabled = ( document.styleSheets[i].title == title )
                                ?        false
                                :        true;
                }
        }
/*]]>*/
</script>

Ich würde außerdem empfehlen, das type-Attribute anzugeben, da dies erforderlich ist.

ulle 28.09.2004 17:12

@Gumbo :arrow: Dein Script funktioniert so nicht :!:

Suche auch schon nach dem Fehler......

Tapsiturtle 29.09.2004 16:05

http://www.stichpunkt.de/css/switch.html
Weiter Infos zu dem Thema.

ulle 13.06.2005 10:50

siehe auch :arrow: Printversion-Style funktioniert nicht

alias 26.09.2005 19:59

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

so funktioniert es bei mir auf opera, ff und ie.

Siegfried 11.08.2006 16:39

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

o_anonym 11.08.2006 16:57

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.

dementius 11.08.2006 17:26

Wenn dus nicht so komplex willst, hab ich hier mal einen ganz einfachen geschrieben, funktioniert auch ohne JS.

PHP-Code:

// Das kommt als erstes ganz oben hin:
<?php
     session_start
();
       if(isset(
$_GET['style']))
         {
           
$_SESSION['style'] = $_GET['style'];
         }
     elseif (!isset(
$_SESSION['style']))
       {
         
$_SESSION['style'] = 'styles';
       }
?>

Die Stylesheets werden dann so inkludiert:

PHP-Code:

<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['style']?>.css">

Und die Links sehen so aus:

PHP-Code:

<a href="index.php?style=red">Ein anderer Style</a

In diesem Linkbeispiel wird beim aufrufen die datei red.css inkludiert, wenn kein link aufgerufen wurde wird die datei styles.css verwendet.

E|H 11.08.2006 20:41

Ohne Cookies?

dementius 11.08.2006 21:12

Mit Sessions.

E|H 11.08.2006 21:38

:shock: :mrgreen:

Ich hab’ von PHP null Ahnung. Ja oder nein?

dementius 11.08.2006 22:49

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

E|H 15.08.2006 23:03

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.

prosac257 16.08.2006 10:24

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.

Siegfried 16.08.2006 10:48

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