1

i wanted to ask how to create font increasing with only 1 button and 3 levels. For example i need only 12,13,14px and it's going all around.

I tried something like this, but this is not what i'm looking for cause it does have 3 buttons.

<script type="text/javascript">
  $(document).ready(function() { 
  $('#incfont').click(function(){    
        curSize= parseInt($('#content').css('font-size')) + 2;
  if(curSize<=20)
        $('#content').css('font-size', curSize);
        });  
  $('#decfont').click(function(){    
        curSize= parseInt($('#content').css('font-size')) - 2;
  if(curSize>=12)
        $('#content').css('font-size', curSize);
        }); 
 });
</script>
Roberts Šensters
  • 585
  • 1
  • 7
  • 23

1 Answers1

2

You can do something like this using css() with callback

$('#incfont').click(function() {
  $('#content').css('font-size', function(_, v) {
    return 12 + (parseInt(v, 10) + 1) % 3;
    // (parseInt(v, 10) + 1) % 3 - will toggle between 0, 1 and 2. So returning values will be 12, 13 or 14
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="incfont">click</button>
<div id="content" style="font-size:12px">content</div>

Update : As per your request in comment, do something like this

// Array of font size
var font = ['2.8vmin', '3vmin', '3.2vmin'];

$('#incfont').click(function() {
  // Updating index of font-size
  this.ind = this.ind || this.ind == 0 ? (this.ind + 1) % 3 : 2;
  // Setting font size based on index
  $('#content').css('font-size', font[this.ind]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="incfont">click</button>
<div id="content" style="font-size:12px">content</div>
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
  • nice, this works like a charm. but instead i'm using vmin in my fontsize. my default vmin is 3, how to create it like 2.8 / 3 / 3.2 ? – Roberts Šensters Sep 16 '15 at 06:29
  • @RobertsŠensters : i will update the answer as your request ... please give me few minutes :) – Pranav C Balan Sep 16 '15 at 07:55
  • Just an off-topic question: could you explain why you can pass `_` as an argument? `_` is the index, and `v` is the current value, but can you pass `_` as any variable name? I've never seen that before. Or is it a way to say 'I won't use this value'? (Also +1 for the neat solution.) – Bram Vanroy Sep 16 '15 at 08:05
  • @BramVanroy : there is no need for the index value in the code so I just used it as `_` , if you want you can use it as `i` or any valid character :) – Pranav C Balan Sep 16 '15 at 08:07
  • And if you use `_`, can you use it in your function as a variable? Are non-alphabetical characters valid variable names? – Bram Vanroy Sep 16 '15 at 08:13
  • 1
    @BramVanroy off course , http://stackoverflow.com/questions/1661197/what-characters-are-valid-for-javascript-variable-names – Pranav C Balan Sep 16 '15 at 08:17
  • @BramVanroy : glad to help :) – Pranav C Balan Sep 16 '15 at 08:24