Increase and decrease font size for all elements inside a div

Question

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.net/0vz43waw/

Any help is appreciated, thanks

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

Answer 1

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.com/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> 

Answer 2

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.com/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....

Answer 3

try to use percentual values .

.element {
  font-size: 110%;
}

Answer 4

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.net/vNfh2/1/

Answer 5

Try to use awesome JS libery call fittextjs

fittextjs

Answer 6

Try this jsfiddle

    <script src="https://ajax.googleapis.com/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');
   });