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>
waiting for this excellent post...thank you
ReplyDeletethank u so much
ReplyDelete