javascript - Increase and decrease font size for all elements inside a div - Stack Overflow

I am making an eBook reader for windows phone 8.1 by executing JavaScript in Webview control. I need help with increasing and decreasing font size on change of slider in app which will execute JavaScript functions in the HTML.

I need all the elements inside the div 'reader' to increase and decrease using JavaScript function. Now the problem is I want them to increase proportionally.

Something like

function buttonclick()
{
    document.getElementById("reader").style.transform = scale(0.8, 0.8);
}

JS fiddle /

Any help is appreciated, thanks

Link for the project, along with the js and css.

I am making an eBook reader for windows phone 8.1 by executing JavaScript in Webview control. I need help with increasing and decreasing font size on change of slider in app which will execute JavaScript functions in the HTML.

I need all the elements inside the div 'reader' to increase and decrease using JavaScript function. Now the problem is I want them to increase proportionally.

Something like

function buttonclick()
{
    document.getElementById("reader").style.transform = scale(0.8, 0.8);
}

JS fiddle http://jsfiddle/0vz43waw/

Any help is appreciated, thanks

Link for the project, along with the js and css. https://drive.google./drive/folders/0B149D3iLIyumam1JTlNLNmdoaW8?usp=sharing

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 17, 2017 at 6:11 Singhal2 asked Jul 17, 2017 at 5:38 Singhal2Singhal2 45077 silver badges2424 bronze badges 2

• Would you like to go for JQuery function?? I think it'll be better for you. – Yash Parekh Commented Jul 17, 2017 at 5:48
• Anything is fine. Just need an elegant solution. – Singhal2 Commented Jul 17, 2017 at 5:49

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Try this. It will help you

$(function() {
  $("#increase").click(function() {
    $("div").children().each(function() {
      var size = parseInt($(this).css("font-size"));
      size = size + 1 + "px";
      $(this).css({
        'font-size': size
      });
    });
  });
});
$(function() {
  $("#decrease").click(function() {
    $("div").children().each(function() {
      var size = parseInt($(this).css("font-size"));
      size = size - 1 + "px";
      $(this).css({
        'font-size': size
      });
    });
  });
});

.p{ font-size:12px }
.div{ font-size:20px }
.pre{ font-size:16px }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="increase" value="Increase">
<input type="button" id="decrease" value="Decrease">
<div id="maindiv">
  <p class='p'>Paragraph Content</p>
  <div class='div'>Div Content</div>
  <pre class='pre'>Pre Content</pre>
</div>

Happy Coding....

Here is a simple minimal sample demo that you can refer/use:

$('.up').on('click', function() {
  $('.content').animate({
    'font-size': '+=1'
  });
});

$('.down').on('click', function() {
  $('.content').animate({
    'font-size': '-=1'
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="up">Increase</button></br>
<button class="down">Decrease</button>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis, tellus id bibendum finibus, elit est malesuada mi, eget dictum turpis nisl ac mauris. Nam auctor elit ut ipsum rutrum, ut molestie erat cursus. Donec convallis mattis neque ut placerat.
    Donec molestie mi vitae velit cursus, in accumsan lorem sollicitudin. Fusce nec risus ac lectus dictum rutrum ac vitae est. Nullam consectetur placerat felis, sit amet rhoncus urna molestie et. Mauris blandit accumsan ante eu vulputate. Vestibulum
    eget porta lectus. Aenean tempus urna a leo accumsan, at viverra ex semper.</p>
</div>

try to use percentual values.

.element {
  font-size: 110%;
}

try this code. Html

<div>The text in <span>12</span>px: this is the size</div>
<br>
<br>
<input type="range" min="10" max="40">

Javascript.

$('input').on('change', function () {
var v = $(this).val();
$('div').css('font-size', v + 'px')
$('span').html(v);
});

Sample is in this site http://jsfiddle/vNfh2/1/

Try to use awesome JS libery call fittextjs

fittextjs

Try this jsfiddle

    <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div id='reader'>The text in <span>12</span>px: this is the size</div>
    <br>
    <br>
    <p id='size' style='display:none'>16</p>
    <input type='button' id='button1' value='Increase Size' />
    <input type='button' id='button2' value='Decrease Size' />

    $('#button1').click(function(){
      var size= parseInt($('#size').text());
      size=size+1;
      $('#size').text(size);
      $('#reader').css('font-size',size+'px');
   });
   $('#button2').click(function(){
      var size= parseInt($('#size').text());
      size=size-1;
      $('#size').text(size);
      $('#reader').css('font-size',size+'px');
   });