1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
| <html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style type="text/css">
.caption {
top:470px;
background-color:black;
text-align:center;
font-size:28px;
font-family:'Trebuchet MS',sans-serif;
color:white;
position:absolute;
width:700px;
height:70px;
margin-bottom:0px;
}
.button {
background-color: crimson;
background-image: -webkit-linear-gradient(top, crimson, crimson);
background-image: -moz-linear-gradient(top,crimson,crimson);
display: inline-block;
font-size: 24px;
font-family: 'Meiryo UI';
color: #fff;
text-decoration: none !important;
padding: 5px 20px;
line-height: inherit;
overflow: hidden;
position: relative;
border-radius: 2px;
margin-top: 13px;
margin-bottom: 10px;
}
.button:hover {
opacity: 0.9;
}
#content{
font-family: 'Lato', sans-serif;
text-align:justify;
padding:10px;
background-color:whitesmoke;
font-size:14px;
}
#incfont{
background-color: orange;
background-image: -webkit-linear-gradient(top, orange, orange);
background-image: -moz-linear-gradient(top,orange,orange);
color:black;
}
#decfont{
background-color: orange;
background-image: -webkit-linear-gradient(top, orange, orange);
background-image: -moz-linear-gradient(top,orange,orange);
color:black;
}
#fontlinks{
margin-left:30%;
margin-right:30%;
margin-top:0px;
margin-bottom:20px;
text-align:center;
}
.buttonfont{
color:dimgrey;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#taille').change(function(){
var newSize= document.getElementById('taille').value;
$('#prevCom').css('font-size', newSize);
});
});
</script>
</head>
<body>
<div style="width:55%;margin-left:17%;margin-right:28%;">
<h2 style="font-family:'Trebuchet MS', Helvetica, sans-serif;color:crimson;text-align:center;width:700px;">Increase and Decrease Font Size using jQuery</h2>
<p style="font-family:'Trebuchet MS', Helvetica, sans-serif;text-align:center;width:700px;">Demo by <a href="https://www.google.com/+Programming-free" style="color:crimson">Priyadarshini</a></p>
<div style="background-color:gray;width:700px;height:400px;">
<div id="prevCom" style="height:260px">
ProgrammingFree is a technical blog with quality articles on various programming languages with appropriate source code,screenshots and live demos.This blog contains information on several programming topics with appropriate screenshots and code. I never write a blog here on any topic, without actually implementing it myself to make sure that I am not misleading the readers of my blog. I am a beginner in writing though not in programming, so I really value your suggestions on my writing skills. Please remember this - the best place to get help for the issues you have in your own implementation is at technical forums and not on blogs. I welcome comments about technical inaccuracies you may spot, or typos - or indeed improvements you might want to offer to the code I have presented, or any other aspect of this site.
</div>
<br/>
<div id="fontlinks">
<a href="#" id="incfont" class="button buttonfont">A+</a>
<a href="#" id="decfont" class="button buttonfont">A-</a>
<br>
<input type="number" id="taille" value="20">
</div>
<span class="caption"><a href="javascript:parent.window.location.href='http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html'" class="button">Tutorial</a></span>
</div>
</body>
</html> |
Partager