Instant Font Resizer using Jquery

Nowadays, In all website and blogs has the font re-sizer. So many developer/designers struggling to get this. Writing so many CSS and Javascript. Here i’m going to give few simpler and instant font re-sizer. For further info: jFontsize.

Step 1. Download the Js file

Upload the js file to the server. Add the script before </head> in your index.html

<script src=”http://www.jfontsize.com/files/jquery.jfontsize-1.0.js&#8221; type=”text/javascript”/>

Step 2. Customize CSS

Add below class in your stylesheet

.jfontsize-button {
    font: bold 12px arial;
    padding: 3px;
    border: solid 1px #ccc;
}

.jfontsize-button:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
    border: solid 1px #333;
}

.jfontsize-disabled, .jfontsize-disabled:hover {
    color: #aaa;
    border: solid 1px #eee;
    background: #eee;
}

Step 3.  Assigning Font resize Function

<a id=”jfontsize-minus” class=”jfontsize-button” href=”#”>A-</a>
<a id=”jfontsize-default” class=”jfontsize-button” href=”#”>A</a>
<a id=”jfontsize-plus” class=”jfontsize-button” href=”#”>A+</a>
<p class=”PUT-THE-CLASS-NAME”>
Place your content here
</p>
<script type=”text/javascript” language=”javascript”>
                        $(‘.PUT-THE-CLASS-NAME’).jfontsize({
                            btnMinusClasseId: ‘#jfontsize-minus’,
                            btnDefaultClasseId: ‘#jfontsize-default’,
                            btnPlusClasseId: ‘#jfontsize-plus’
                        });
</script>

Just replace the “PUT-THE-CLASS-NAME” as your class where you need the font resizer to work on.

For the live demo and you can download full source code

Advertisements

One thought on “Instant Font Resizer using Jquery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s