hey all,

can someone help me add cookie support to this text enlarger script i have please

var min=8;
var max=24;
function increaseFontSize() {
   var p = document.getElementsByTagName('body');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 14;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('body');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 14;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}

can someone tell me how and where to add whatever to save it in a cookie so it works from page to page and dont have to resize text on page refresh or change.

also how could i add a reset button which just sets to default?

Thanks,
TP for working/helpful answers

Originally Posted by dansgalaxy

can someone help me add cookie support to this text enlarger script i have please

Basically you just need to use a couple of functions which let you set and retrieve cookies. When you change the font size, record the change. When the page loads, see if a cookie is set and call the appropriate function.

/* cookie functions from QuirksMode */
function setCookie (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 getCookie (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;
}

function increaseFontSize() {
   .. same as before ..

   // save the font size in a cookie for 25 years
   setCookie('fontsize', s, 365 * 25);
}

function decreaseFontSize() {
   .. same as before ..
    
   // save the font size in a cookie for 25 years
   setCookie('fontsize', s, 365 * 25);
}

window.onload = function() {
    // if the cookie exists, restore the variable
    var fontsize = getCookie('fontsize');
    if (fontsize) {
        document.getElementsByTagName('body')[0].style.fontSize = fontsize + 'px'
    }
}

You'll probably want to use something like addDOMLoadEvent so that the font size kicks in instantly instead of waiting for images to load. Or you could try using document.write to output a <style> element.

hey, sorry i probably being thick but its not working?

i really am crap at javascript so am a bit clueless is this what you ment?

/* cookie functions from QuirksMode */
function setCookie (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 getCookie (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;
}
var min=8;
var max=24;
function increaseFontSize() {
   var p = document.getElementsByTagName('body');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 14;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
      // save the font size in a cookie for 25 years
   setCookie('fontsize', s, 365 * 25);
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('body');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 14;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }  
      // save the font size in a cookie for 25 years
   setCookie('fontsize', s, 365 * 25);
}

Thanks,

What happens? Are you getting a js error? It's just not doing what you're expecting?

The code looks pretty similar to what I'm doing for my navigation.

Well it works but it isnt saving to so it carries on to the next pages etc so if i was impared or whatever i would have to be increases the text every page...

i think it might need to have a if cookie set use var else use default but im clueles on how to implement help will be reward with all be it hardly any tp but what i can give!

Are you missing the window.onload function?

No clue, sorry can you guide me through it?

Do you have MSN or a IM would be easier than this

Thanks, and btw happy to give reconition on the site for it!

and TP!

why dont this work?
i tried this to get the cookie and do it but im just crapy at javascript

<style type="text/css">
<script type="text/javascript">
var s;
if(getCookie(name) === TRUE)
{
document.write('
body{ font-size: +s+; }
'); 
}
</script>
</style>