Seite 1 von 3
#1 Styleswitcher von florian-zier 04.01.2008 17:58

avatar
Eine der besten nachrüstbaren Funktionen ist der Styleswitcher. Er ermöglicht es dem User, das Design der Seite auszuwählen, ohne dass die Seite dazu neu geladen werden muss.
JavaScript muss aktiviert sein, damit die Funktion ausführbar ist.
(Erklärung zum Styleswitcher)


Alle Änderungen erfolgen im Template Element "Obere Leiste"!

Teil 1, Funktion des Styleswitchers:
Folgender Quellcode muss zwischen
<HEAD>
und
</HEAD>
eingefügt werden:

<!-- Styleswitcher Head Anfang -->
<script language="JavaScript" type="text/javascript">
var a = new Date();
a = new Date(a.getTime() +1000*60*60*24*365);
var styles = new Array();

/* Pfad zu den CSS-Dateien mit den Style-Informationen */
styles[0] = 'http://server.de/style1.css';
styles[1] = 'http://server.de/style2.css';
styles[2] = 'http://server.de/style3.css';

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.write('<link id="style" type="text/css" rel="stylesheet" href="' + styles[n-1] + '">');
foundstyle = true;
}
catch(err) {}
break;
}
/* Nächstes Cookie oder aufhören */
if(c.length > i2)
c = c.substring(i2+1);
else
break;
}
}

/* Standardstyle im Falle von Fehler oder keinem gewählten Style */
if(!foundstyle) document.write('<link id="style" type="text/css" rel="stylesheet" href="http://server.de/style1.css">');

function change_style(n) {
document.getElementById('style').href = styles[n-1];
/* Cookie setzen */
document.cookie = 'style=' + n + '; expires=' + a.toGMTString() + ';';
return;
}
</script>

<noscript>
<!-- Standardstyle falls Scripts nicht aktiviert sind -->
<link id="style" type="text/css" rel="stylesheet" href="http://server.de/style1.css">
</noscript>


Im Skript muss noch der Pfad zu den CSS-Dateien mit den Design-Informationen angegeben werden. (Anleitung zum Erstellen von CSS-Dateien)
Die Dateien müssen online verfügbar sein, am besten auf den eigenen Webspace hochladen!

Es können beliebig viele Style-Dateien angegeben werden. Allerdings muss am Anfang der Zeile die Zahl in der eckigen Klammer immer um 1 erhöht werden.
=> styles[0] -> styles[1]

Außerdem muss noch zweimal der Pfad zu einem Standardstyle gesetzt werden, der im Falle eines Fehlers oder bei abgeschaltetem JavaScript ausgewählt wird.

Teil 2, optionales Ausblenden bei deaktiviertem JavaScript:
Optional: wenn das Skript nicht eingefügt wird, Kommentar zur Entfernung im letzten Quelltext befolgen:
Wenn der Styleswitcher bei deaktiviertem JavaScript gar nicht angezeigt werden soll, muss das folgende Skript auch noch vor
</HEAD>
eingefügt werden:
<script type="text/javascript">
function switcher_on() {
document.getElementById('switcher').style.display=''
}
</script>


Nun nur noch im body-Tag onload="switcher_on()" ergänzen, damit die Funktion beim Seitenaufruf auch aufgerufen wird.
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" onload="switcher_on()">


Die Funktion sorgt dafür, dass bei aktiviertem JavaScript die Auswahl-Box des Styleswitchers eingeblendet wird. Ist JavaScript nicht aktiviert, so kann auch keine Auswahlbox erscheinen. Der Styleswitcher wäre sowieso funktionslos.
Wenn der Styleswitcher ausgeblendet wird, sollte der optionale Quellcode im letzten Quelltext stehen bleiben!

Teil 3, DropDown-Menü:
Jetzt fehlt nur noch die Auswahl-Box für den Styleswitcher:

<div id="switcher" style="display:none;"> <!-- Styleswitcher standardmäßig ausgeblendet, Zeile entfernen, wenn immer eingeblendet werden soll -->

<form>
<select class="tarea" size="1" name="Styleswitcher" onChange="javascript:self.location = this.form.Styleswitcher.options[this.form.Styleswitcher.selectedIndex].value;">
<option value="">Style &auml;ndern...</option>
<optgroup label="Styles">
<option value="javascript:change_style(1)">Name Style 1</option>
<option value="javascript:change_style(2)">Name Style 2</option>
<option value="javascript:change_style(3)">Name Style 3</option>
</optgroup>
</select>
</form>

</div> <!-- Styleswitcher standardmäßig ausgeblendet, Zeile entfernen, wenn immer eingeblendet werden soll -->

<!-- optional, falls Platzhalter eingefügt werden soll Anfang -->
<noscript>
[Styleswitcher]
</noscript>
<!-- optional, falls Platzhalter eingefügt werden soll Ende -->



Hier nur noch so viele Zeilen mit
<option value="javascript:change_style(Zahl)">Stylename</option>
einfügen, wie oben Links zu CSS-Dateien angegeben sind. Auch hier muss die Zahl in der diesmal runden Klammer immer um 1 erhöht werden. Die erste angegebene CSS-Datei erhält nun den ersten angegebenen Namen, die zweite CSS-Datei wird nach dem zweiten angegebenen Namen benannt, usw. ...

Der Abschnitt zwischen den Kommentaren, die mit dem Kommentar
<!-- optional, falls Platzhalter eingefügt werden soll -->
gekennzeichnet sind, sorgt dafür, dass wenn kein JavaScript aktiviert ist, nur der Text [Styleswitcher] ausgegeben wird. Dies macht aber nur dann Sinn, wenn die zwei Zeilen mit dem Kommentar
<!-- Styleswitcher standardmäßig ausgeblendet, Zeile entfernen, wenn immer eingeblendet werden soll -->
nicht entfernt wurden, da ansonsten eine nicht funktionsfähige Auswahlbox angezeigt wird (s. Beschreibung zweiter Quelltext).
#2 RE: Styleswitcher von frank23 10.01.2008 13:36

avatar

Hallo Florian,

ich habe mir mal deinen Code für den Styleswicher aus dem HPM Support Forum genommen und es funktioniert auch alles prima bei mir.

Eine Sache bekomme ich aber noch nicht so ganz hin und zwar wenn Javacript nicht aktiviert ist, dann kommt bei dir so eine tolle Tabelle mit einem Hinweiss, das Javascript aktiviert werden muss.
Den Code <noscript><a href="http://123484.homepagemodules.de/t245f10-Style-aendern.html">[Styleswitcher]</a>
</noscript> habe ich auch eingefügt.

Nur wie erstelle ich eine Seite mit dem Hinweiss in der Optik vom Forum, so dass ich den passenden Link einfügen kann?

Gruß
Frank

P.S. Wenn ich auf Antworten klicke in deinem Forum erscheint oben ein Code.....

#3 RE: Styleswitcher von florian-zier 10.01.2008 20:33

avatar
Hallo frank23,

der Code
<noscript><a href="http://123484.homepagemodules.de/t245f10-Style-aendern.html">[Styleswitcher]</a>
</noscript>

zeigt nur an der Stelle des Styleswitchers den Text [Styleswitcher] an. In diesem Fall ist der Text auf einen Beitrag mit einer Erklärung zum Styleswitcher verlinkt.
http://123484.homepagemodules.de/t245f10-Style-aendern.html ist aber inzwischen auch auf dieses Forum bezogen die falsche URL, hier wäre nun http://123484.homepagemodules.de/t245f43-Style-aendern.html richtig.
Wie gesagt, das gibt nur einen Text aus der auf eine Erklärung verlinkt ist!


Die Box findest du im Bereich Homepage & Anderes, den betreffenden Beitrag hier.
In diesem Bereich habe ich auch eine Einführung, in der u.a. folgendes steht:
Zitat von florian-zier
Anmerkung:
Viele Quellcodes können auch im Forum verwendet werden!
#4 RE: Styleswitcher von frank23 10.01.2008 22:13

avatar

Hallo Florian,

vielen Dank für die schnelle Antwort. Habe es gerade eingebaut und es funktioniert einwandfrei!

Dein Forum ist sehr übersichtlich aufgebaut und vor allem sind die einzelnen Themen sehr gut beschrieben.

Gruß
Frank

#5 RE: Styleswitcher von florian-zier 11.01.2008 17:30

avatar

Danke für das Kompliment!

Schön, dass es auch funktioniert hat!


In Zukunft kommen natürlich auch nach und nach weitere Funktionen ins Forum (eingebaut), von denen ich dann wahrscheinlich auch die meisten in einer Anleitung bereitstelle.
Möglicherweise kommt irgendwann eine Symbol-Bar mit neuen Smileys und Smileykategorien, sowie Scrollen, bei zu vielen Smileys.

#6 RE: Styleswitcher von frank23 13.01.2008 19:24

avatar

Hallo Florian,

ich habe mir die Ideen für die Symbolbar von Wolf Andreas geholt http://104774.homepagemodules.de/

Auch die Edgebar find ich von den Funktionen her klasse! Bin mal gespannt, was du für eine tolle Bar hier hinzauberst....

Viel Spaß noch

Gruß
Frank

#7 RE: Styleswitcher von Wolfgang 02.03.2008 08:52

avatar
Hallo Florian.

Ich habe ein interessantes Script gefunden.
Hier kann der User ein eigenes Hintergrundbild in die Webseite einfügen. Nur wird keine Speicherung über Cookies vorgenommen.
Kann man dieses Script vielleicht in den Styleswitcher mit einbauen?

<SCRIPT LANGUAGE="Javascript">
function bg()
{document.body.background = "file:///"+document.h.text.value;}
</SCRIPT>
<FORM NAME="h">
<INPUT TYPE="file" size=10 NAME="text">
<INPUT TYPE="button" VALUE="OK" onClick="bg()">
</FORM>





Gruß
Wolfgang
#8 RE: Styleswitcher von florian-zier 05.03.2008 20:25

avatar

Wolfgang!

Ich habe das Skript nun einmal soweit in den Styleswitcher eingebunden, dass das Input-Feld erst nach Aufruf erscheint.
Eine andere Möglichkeit als ein Input-Feld kenne ich nicht... und gibt es wohl auch nicht..., um ein "Datei öffnen"-Dialog zu erzeugen.
Eine Abfrage wie z.B. beim Einfügen eines Tooltips oder einer URL wäre zwar noch eine Alternative, aber wer will schon selbst den ganzen Pfad raussuchen, kopieren und danach einfügen?
Ansonsten kann das Dialog-Feld nur noch per Java-Applet aufgerufen werden. Das Forum sollte aber nicht zu "voll" werden.

Eine Cookie-Funktion ist hier bis jetzt nicht vorhanden.


Die Quelltexte für das Template Element "Obere Leiste":
Dieses Skript im Head-Bereich platzieren:

<SCRIPT LANGUAGE="Javascript">
function show_switch_bg() {
if (document.getElementById('switch_bg_area').style.display == "none") {
document.getElementById('switch_bg_area').style.display = "block";
} else {
document.getElementById('switch_bg_area').style.display = "none";
}
}
function switch_bg() {
document.body.background = "file:///"+document.switch_bg_form.image_path.value;
}
</SCRIPT>


<option value="javascript:show_switch_bg();">Hintergrund...</option>

... an die Style-Auswahl in der Dropdown-Box des Style-Switchers anhängen.

Nach dem Quelltext des Styleswitchers dieses ergänzen:

<div id="switch_bg_area" style="display:none;">
<FORM NAME="switch_bg_form">
<INPUT TYPE="file" size=10 NAME="image_path">
<INPUT TYPE="button" VALUE="OK" onClick="switch_bg();">
</FORM>
<a href="javascript:show_switch_bg();">Schließen</a><br /><br />
</div>



Die Auswahl für den Hintergrund erscheint erst, wenn es im Style-Switcher aktiviert wurde.
Die Funktion ist im Moment auch hier in diesem Forum im Style-Switcher integriert.
Leider funktioniert es nur im IE und nicht im Firefox. Mit gesetztem Doctype könnte es dann aber doch funktionieren.

#9 RE: Styleswitcher von Wolfgang 08.03.2008 17:54

avatar


Hallo Florian,
funktioniert prima.
Die Lösung ist ebenfalls Klasse!

Kannst Du das Cookie-Script mit einbauen?
Bei jeden Seitenaufruf ist das Hintergrundbild leider verschwunden!

Danke für Deine tolle Arbeit.

Gruß
Wolfgang

#10 RE: Styleswitcher von florian-zier 19.03.2008 16:12

avatar

Wolfgang!
Tut mir leid, dass es so lange gedauert hat! Aber ich hatte bis vor kurzem noch viel zu tun.

Das Skript ist beträchtlich an seinem Umfang gewachsen.
Änderungen am HTML-Teil sind nicht nötig. Nur das Skript im Head-Bereich muss verändert werden.
Das aktuelle Skript ist auch jetzt wieder hier im Forum eingebaut und kann somit vor dem Eigeneinbau getestet werden.

Hier das vollständige Skript:

<SCRIPT LANGUAGE="Javascript">
// Hintergrund-Wechsler
// Auswahl-Feld anzeigen/ausblenden:
function show_switch_bg() {
if (document.getElementById('switch_bg_area').style.display == "none") {
document.getElementById('switch_bg_area').style.display = "block";
} else {
document.getElementById('switch_bg_area').style.display = "none";
}
}
// Hintergrund wechseln:
function switch_bg() {
var bgPath = "file:///"+document.switch_bg_form.image_path.value;
document.body.background = bgPath;
// Cookie setzen:
var aDate = new Date();
aDate = new Date(aDate.getTime() +1000*60*60*24*365);
document.cookie = 'ownBg='+escape(bgPath)+'; expires='+aDate.toGMTString()+';';
}
// Hintergrund laden:
function loadOwnBg() {
if(document.cookie) {
var CookieName = 'ownBg'; // Cookie-Name angeben
var posOffset = document.cookie.indexOf(CookieName);
var endstr = document.cookie.indexOf(";", posOffset);
if (endstr == -1) {
endstr = document.cookie.length;
}
document.body.background = unescape(document.cookie.substring(posOffset+CookieName.length+1, endstr));
}
}
</SCRIPT>


Als letztes muss dann nur noch loadOwnBg(); automatisch beim Seitenaufruf mitgeladen werden. (AnleitungEine Anleitung, wie Funktionen automatisch beim Laden der Seite aufgerufen werden.)


P.S.: Das Skript funktioniert leider noch nicht richtig im Firefox.
Das Cookie wird zwar richtig gesetzt, aber der Hintergrund wird noch nicht verändert.

#11 RE: Styleswitcher von Wolfgang 20.04.2011 09:37

avatar

Hallo Florian,
ich habe da eine Frage
Meine CSS-Dateien sind auf folgenden Server ausgelagert, z.B.: http://www.future-andres.de/forum/style/style1.css
Wenn der Server ausfällt, fehlt das Layout.
Die css-Datei unter "http://104774.homepagemodules.de/style.css" wird nicht übernommen. Sollte der untere Eintrag im JavaSript nicht hierfür zuständig sein?
- Kann man hier eine Abfrage starten, z.B. Datei vorhanden ja/nein, dann .... ?

/* Standardstyle im Falle von Fehler oder keinem gewählten Style */
if(!foundstyle) document.write('<link id="style" type="text/css" rel="stylesheet" href="http://104774.homepagemodules.de/style.css">');


Bis dann und Danke im Voraus
Wolfgang

#12 RE: Styleswitcher von Wolfgang 20.04.2011 09:53

avatar

Hallo Florian,
ich habe da noch eine Frage

Der Hintergrundwechsler scheint im IE 8 nicht mehr zu funktionieren!
Läßt sich hier noch etwas machen, aber mit wenig Aufwand?

Viele Grüße
aus Hannover



PS: Die Symbolbar im IE 8 läuft nicht gut (Smilie und Farbauswahl)

#13 RE: Styleswitcher von florian-zier 20.04.2011 22:35

avatar

Hallo Wolfgang,
gute Frage.

Leider (/zum Glück) habe ich inzwischen auf den IE9 upgedatet.
Mir fehlen also sowohl Browser als auch Testumgebung inkl. allen Dateien und Styles etc.
Werde demnächst evtl. auch einfach aufs Business-Design umsteigen, sobald eine Kopie angelegt werden kann.

Ich schlage aber vor, dass du einmal den Kompatibilitätsbutton in der Adressleiste des IE8 versuchst.
Der zeigt die Website soweit ich weiß nach älteren "Standards" an, so wie sie eben ein älterer IE interpretiert hätte.

Falls danach der Styleswitcher wieder funktioniert, kannst du deine User evtl. darauf hinweisen, dass sie die Styles nach aktivieren der Kompatibilitätsansicht wieder verwenden können.


P.S.: Habe keine Probleme mit dem IE9 bei Styleswitcher in deinem Forum und meiner Symbolbar.

#14 RE: Styleswitcher von Wolfgang 20.04.2011 23:26

avatar

Hallo und danke für die schnelle Antwort.
Mal sehen, was sich machen läßt.

Gruß
Wolfgang

#15 RE: Styleswitcher von toggodamian 07.09.2011 17:50

avatar

Hi, Auch dieses Script wird sich in meinem Forum gut presentieren deshalb nehme ich es auch.
Mir ist aufgefallen das es etwas braucht bis es das Design ändert. Könnte man nicht eine "load" meldung noch dazwischen setzen bis es gewechselt wurde?
Ich weiß ich bin halt einer der auf genauichkeiten kuckt nehmt es mir d.h. nicht böse

#16 RE: Styleswitcher von florian-zier 09.09.2011 17:58

avatar

Hallo toggo,
das Problem dabei ist nur, dass man nicht weiß, wann der Style geladen wurde.
Dies kann man auch nicht einmalig einfach ausmessen, da der Webserver mit den Styles evtl. langsam oder gar nicht antwortet.
Sobald der Pfad zum Style gesetzt ist, kann man nicht direkt prüfen, ob er auch schon geladen wurde, eine autom. Rückmeldung gibt es in dem Sinne auch nicht.

Also würde es wenn überhaupt, wohl nur mit etwas tricksen funktionieren.
Spontan fällt mir erstmal ein, einem unsichtbaren Element eine Style-Definition zu geben und diese dann nach Veränderung abzufragen.
Aber dabei sollte keine Endlosschleife entstehen.
Ich muss darüber erst noch etwas nachdenken...

#17 RE: Styleswitcher von toggodamian 09.09.2011 18:22

avatar

Meinst du sowas vielleicht: Wen man ein Design per Link (Geht auch) oder einfach auf die Auswahl klickt sollte ein Loader erscheinen sobald die CSS geladen ist blendet es mit display:none; es aus oder?

#18 RE: Styleswitcher von florian-zier 10.09.2011 19:57

avatar

Ja, so hätte ich das gedacht.
Der Loader sollte nach dem Laden automatisch verschwinden, aber wirklich auch erst danach.
Allerdings sollte da noch ein Link dazu, dass im Falle eines Fehlers der User den Loader selbst schließen kann und die Seite nicht dauerhaft blockiert wird.

#19 RE: Styleswitcher von toggodamian 10.09.2011 21:21

avatar

Die Idee klingt schon mal sehr gut.
Würde sich dies auch umsätzen lassen?

#20 RE: Styleswitcher von florian-zier 12.09.2011 19:15

avatar

Evtl. je nachdem, welche Komplikationen dadurch entstehen.
Es kommt immer wieder vor, dass man etwas vorhat und dann doch noch auf ein neues Problem stößt.

Eines der Paradebeispiele ist der "Für Beitrag bedanken"-Button.
Eigentlich hatte ich schon lange vor der eigentlichen Veröffentlichung einen solchen Button im Sinne, ja sogar teilweise schon Testseiten.
Allerdings waren diese auf AJAX-Basis realisiert, beim Einbau ins Forum musste ich leider feststellen, dass JavaScript keine Dateien asynchron von einem anderen Server nachladen kann.
Somit war diese Idee erstmal kaputt.
Das neue Skript ist ein anderer Workaround, um die Bedanken-Funktion auch ohne AJAX zu realisieren.
Diese neue Idee entstand aber erst lange nach der ersten, als ich mal wieder überlegte, wie man den Button doch noch einbauen könnte, weil HPM/Xobor das ja schon seit Langem nicht realisiert.

Bei Gelegenheit muss ich dann einfach mal meine Idee ausprobieren, erst dann sieht man letztendlich, ob etwas funktioniert.
Aber ich sehe dem Vorhaben positiv entgegen.

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz