Problems with my font size adjustment..

Discussion in 'JavaScript' started by hest2, Apr 8, 2008.

  1. #1
    I use JS to give the user the possibility to adjust the font size on a page.

          var min=8;
    	   var standard=(readCookie('txtsize')==null)?11:readCookie('txtsize');// edited
          var max=15;
    
          function increaseFontSize() {
             var p = document.getElementsByTagName('*');
             for(i=0;i<p.length;i++) {
                if(p[i].style.fontSize) {
                   var s = parseInt(p[i].style.fontSize.replace("px",""));
                } else {
                   var s = 11;
                }
                if(s!=max) {
                   s += 1;
                }
                p[i].style.fontSize = s+"px";
             }
              createCookie('txtsize',s);// added
          };
          
          function resetFontSize() {
             var p = document.getElementsByTagName('*');
             for(i=0;i<p.length;i++) {
                p[i].style.fontSize = standard+"px";
             }
          };
          
          function decreaseFontSize() {
             var p = document.getElementsByTagName('*');
             for(i=0;i<p.length;i++) {
                if(p[i].style.fontSize) {
                   var s = parseInt(p[i].style.fontSize.replace("px",""));
                } else {
                   var s = 11;
                }
                if(s!=min) {
                   s -= 1;
                }
                p[i].style.fontSize = s+"px";
             }
              createCookie('txtsize',s);// added
          };
    
    
    /*
    added all below
    */
    
    function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
    
    window.onload = resetFontSize
    PHP:
    This can be viewed here as a demo;
    http://dev.sparklingblue.net/demo/fontsize/fontsize.html

    The problem;
    - The Less and More works as it should

    - The Reset is where there is a problem (the Reset-link should ALWAYS set the font size to 11);
    If I adjust the font size and then hit refresh, it saves this new font size value to the Reset-function, so now Reset doesnt give the value 11px anymore.
    What needs to be changed for this to work?

    This is the basic funcionallity I hoped for;
    - The bigger/smaller adjusts the font size up or down (works)
    - The Reset sets the font size to 11px (wrong)
    - Changes made by the bigger/smaller, should be saved to the cookie, and loaded on every page load (works, but saves value to the Reset-link on page-refresh)
     
    hest2, Apr 8, 2008 IP