Schriftvergrößerung per Javascript

Flextone

Flextone

Erfahrenes Mitglied
Hi

ich bin derzeit auf der Suche in einer Webseite 3 "A-Links" zu erstellen womit ich die Größe der Schrift OHNE Reload der Webseite vergrößern kann.
Das ich demnach 3 CSS Dateien habe ist klar, jedoch finde ich absolut keine Hinweise was das Javascript angeht, eventuell kann mir da wer helfen.

Besten Dank!
 
Soweit ist es gut und klappt auch wohl, aber die Eigenschaften der großen Schrift werden nicht auf den Folgeseiten übernommen.

Wie kann ich das dann realisieren?

Danke
 
Du könntest die gewählte Schriftgrösse in einem Cookie speichern und auf allen Seiten diesen Cookie auslesen und den nötigen CSS-Code ins Dokument schreiben.
 
Hier mal ein Beispiel, es verwendet allerdings nicht mehrere CSS-Dateien, sondern ändert lediglich die Schriftgrösse des <body>
Die Schriftgrösse der anderen Elemente ist im CSS so definiert, dass sie sich dem <body> anpasst.
Code: 
<html>
<head>
<title>Test</title>

<style type="text/css">
<!--
body{font-size:11px;}
a{font-size:1.1em}
h1{font-size:2em}
-->
</style>
<script type="text/javascript">
<!--

    /**
      * Funktion: get_cookie()
      * holt cookie-Wert
      * Parameter:cookie-Name
      * Rückgabewert: cookie-Wert/ false
      **/

function get_cookie( cookieName )
{
    strValue = false;

    if( strCookie = document.cookie )
        {
            if( arrCookie = strCookie.match( new RegExp( cookieName + '=([^;]*)', 'g')))
                {
                    strValue=RegExp.$1;
                }
        }
    return(strValue);
}


    /**
      * Funktion:set_cookie()
      * setzt cookie
      * Parameter: cookie-Name,cookie-Wert,Haltbarkeit in Tagen
      * Rückgabewert: true/false
      **/

function set_cookie(cookieName,cookieValue,intDays)
{
    if(!is_cookie_enabled())
        {
            return false;
        }

    objNow = new Date();
    strExp = new Date( objNow.getTime() + ( intDays * 86400000) );
    document.cookie = cookieName + '=' +
                      cookieValue + ';expires=' +
                      strExp.toGMTString() + ';';
    return true;
}


    /**
      * Funktion:delete_cookie()
      * Löscht cookie
      * Parameter: cookie-Name
      * Rückgabewert: true/false
      **/

function delete_cookie(cookieName)
{
    if(document.cookie)
        {
            document.cookie = cookieName + '=' +
                              get_cookie(cookieName) +
                              ';expires=Thu, 01-Jan-1970 00:00:01 GMT;';
            return true;
        }
    return false;
}


    /**
      * Funktion is_cookie_enabled()
      * prüft ob cookies erlaubt sind
      * Parameter: nix
      * Rückgabewert: true/false
      **/

function is_cookie_enabled()
{
    if(typeof navigator.cookieEnabled!='undefined')
        {
            return navigator.cookieEnabled;
        }

    set_cookie('testcookie','testwert',1);

    if(!document.cookie)
        {
            return false;
        }

    delete_cookie('testcookie');
    return true;
}

if(is_cookie_enabled())
{
  
  fs=11;
  function gfs()
  {
    if(get_cookie('fs'))
      {
        fs=get_cookie('fs');
        return 'body%7Bfont-size%3A'+fs+'px';
      }
    return '';
  }
  function sfs(i)
  {
    
        var t=Number(fs)+Number(i);
        if(t>8 && t<30)
        {
          fs=t;
          document.getElementsByTagName('body')[0].style.fontSize=fs+'px';
          set_cookie('fs',fs,1);
        }
  }
  document.write(unescape('%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A'+gfs()+'%7D%0A%3B%7D%0A%3C%2Fstyle%3E'));
}

//-->
</script>
</head>
<body>
<h1>Schriftgr&ouml;sse im Dokument &auml;ndern</h1>
<a href="javascript:sfs(-1)">&lt;</a>&nbsp;Font-Size&nbsp;<a href="javascript:sfs(1)">&gt;</a>
</body>
</html>

Details zu den Funktionen die mit den Cookies arbeiten findest du hier:
http://www.tutorials.de/forum/javascript-ajax/215012-probleme-mit-cookies.html

Hier noch ein Tutorial, was vom Prinzip her ähnlich arbeitet.
Dort wird allerdings die zoom-Eigenschaft(IE-Only) geändert, was auch das Vergrössern der restlichen Seitenelemente ermöglicht(Bilder, Formularelemente, Scrollbars etc.)

http://www.tutorials.de/forum/javascript-tutorials/157349-javascript-zoom-im-internet-explorer.html
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück