Text resizer

by M Shameer

HTML

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et lacus nec lacus iaculis dictum. Curabitur sed suscipit tortor, et fermentum ex. Curabitur facilisis aliquet vestibulum. Nullam leo leo, porta vel risus vitae, suscipit pretium libero. Nunc eu nibh id felis placerat ornare sit amet eget nisl. Suspendisse elementum diam lectus, vitae lobortis leo pharetra sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vitae nisi quis nulla semper vehicula. Praesent tempus tristique dui quis placerat. Fusce egestas, nisi eget tincidunt interdum, quam elit porttitor neque, ullamcorper consequat risus augue eget ipsum. Quisque at nibh fermentum, sollicitudin sapien a, accumsan metus. Morbi at orci convallis, posuere ligula sed, facilisis arcu. Duis at nisl in nunc scelerisque interdum sit amet et tortor. Cras sollicitudin quis neque fermentum dignissim. Nunc tortor massa, rhoncus et neque sit amet, venenatis laoreet ex.<br><br>Donec iaculis tortor in est lobortis eleifend. Quisque ultrices bibendum est, a sodales odio iaculis nec. In quam dolor, posuere sit amet est ut, feugiat hendrerit turpis. Donec sapien ante, aliquet iaculis tempor eu, porta ut nibh. Praesent vulputate risus ut est mollis laoreet. Proin diam nisl, blandit ac ultricies molestie, convallis a justo. Donec non pellentesque arcu. Suspendisse non dui tempus, sagittis nibh sed, finibus dolor. Donec sit amet euismod dui. Pellentesque vitae posuere nisi, in volutpat diam. Maecenas odio nisl, scelerisque eget euismod id, tempor vitae ligula. Duis sodales aliquet nisl tempor bibendum. Aliquam in hendrerit tellus, sed imperdiet sem. Phasellus consectetur, sem ac tempor elementum, magna nunc accumsan libero, in mollis nibh est at ex.
</div>

CSS

#fontResizer {width:100%;height:40px;}
#fontResizer table{width:60px;position:absolute; right:10px;}
#fontResizer table td{vertical-align:bottom;cursor:pointer;width:33%;}

JavaScript

$('body').prepend('<div id="fontResizer"><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><!--<td id="title">Font resizer</td>--><td><div id="mcxFontSmall"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11"><defs><style>.cls-1 {font-size: 60px;fill: #8AC452;font-family: "Open Sans";}</style></defs><text id="A" class="cls-1" transform="translate(0.256 11) scale(0.256 0.256)">A</text></svg></div></td><td><div id="mcxFontMedium"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22"><defs><style>.cls-1 {font-size: 60px;fill: #8AC452;font-family: "Open Sans";}</style></defs><text id="A" class="cls-1" transform="translate(0.513 22) scale(0.513 0.512)">A</text></svg></div></td><td><div id="mcxFontLarge"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="27" viewBox="0 0 28 27"><defs><style>.cls-1 {font-size: 60px;fill: #8AC452;font-family: "Open Sans";}</style></defs><text id="A" class="cls-1" transform="translate(0.769 33) scale(0.769 0.767)">A</text></svg></div></td></tr></tbody></table></div>');

var a = $('.text').css('font-size');
var b = a.match(/\d+/);

$( '#fontResizer div' ).click(function() {
    var clickedDiv = $(this).attr('id');
    if ( clickedDiv === 'mcxFontSmall' ){
    	$('.text').css("font-size", (parseInt(a) - 5)+'px' );
      console.log( $('.text').css('font-size') );
    }
    if ( clickedDiv === 'mcxFontMedium' ){
  			$('.text').css("font-size", (parseInt(a))+'px' );
        console.log( b );
    }
    if ( clickedDiv === 'mcxFontLarge' ){
  			$('.text').css("font-size", (parseInt(b) + 20)+'px' );
    }
});