kostenloser Webspace werbefrei: lima-city


Schriftgröße auf Wunsch ändern

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    f********r

    Hallo Leute!

    Ich hätte mal eine Frage: Hab für eine Übung in der Schule die Aufgabe bekommen, dass ich 2 Buttons im Menübereich machen soll, die entweder die schriftgröße bei Klick vergrößern oder eben verkleinern sollen. Hab leider keine Ahnung wie ich an das Problem herangehen soll. Hab auch im Internet bis jetzt nichts gefunden. Ach ja, ich verwende bei dieser Übungsaufgabe iframes, keine div\'s.

    Kann mir einer von euch weiterhelfen.
    Thx schon jetzt
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. In einem iframe ist das nicht so einfach, hmmm.
    Mit PHP wärs einfach ;)

    Geht aber sichlich mit Javascript, wie genau kann ich dir aber leider nicht sagen.:slant:
  4. Autor dieses Themas

    f********r

    So, nach langem Herumprobieren jetzt so gelöst:

    Javascript:

    <script type=\'text/javascript\'>
    var groesse=1;
    function schrift(wie){
    if(wie==\'groesser\'){
    groesse*=1.5;
    }
    else{
    groesse/=1.5;
    }
    document.body.style.fontSize=groesse+\"em\";
    }
    </script>

    HTML:

    <a href=\"javascript: schrift(\'groesser\')\">Schrift groesser</a><br/>
    <a href=\"javascript: schrift(\'kleiner\')\">Schrift kleiner</a>


    So funktioniert\'s *freu*

    Danke an Philipp für die Hilfe
    lG
    fallen
  5. nich schlecht, aber eigentlich unnötig, seit dem sowas in den Browsern integriert ist!
  6. @chk: das ist total unnötiger spam von dir!
    Ausserdem wenn du lesen könntest würdest du merken das er das für die schule machen muss.

    @fallenstar:

    1. Verbesserungsvorschlag: teile diese sache in 2 funktionen auf, das ist meiner meinung nach besser
    2. Versuche das nicht per / und * zu lösen sondern per + und -
    Ansonsten bekommt man doch nie den gleichen wert zurück wenn man hochschaltet und dann wieder runter!

    Meine lösung:

    Ungetestet, man müsste die variablen multip vll anpassen.
    So geht die schrift in gleichmässigen schritten grösser!



    <script type=\'text/javascript\'>
    var groesse=1;
    var multip = 2;
    function bigger()
    {
    groesse += multip;
    document.body.style.fontSize=groesse+\"em\";
    }

    function smaller()
    {
    groesse -= multip;
    document.body.style.fontSize=groesse+\"em\";
    }
    </script>

    HTML:

    <a href=\"javascript: bigger()\">Schrift groesser</a><br/>
    <a href=\"javascript: smaller()\">Schrift kleiner</a>

  7. e********l

    Und noch etwas dynamischer (ungetestet)

    function fontSize(sizeAdd, fontType) {
    	var fontSize = document.body.style.fontSize;
    	document.body.style.fontSize = (parseInt(fontSize.substr(0,fontSize.length-2))+sizeAdd)+fontType;
    }


    HTML:

    <a href=\"javascript: fontSize(+10,\'%\')\">Schrift groesser</a><br/>
    <a href=\"javascript: fontSize(-10,\'%\')\">Schrift kleiner</a>

    Somit kannst auch gleich zwischen %, EM, PX und dergleichen unterscheiden XD
  8. Es geht auch mit moderneren Methoden (IE kann\'s also wahrscheinlich nicht ;) )

    http://developer.mozilla.org/en/docs/DOM:stylesheet

    document.styleSheets[0].insertRule(\"body{font-size:80px;}\",1);


    Der 2. Parameter gibt die Index-stelle an, wo die Regel im Stylesheet eingefügt werden soll. Theoretisch müsstest du so gezielt Regeln überschreiben können.

    Falls nicht bedenke, dass Regeln, die weiter unten stehen, andere Regeln mit dem gleichen Selektor überschreiben.


    Edit: FF, Opera und Konquerer können das! Und es ist W3C Standard. Wenn dich dein Lehrer deswegen anmacht, hat er Unrecht :blah:

    Beitrag geändert: 18.12.2007 20:57:15 von bladehunter
  9. f******k

    Wenn ich mich richtig erinnere, war die Aufgabe zwei \"Buttons\" zu erstellen, nicht Links. Das müsste aber genauso funktionieren (nicht getestet!), nur mit
    - Formular erstellen
    <input type=\"button\" value=\"Kleiner(/Größer)\" onclick=\"...
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!