<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}
#mytext {
font-size: 20px
}
</style>
</head>
<body>
<center>
<p id="mytext">Change TEXT size by UP/DOWN key</p>
</center>
<script>
$(function(){
var KEY_UP = 38;
var KEY_DOWN = 40;
//Set listener for keydown
$(document).keydown(function(e){
$("#mytext2").html("- keydown -");
switch(e.which){
case KEY_UP:
var fontsize = parseInt($("#mytext").css("font-size")) + 2;
$("#mytext").css("font-size", fontsize+"px");
break;
case KEY_DOWN:
var fontsize = parseInt($("#mytext").css("font-size")) - 2;
$("#mytext").css("font-size", fontsize+"px");
break;
}
});
});
</script>
</body>
</html>
Related: Implement Slider using HTML5 an JavaScript
No comments:
Post a Comment