Nithin Nithin - 1 month ago 11
Javascript Question

Resize the font size of selected text in jquery

I want to resize the

font-size
of text in a
div
.I know the JavaScript code, but here what I want is only resizing the
font-size
of div having the focus or currently user selected
div
.



$("#slider").on("change",function(){
var v=$(this).val();
$('.text').css('font-size', v + 'px');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="12" max="120" id="slider" />
<div class="text" contenteditable="true" style="cursor:grab;">hello</div>
<div class="text text1" contenteditable="true" style="cursor:grab;">hello</div>
<div class="text text2" contenteditable="true" style="cursor:grab;">hello</div>
<div class="text text3" contenteditable="true" style="cursor:grab;">hello</div>





How to do this ?

Answer

Add this code into your script tag

$('.text').on('focus',function(){
    $('.text').removeClass('active');
    $(this).addClass('active');
})    

And change slider onChange function to this

$("#slider").on("change",function(){
   var v=$(this).val();
   $('.text.active').css('font-size', v + 'px');
});

Here you can see how it works: https://jsfiddle.net/Lwy4oge8/