Hey Leute,

also in letzte Zeit komme ich immer mehr an Javascript ran, ich denke ich werde dazu demnächst einige Tutorials zum Einstieg durchmachen müssen
Über Google finde ich nur Varianten mit + und -, aber da zerhaut total das Layout wenn jemand die Schrift 10px größer schraubt, Sinn hat es auch keinen, da man es dann auch nicht mehr sogut lesen kann. Es würde einfach reichen, wenn man mit Javascript den CSS Teil für body ändern könnte.

Ich habe eine Website, dort möchte ich die Schrift in drei Stufen vergrößern lassen. Also klein, mittel, groß.

Klein soll 13px sein und die beiden größeren sollen sich immer um 1px je Stufe vergrößern.

Hier ein Auszug aus den Textformatierungen (.css)

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

body{     background: #fff url(images/layout/bg_rot2.gif) repeat-x;     margin: 0;     padding: 0;     background-color: #f6f6f6;     text-align: center;     font: normal 13px arial,verdana,sans-serief;     color: #454545; } h1{     font: normal 20px Segoe UI,Arial,Verdana,sans-serief;     color: #f80605;     margin-bottom: 15px; } h2{     color: #f58220;     font: normal 18px Segoe UI,Arial,Verdana,sans-serief;     font-variant:small-caps;     margin-bottom: 10px; } p{     margin-bottom: 10px; } a {     color: #454545;     text-decoration: none;     border-bottom: 1px solid #f80605; }

Und hier die "Navigation" für die Schriftgröße:

Code :

1	<span id="fontsize">Schrift: <a href="#" class="fontchoice_active">normal</a> | <a href="#" class="fontchoice">groß</a> | <a href="#" class="fontchoice">sehr groß</a></span>

Vielen Dank für eure Hilfe!

Moin,

das Problem ist Folgendes: du veränderst die Schriftgrösse...das macht die Schrift grösser, der Rest bleibt aber so wie er ist. Ergebnis: es zerschiesst dir dein Layout.

Was du benötigst, wäre also nicht die Änderung der Schriftgrösse, sondern die Änderung der Grösse von allen Dingen, Stichwort: Zoom

Im IE(zumindest 5.5 +6 ) ist da klein Problem(danach habe ich mich damit nicht mehr befasst...sollte aber immer noch gehen)....weil wir tutorials.de sind gibt es dazu sogar ein Tutorial
http://www.tutorials.de/forum/javasc...-explorer.html

Was andere Browser betrifft, könntest du ja mal umhergoogeln, das Stichwort lautet wie gesagt: ZOOM

Ein Anschaungsbeispiel(nur IE-tauglich) findest du hier: http://doktormolle.de/zoom.htm
Aber ich wills mal so Sagen: Leute, die keinen IE benutzen, wissen meist, wie man zoomt

Zitat von Sven Mintel

Aber ich wills mal so Sagen: Leute, die keinen IE benutzen, wissen meist, wie man zoomt

STRG + / STRG -, und das alles ohne JS

mfg Maik

Hallo!

Zitat von Sven Mintel

Aber ich wills mal so Sagen: Leute, die keinen IE benutzen, wissen meist, wie man zoomt

Zitat von Maik

STRG + / STRG -, und das alles ohne JS

Und für Leute die doch den IE (7.0) nutzen und nicht wissen dass dort STRG+/STRG- auch funktioniert, die gucken bestimmt unten rechts auf den Rahmen vom Browserfenster.
Irgendeinen Zweck wird die Lupe wohl schon verfolgen.

Gruss Dr Dau

Hallo,

deswegen soll es ja auch nur drei verschiedene Schriftgrößen geben. Das klappt auf jeden Fall und macht meiner Meinung nach auch Sinn. Das heißt, normaler Fließtext wird bis zu 15px groß. Sollte das nicht reichen, gehe ich davon aus, das die Leute dann selbst Tools haben um das lesen zu können, denn die meisten Seiten bieten sowas ja nicht an.

Das mit dem Strg + und Strg - kennen leider sehr viele Benutzer nicht. Bei der Seite geht es nicht um Technik, sondern um eine Art Versicherung. Also die Zielgruppe ist zwischen 30-65 Jahre alt. Und die drei Links tuen auch niemanden weh.

Das Tutorial hilft mir nur mäßig weiter. Ich hätte gedacht, das es sowas schon gibt. Naja ich werde weiter suchen, wer mir weiterhelfen kann, darf sich geküsst fühlen

Zitat von Identität

Das Tutorial hilft mir nur mäßig weiter. Ich hätte gedacht, das es sowas schon gibt. Naja ich werde weiter suchen, wer mir weiterhelfen kann, darf sich geküsst fühlen

Wenn dir Copy&Paste zu kompliziert ist, wirst du wohl nichts Einfacheres finden

Zitat von Identität

Das mit dem Strg + und Strg - kennen leider sehr viele Benutzer nicht.

Woher nimmst du denn diese Annahme? Gibt es hierüber irgendwo eine repräsentative Umfrage / Statistik?

mfg Maik

@Sven Mintel
Danke nochmal für deinen Link, ich habe ihn jetzt in meine Bookmarks gelegt, werde ich sicherlich später noch verwenden.

@Maik
Keine Statistik, braucht man ja auch nicht zu jeder Kleinigkeit. Also ich werde demnächst einfach Mal einige unerfahrene PC-Nutzer fragen, wie man die Schriftgröße im Web größer macht. Ich weiß jetzt schon, das viele das nicht wissen. Und genau das ist die Zielgruppe. Stört auch niemanden oben in der Ecke.

Übrigens habe ich genau so ein Ding auf dem Stadtportal http://www.luebeck.de gefunden. Nur bin ich da auch nicht richtig im Quelltext durchgestiegen.

Ich habe es jetzt mit PHP realisiert. Ganz einfach:
Klickt man auf größer, wird eine Session geschrieben mit der Schriftgröße und die neue Style Datei wird geladen. Nur der Reload nervt ein bisschen, aber dafür ist alles Marke Eigenbau.

Trotzdem Danke ich euch für eure Mühe. Ich werde mich dringend mit JS beschäfftigen müssen.

Zitat von Identität

Ich werde mich dringend mit JS beschäfftigen müssen.

Das les ich von dir in diesem Thema nicht zum ersten Mal

mfg Maik

Zitat von Identität

Übrigens habe ich genau so ein Ding auf dem Stadtportal http://www.luebeck.de gefunden.

Und genau auf dieser Seite sieht man auch das, was Sven schon gesagt hat.
Das Layout wird zerschossen.

Das Problem, dass die Dinge, die du bei Google evtl. gefunden hast, nicht wie gewünscht funktionieren, dürfte darin liegen:

Ich gehe mal davon aus, dass sie die fontSize des body-Elementes ändern.
Diese Änderung wirkt sich auf alle Elemente aus, für die du keine Schriftgrösse definiert hast....denn diese erben ihre Formatierung vom Elternelement.

Anstatt nun für alle Elemente, welche nicht geändert werden sollen, eine Schriftgrösse zu definieren, könntest du vorgehen, indem du für alles das, was du als "Fliesstext" ansiehst, einen eigenen Selektor verwendest(dies kann bspw. ein span sein, welches du ausschliesslich dafür verwendest, oder ein Klassenname).

Diesen Selektor kannst du dann mit JS manipulieren, der Rest bleibt davon unbehelligt.

Um das zu bewerkstelligen, musst du auf das styleSheets-Objekt zugreifen, hier mal ein Beispiel

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<html> <head> <meta http-equiv="Content-Type" content="text/html;                                 charset=ISO-8859-1"   /> <meta name="author"             content="doktormolle" /> <meta name="date"               content="2009-02-19" /> <title>Test</title> <script type="text/javascript"> <!-- function modifyCssRule(stylesheet,rule,attr,value) {     document.styleSheets[stylesheet][((document.all)?'rules':'cssRules')][rule]['style'][attr]                                                                                       =value; }     //--> </script> <style type="text/css"> <!-- body{font-size:12px;} .fliesstext{font-size:12px;color:red} --> </style> </head> <body> <center>   <b onclick="modifyCssRule(0,1,'fontSize','12px');">12px</b> -   <b onclick="modifyCssRule(0,1,'fontSize','18px');">18px</b> -   <b onclick="modifyCssRule(0,1,'fontSize','26px');">26px</b> </center> <h1>   Ich bin eine Überschrift und bleibe immer gleich </h1> <p>Ich bin eine Absatz und bleibe auch gleich.   <span class="fliesstext">Ich bin ein Fliesstext, mich kann man ändern.     <b>       Ich bin etwas fettes im Fliesstext, und werde auch geändert     </b>   </span>   Ich bleibe wie ich bin </p> Mit mir passiert auch nicht. </body> </html>

Ihr seid echt super. Wirkliche Profis!

@Maik
Ja das stimmt, ich bin aber nicht ganz untätig und habe mich sehr viel mit MySQL in letzter Zeit beschäfftigt. Ich werde mir heute ein Buch zu Javascript bestellen, bei Amazon habe ich schon ganz gute gesehen. Ich werde aber trotzdem hin und wieder eine Frage stellen, sieht man ja in den anderen Bereichen, da hast du mir ja auch schon sehr viel geholfen. Danke

@Dr Dau
Das liegt aber auch daran, das sie nicht nur die Schrift vergrößern, sondern auch das Layout. Und bei "groß" gibt es ein neues Headerbild, welches aber nicht existiert. Deswegen sieht es sehr zerschossen aus. Die Methode gefällt mir aber.

@Sven Mintel
Das ist echt ein super "Schnippsel". Das hat mir jetzt sehr weitergeholfen und ich glaube es auch verstanden zu haben. Muss mir noch die Javascript Funktionen genauer ansehen, aber laufen tut es sehr gut bei mir. Klasse, ich bin beeindruckt.