Description:
Welcome to Jqueryjohn.com.
Lot of websites provides
users with an option to increase or decrease the font size of the page for
better reading experience.
In the below program, I have used small JavaScript code
to change the font size of the page at client side.
When the page loads, font size is set to 14px by default.
When the user clicks the button, font size is increased or decreased by 2 Px.
For live demo, click here.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
"></script>
<script
type="text/javascript">
$(document).ready(function () {
var
defSize = 14;
var
size = defSize + "px";
$(".divOne").css("font-size", size);
$('#btnZoomIn').click(function () {
defSize = defSize + 2;
var
size = defSize + "px";
$(".divOne").css("font-size",
size);
return
false;
});
$('#btnZoomOut').click(function () {
defSize = defSize - 2;
var
size = defSize + "px";
$(".divOne").css("font-size", size);
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<div class="divOne">
Welcome to Jqueryjohn.com.
This is Technical blog related to Scripting Languages.
Jqueryjohn.com offers jquery
related articles with code snippets. Jqueryjohn.com
also has jquery tutorials with
examples. It is easy to learn for beginners. Donec.
</div>
<asp:Button ID="btnZoomIn" runat="server" Text="Zoom In" />
<asp:Button ID="btnZoomOut" runat="server" Text="Zoom Out" />
</div>
</form>
</body>
</html>
Increase or
decrease font size of the page dynamically, Adjusting font size with jquery, resize
font size using jquery , change font size using jquery, dynamically change font
size of the webpage using jquery
0 comments:
Post a Comment