Change Font Size On Button Click Using JQuery

p1.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
.hide{

}
</style>
</head>

<body>
<input type=”button” value=”Smaller”/><input type=”button” value=”Bigger”/>
<div>
<p>Hello World</p>
</div>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”small.js”></script>
</body>
</html>

——————————————————————————————–

small.js

// JavaScript Document
$(document).ready(function(){

$(‘input[type=”button”]’).click(function(){

var a = $(this).val();
resize(a);

});

function resize(val)
{
var px = parseInt($(‘p’).css(‘font-size’));

if(val == ‘Smaller’)
$(‘p’).css(‘font-size’,(px-2) +’px’);

else if(val == ‘Bigger’)
$(‘p’).css(‘font-size’,(px+2) +’px’);

}

});

 

———————————————————————————

 

 

 

Advertisements