Hilfe Javascript!

[Terry]

Eine Bitte an die Javascriptler - helft mir mal, das kann ich doch nicht...

Ich habe mir folgendes vorgenommen für den Relaunch (und gehörigen Ausbau) meiner Seite:

1. Ein Styleswitcher für verschiedene Styles zur Auswahl
2. eine Möglichkeit, die Schriftgröße auf Knopfdruck zu verstellen.

Für beides finde ich diverse PHP-Lösungen im Netz, die allerdings das Caching kaputt machen und immer ein neues Laden erzwingen. Daher wollte ich es mit Javascript machen.

Für 1. hab ich das hier: http://stichpunkt.de/css/switch.html

var Stil = "Standard";
var Keks = "Layout";
var Tage = 30;

// Style Switcher

function switchStyle(s) {
  if (!document.getElementsByTagName) return;
  var el = document.getElementsByTagName("link");
  for (var i = 0; i < el.length; i++ ) {
    if (el[i].getAttribute("rel").indexOf("style") != -1 && el[i].getAttribute("title")) {
      el[i].disabled = true;
      if (el[i].getAttribute("title") == s) el[i].disabled = false;
    }
  }
}

function loadStyle() {
  var c = getStyleCookie();
  if (c && c != Stil) {
    switchStyle(c);
    Stil = c;
  }
}

function setStyle(s) {
  if (s != Stil) {
    switchStyle(s);
    Stil = s;
  }
}

window.onload = loadStyle;


// Cookie-Funktionen

function setCookie(name, value, expdays) {   // gültig expdays Tage
  var now = new Date();
  var exp = new Date(now.getTime() + (1000*60*60*24*expdays));
  document.cookie = name + "=" + escape(value) + ";" +
                    "expires=" + exp.toGMTString() + ";" +
                    "path=/";
}

function delCookie(name) {   // expires ist abgelaufen
  var now = new Date();
  var exp = new Date(now.getTime() - 1);
  document.cookie = name + "=;" +
                    "expires=" + exp.toGMTString() + ";" + 
                    "path=/";
}

function getCookie(name) {
  var cname = name + "=";
  var dc = document.cookie;
  if (dc.length > 0) {
    var start = dc.indexOf(cname);
    if (start != -1) {
      start += cname.length;
      var stop = dc.indexOf(";", start);
      if (stop == -1) stop = dc.length;
      return unescape(dc.substring(start,stop));
    }
  }
  return null;
}

function setStyleCookie() {
  setCookie(Keks, Stil, Tage);
}

function getStyleCookie() {
  return getCookie(Keks);
}

function delStyleCookie() {
  delCookie(Keks);
}

Frage: Wie ändere ich das so um, dass gleich ein Cookie gesetzt wird ohne extra Klick? Sonst ändert sich ja immer nur die aktuelle Seite und nicht die anderen.

Für 2. such ich noch was. Zwar ist meine Schriftgröße eh relativ in % und em angegeben, aber ich wollte zusätzlich noch eine Möglichkeit anbieten für diejenigen, die nicht wissen, wie man das im Browser verstellt.
Ich muß also auf Knopfdruck noch ein zusätzliches Stylesheet einbinden können, ohne die anderen dabei zu verändern - wie geht das?

[webmichl]

Zu 1:
Na ja, so auf die Schnelle würde ich vorschlagen, die function, die beim Button-Klick gestartet wird ( setStyleCookie() ) an das Ende der Switch-function zu setzen:

function setStyle(s) {
  if (s != Stil) {
    switchStyle(s);
    Stil = s;
    setStyleCookie();
  }
}

Zu 2: keine Ahnung im Moment...

[Terry]

Nr. 1 funktioniert prima! Vielen Dank!

[seb]

Zu 2.:

Ich muß also auf Knopfdruck noch ein zusätzliches Stylesheet einbinden können, ohne die anderen dabei zu verändern - wie geht das?

Änder doch statt dessen einfach die oberste Schriftgrößen-Angabe. Ich hatte dafür mal folgende ganz simple JS-Funktion geschrieben. Sie erlaubt die Vergrößerung bzw. Verkleinerung der Schrift bis zu zwei Stufen in beide Richtungen um je 15%:

fontsize_base = 83;
fontsize_add = 0;


function change_font_size(change)
{
    if (Math.abs(fontsize_add + change) < 3)
    {
        if(change == 0)
        {
            document.body.style.fontSize = fontsize_base + '%';
            fontsize_add = 0;
        }
        else
        {
            fontsize_add += change;
            document.body.style.fontSize = fontsize_base + fontsize_add * 15 + '%';
        }
        
        document.cookie = 'fontsize_add=' + fontsize_add + ';path=/';
    }
}

Für fontsize_base musst Du den Prozentwert angeben, den Du für die Schriftgröße im CSS gewählt hast. Fontsize_add muss auch ausserhalb der Funktion schonmal definiert sein, damit die Variable als global eingerichtet wird.
Die Funktion speichert die Einstellung nicht, d.h. die Schriftgrößenänderung muss nach jedem Seitenaufruf neu eingestellt werden. Wie gesagt, wirklich ganz primitiv...


Und für 1. würd ich ja auf PHP setzen, so wie csszengarden.com...allerdings ist das wohl Geschmacksache, meine Argumente wären nicht besonders stark. Daher verzicht ich mal auf womöglich überflüssige Überzeugungsarbeit .

[Terry]

Zitat von seb

Zu 2.:
Änder doch statt dessen einfach die oberste Schriftgrößen-Angabe.

Ja, mehr brauch ich auch nicht. Im body sind normalerweise 100.01% gesetzt, das wird dann in den Inhaltscontainern noch leicht runterskaliert..

Wenn man das also einfach auf 120% und 150% oder ähnliches hochsetzen könnte, dann reicht das eigentlich. (115 und 130 sind auch gut).

Fontsize_add muss auch ausserhalb der Funktion schonmal definiert sein, damit die Variable als global eingerichtet wird.

Wo und wie?
In Javascript bin ich echt NOOB. Und wie genau rufe ich die Funktion überhaupt auf?

Die Funktion speichert die Einstellung nicht, d.h. die Schriftgrößenänderung muss nach jedem Seitenaufruf neu eingestellt werden. Wie gesagt, wirklich ganz primitiv...

Das ist schlecht. Die sollte schon gespeichert werden. So nützt es nix.

Und für 1. würd ich ja auf PHP setzen, so wie csszengarden.com...allerdings ist das wohl Geschmacksache, meine Argumente wären nicht besonders stark. Daher verzicht ich mal auf womöglich überflüssige Überzeugungsarbeit .

Ich fand das mit PHP ja auch gut - aber jemand, von dessen Meinung ich sehr viel halte, hielt davon gar nichts - eben, weil die Seiten dann nicht mehr gecacht werden können - ging da um ein Script für Problem2 - aber das gilt wohl genauso auch für 1, oder?
Hier das Script zur Schriftveränderung: http://www.lingo4u.de/article/fontsize/

[seb]

Das ist schlecht. Die sollte schon gespeichert werden. So nützt es nix.

Ich hatte versucht, die Einstellung per Cookie zu speichern. Als es mir aber nach einigem Probieren nicht richtig gelungen ist, hab ichs erstmal aufgegeben -> der Ober-Crack bin ich in JS auch nicht grad.

eben, weil die Seiten dann nicht mehr gecacht werden können

Ich versteh nicht, wieso die Seiten dann nicht mehr "gecachet" (scheiß denglisch ) werden können sollten.
Hebt ein Browser die Ausgaben von PHP-Scripts nicht im Cache auf, weil er davon ausgeht, dass sie sich eher ändern als statische Seiten? Kriegt er überhaupt mit, auf welche Art und Weise das Dokument auf dem Server erzeugt wurde? Und wenn ja, kann man das nicht leicht überlisten?

[Terry]

Zitat von seb

Ich hatte versucht, die Einstellung per Cookie zu speichern. Als es mir aber nach einigem Probieren nicht richtig gelungen ist, hab ichs erstmal aufgegeben -> der Ober-Crack bin ich in JS auch nicht grad.

O.k. - scheint schwieriger zu sein, als ich hoffte - ich glaube, ich werde es lassen...
Hab aber gestern noch einen Artikel von ALA gefunden, vielleicht werde ich ja da noch schlauer: http://www.alistapart.com/articles/bodyswitchers/
Muß ich noch mal in Ruhe analysieren und testen...

Hebt ein Browser die Ausgaben von PHP-Scripts nicht im Cache auf, weil er davon ausgeht, dass sie sich eher ändern als statische Seiten? Kriegt er überhaupt mit, auf welche Art und Weise das Dokument auf dem Server erzeugt wurde? Und wenn ja, kann man das nicht leicht überlisten?

Auch hier habe ich bislang nur Halbwissen. Aber wenn man es gut macht, schickt man im HTTP-Header auch Caching-Anweisungen mit (durch gute Serverkonfiguration oder eben direkt mit PHP).
Bei oben genanntem Script wird jegliches Zwischenspeichern explizit verhindert, weil es sonst nicht funktioniert. Das führt aber zu
- höherer Serverbelastung
- höherem Trafficverbrauch auf dem Server
- und zu schlechteren Seitenladezeiten, speziell bei Modemusern.

Und das alles nur, damit man durch Klick die Schriftgröße ändern kann statt im Browser? Denn die Schrift ist ja wie gesagt sowieso verstellbar.

[seb]

O.k. - scheint schwieriger zu sein, als ich hoffte - ich glaube, ich werde es lassen...

Nee, es kann nicht wirklich schwierig sein. Ich hing an irgendeinem kleinen, aber todnervigen Problem und hatte dann einfach keine Lust mehr . Wenn man will, kriegt man das garantiert hin.


Und das Ding von AListApart sieht wirklich gut aus...ist ja genau, was Du suchst.

[321]

ich hab gerade bei Dynamic Drive etwas gesehn:

http://www.dynamicdrive.com/dynamicindex9/textsizer.htm

[Terry]

Danke Dir - der sieht gut aus!

Werde jetzt beide mal testen..

Edit: der von Dynamicdrive läuft ohne Cookies, also immer nur auf der aktuellen Seite - aber der von ALA ist gut und das bleibt auch beim Seitenumblättern erhalten (da mit Cookie).
Prädikat: empfehlenswert!

[Nele]

Hallo Terry,

ich habe hier eine Seite mit einem Javascript gefunden, dass es möglich macht, die Schriftgröße auf allen Seiten zu ändern (mit Cookies).

Leider hat es beim Versuch es einzubauen die Cookies des oben geposteten Styleswitchers außer Kraft gesetzt.

Es wär super, wenn das jemand so verbinden könnte, so dass sowohl die veränderte Schriftgröße als auch der Style erhalten bleibt.

[Terry]

Bei mir geht das jetzt!

Für die verschiedenen Layouts nehme ich Toms Styleswitcher (s. oben) mit Webmichls Änderung.

Zusätzlich den Switcher von ALA, um die Schriftgröße ändern zu können - der nutzt auch Cookies.

Vielleicht ist das ganze nachher so weit, dass ich ne Demo schon mal hochladen kann...

[Nele]

Super!

Ich bin gespannt.

[Terry]

So, nur ne kleine Demo: http://homepage.terrikay.de

Beim Alternativ-Layout passt natürlich vorn und hinten noch nichts - ich hab nur schnell was zusammengefummelt... - geht jetzt erstmal nur um die Technik.

Auch das grüne Start-Layout ist noch nicht fertig, aber da stimmt zumindest mal die Richtung...
Anklickbar sind: Hauptpunkte Startseite und Webdesign sowie sämtliche Unterpunkte der beiden Rubriken.

[Nele]

Klasse !!!

Aber ich hätte es ja noch lieber, wenn man die Schriftgröße schrittweise vergrößern und verkleinern könnte, so wie ich es hier gemacht habe.
Ich würde es auch besser finden, wenn man dafür kein select-Feld bräuchte.

Kann das hier denn wirklich niemand ???