Hai everyone today i will show how to change font size using jQuery.I am trying to do it very simple. Just u need little jQuery and html knowledge. By using this tutorial we can easily increase and decrease the font size dynamically with jQuery.

Screenshot


Save the above two images to your folder and copy below code in notepad
and save it as .html file then run it.Enjoy..


<html>
<html>
<head>
<title>Font Size Change with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('a').click(function()
{
var content = $("#Text").css("font-size"); //Get size in pixels ex:16px
var getCurrentSize = parseFloat(content);//Do parsing to convert into number ex:16
var px = content.slice(-2);
if ((this).id == "increase")
{
getCurrentSize = getCurrentSize+2;
}
else
{
getCurrentSize = getCurrentSize-2;
};
$('#Text').css("font-size", getCurrentSize+px);
return false;
});
});
</script>
</head>
<body>
<div align="center">
<div >
<h1>Welcome to StudywithDemo ! </h1>
<p id="Text" style="padding-top:100px; position:fixed; padding-left:400px">
Font Size Increase and Decrease Using jQuery</p>
</div>
<div style="padding-top:300px" >
<a href="#" id="increase"><img src="increase.png" width="148" height="64"></a>
<a href="#" id="decrease"><img src="decrease.png" width="148" height="64"></a>
</div>
</div>
</body>
</html>
Next
Newer Post
Previous
This is the last post.

2 comments:

 
Top