| 12
 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