| Font Increase/Decrease Button |
| |
jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
font_size
= 16;
//MUST BE OUTSIDE THE FUNTION, OTHER IT WILL ONLY INCREASE/DECREASE ONCE
function font
(attr
){
//CHANGES FONT SIZE ACCORDING TO BUTTON
if(attr
=='inc'){
font_size
+= 2;
}
if(attr
=='dec'){
font_size
-= 2;
}
//KEEPS FONT SIZE FROM 2 TO 100
if(font_size
<2){
font_size
= 2;
}
if(font_size
>100){
font_size
= 100;
}
$(
"#text").css({
"font-size":font_size
+"px"});
//TEXT ALTERS HERE
$(
"#fs").html(
"Font-size: "+font_size);
//(OPTIONAL) SHOWS FONT SIZE IN HTML
}
</script>
<style>
#text {
font-size: 16px;
word-wrap: break-word;
width: 600px;
}
</style>
</head>
<body>
<input id=
"inc" onClick=
"font($(this).attr('id'))" type=
"button" value=
"+">
<input id=
"dec" onClick=
"font($(this).attr('id'))" type=
"button" value=
"-">
<span id=
"fs"></span>
<div id=
"text">
wcetdesigns.com</div>
</body>
</html>
Views: 28 Likes: 0 Dislikes: 0
