simplify font size toggle

Question

This is my first post here. I think

I want this script to only switch between two sizes.

<script type="text/javascript">
var min=10;
var max=18;
function increaseFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {

      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {

         var s = 10;
      }
      if(s!=max) {

         s += 1;
      }
      p[i].style.fontSize = s+"px"

   }
}

function decreaseFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {

      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {

         var s = 10;
      }
      if(s!=min) {

         s -= 1;
      }
      p[i].style.fontSize = s+"px"

   }
}
</script>

So I'd be super happy if someone could remove the 80% of the script that is unneeded for me. (No, really, I am that noob.)

Thanks in advance.

so if your open to working with a js library such as jquery i could do that in 10 lines or so. and even less if i was true in assuming there would be two buttons or links - one for each of the font sizes — Joe, May 22 '13 at 14:25
Try my answer and let me know if it fails. if it works please accept as answer — rahul maindargi, May 22 '13 at 14:30
Well, maybe not as much as 80, but the counting should be removed. — Ole Sørensen, May 22 '13 at 14:34

score 1 · Answer 1 · answered May 22 '13 at 14:51

1

You could do it very easily with jQuery and some CSS classes, like this:

http://jsfiddle.net/redders6600/e3FGs/

Javascript:

$('#small').click(function(){
  $('td').removeClass('big').addClass('small');
});

$('#large').click(function(){
  $('td').removeClass('small').addClass('big');
});

CSS:

td.small{
  font-size:10px;
}
td.big{
  font-size:18px;
}

answered May 22 '13 at 14:51

Ed_

18,798
8
45
71

That is very nice as well. I might use that for something some day. I don't know the first thing about jQuery though. Big thanks again ya all! Respect. – Ole Sørensen May 22 '13 at 15:27
No probs - if you're doing any web development I'd strongly advise having a look at jQuery. You won't regret it - it makes life *much* easier. It's kind of a staple for most people these days.. – Ed_ May 22 '13 at 16:55

rahul maindargi · Accepted Answer · 2013-05-22T14:34:56.317

May be you need this

DEMO

<script type="text/javascript">
var min=10;
var max=18;
function togalFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {

      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
         if(s==max) {
              s = min;
          }else{
             s =  max;
          }
      } else {

         var s = 10;
      }

      p[i].style.fontSize = s+"px"

   }
}

</script>

Or if you want 2 functions (May bebecuase you have 2 buttons to switch between them..) DEMO 2

<script type="text/javascript">
var min=10;
var max=18;
function increaseFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {

       p[i].style.fontSize = max+"px"

   }
}

function decreaseFontSize() {

   var p = document.getElementsByTagName('td');
   for(i=0;i<p.length;i++) {
      p[i].style.fontSize = min+"px"

   }
}
</script>

simplify font size toggle

2 Answers2