/////////// HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>increase or decrease font size of website in
asp.net</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
var divtxt = $('#ChDfontdiv');
// Increase Font Size
$('#incrsfont').click(function () {
GetAllSize("p");
});
// Decrease
Font Size
$('#decrsfont').click(function () {
GetAllSize("m");
})
function GetAllSize(siz) {
$('#ChDfontdiv div, #ChDfontdiv span,
#ChDfontdiv label, #ChDfontdiv .heading').each(function
() {
if (siz == "p")
{
debugger;
var curSize = $(this).css('fontSize');
var newSize = parseInt(curSize.replace("px",
"")) + 1;
$(this).css("fontSize",
newSize + "px");
if (newSize > 12) {
$('#decrsfont').removeAttr("disabled");
}
if (newSize >= 25) {
$('#incrsfont').attr("disabled", "disabled");
}
}
else if
(siz == "m") {
var curSize = $(this).css('fontSize');
var newSize = parseInt(curSize.replace("px",
"")) - 1;
$(this).css("fontSize",
newSize + "px");
if (newSize <= 12) {
$('#decrsfont').attr("disabled",
"disabled");
}
if (newSize < 25) {
$('#incrsfont').removeAttr("disabled");
}
}
});
}
});
</script>
<style>
body{ font-size:12px;}
.heading{ font-size:18px; font-weight:bold;}
</style>
</head>
<body>
<div id="ChDfontdiv">
<div class="heading">
heading
heading heading
</div>
<div>div div div div div</div>
<span>span span span span span</span>
<label>label label label label label</label>
</div>
<br />
<input type="button"
id="incrsfont"
value=" + "
/>
<input type="button"
id="decrsfont"
value=" - "
/>
</body>
</html>
No comments:
Post a Comment