Hello Readers if you want to make a switch button that will increase your font size of webpage then you can learn to code it here.
first you have to create html page name it click.html, It's code will go like this:-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="DefaulFont">
You are here at JavaTpoint
</div>
<div class="DefaulFont">
JavaTpoint is commited to provide easy and point to point learning of various tutorials.
</div>
<br />
<input type="button" id="ToggleFont" value="Switch Class" />
</body>
</html>
Now you have to add the custom script, This will go like this:-
<script>
$(function() {
$('#ToggleFont').click(function(){
$(".DefaulFont").switchClass("DefaulFont","BigFont",'fast');
$(".BigFont").switchClass("BigFont","DefaulFont",'fast');
return false;
});
});
</script>
Last you have add some CSS to it:-
<style>
.BigFont
{
font-family: NewTimesRoman;
font-size: large;
font-weight: bold;
color: Red;
}
.DefaulFont
{
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
Now when you load this html page, A toggle link will generate, this link will increase the fontsize of your webpage when click first time. And when user click it second time then it will reset the fontsize and make the fontsize default.
0 Comment(s)