Sun. Nov 17th, 2019

Codes

Codes for Coders

Font Resizer

1 min read
Font resizer

Font resizer

The jQuery Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. It is flexible in that it lets you specify how to resize text, where it should be resized, and how the resizing controls are to be structured.

Font resizer
Font resizer

 

Font resizer

Create buttons to perform resize actions:

<ul class="font-size">
<li style=""><a href="javascript:void(0)" class="decrease" style="">A-</a></li>
<li style=""><a href="javascript:void(0)" class="reset" style="">A</a></li>
<li style=""><a href="javascript:void(0)" class="increase" style="">A+</a></li>
</ul>

You can add custom class and CSS to li.

Here is jquery script to  resize fonts or text of page:

$(document).ready(function() {
var y = 2;
$( ".increase" ).click(function(){
console.log('1');
if(y<4) { $('div, p, li, h2, h3,a').each(function(index) { var x = parseInt($( this).css( "font-size" )); x=x+1; $( this).css( "font-size",x ); }); y=y+1; } }); $( ".decrease" ).click(function(){ console.log('2'); if(y>0)
{
$('div, p, li, h2, h3,a').each(function(index)
{
var x = parseInt($( this).css( "font-size" ));
x=x-1;
$( this).css( "font-size",x );
});
y=y-1;
}
});
$( ".reset" ).click(function(){
console.log('3');
$('div, p, li, h2, h3,a').each(function(index)
{
$( this).css( "font-size","");
});
y=2;
});
});

 

This script resizes fonts or text at run time only.

Leave a Reply

Your email address will not be published. Required fields are marked *