Zum Inhalt springen

CSS - Umschaltung

Erstellt am 9. Juli 2011 · 8 Antworten · letzte Antwort am 12. Juli 2011

Tags: Frage

typo3_hp ·

Hallo,

ich möchte oben in meinem Layout die Möglichkeit die Schriftart zu vergrößern integrieren.

Also 3 mal ein A in unterschiedlichen Größen.
Standardmäßig soll das mittlere aktiv sein, wenn man auf das links davon (kleiner) oder rechts davon (größer) klickt, sollen diverse Schriftarten größer angezeigt werden.

Wie würdet Ihr das machen?

Oder kann ich durch einen Klick auch browserunabhänig die Skalierung des Browsers ansprechen (firefox: Strg und +, Strg und -, Strg und 0)

Danke und Grüße

king.​darki ·

Hallo,

typo3_hp schrieb

Wie würdet Ihr das machen?

Ich würde erstmal alle Schriftgrößen in em-Angaben im CSS machen und dann per Javascript den "font-size" vom body-Tag ändern. Dann müssten sich alle davon abhängigen Schriftgrößen auch anpassen...

Grüße Patrick

typo3_hp ·

Hallo!

Die ANpassung der Schriftgrößen in EM ist mir klar.

Aber wie mach ich das Script, hast Du mir ein Beispielcode?

Danke und Grüße

king.​darki ·
typo3_hp schrieb

Aber wie mach ich das Script, hast Du mir ein Beispielcode?

Benutzt du jQuery oder ein anderes JS-Framework?

Wenn nein, dann gehts in diese Richtung (ungetestet):

<script type="text/javascript">
function setSizeUp () {
  document.getElementsByTagName('body')[i].style.fontSize = "120%";
}
function setSizeDown () {
  document.getElementsByTagName('body')[i].style.fontSize = "80%";
}
</script>
<a href="javascript:setSizeUp()">Mach groß!</a>
<a href="javascript:setSizeDown()">Mach klein!</a>

Grüße Patrick

typo3_hp ·

Hallo!

Dankeschön!

Ich bekomme die Meldung im Javadebugger
i is not defined

Was stimmt da noch nicht?

Grüße und Danke

aimcom ·

Versuch mal, das [​i] im Code von king.darki durch eine [0] zu ersetzen, dann sollte es eigentlich gehen.

king.​darki ·
aimcom schrieb

Versuch mal, das [​i] im Code von king.darki durch eine [0] zu ersetzen, dann sollte es eigentlich gehen.

Habs mal kurz selber getestet, so funktionierts:

document.getElementsByTagName('body')[0].style.fontSize = ...

Also eine 0 statt dem i, das hatte ich noch übersehen 😉

Grüße Patrick