fontsize/sample.html at master · coto/fontsize · GitHub

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
	<link rel="shortcut icon" href="/media/favicon.ico" type="image/x-icon" />
	<title>jQuery plugin fontSize</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script src="jquery.fontSize.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.increase').fontSize({
				action: "up",
				elements: "#content",
				max: 36
			});

			$('.decrease').fontSize({
				action: 'down',
				elements: "#content"
			});
		})
	</script>
	<style type="text/css">
		body {font-family: Georgia, serif;}
		.box{
			border: 2px solid lightblue;
			color: lightblue;
			display: block;
			width: 20px;
			float: left;
			margin-right: 5px;
			padding: 1px 2px;
			text-decoration: none;
		}
	</style>
</head>
<body>

	<a href="#" class="increase" title="Increase text size">Increase</a> - <a href="#" class="decrease" title="Decrease Text Sise">Decrease</a>

	<div id="content">
		<h1>jQuery plugin fontSize</h1>
		<p>Hosted in: <a href="https://github.com/coto/fontsize">https://github.com/coto/fontsize</a></p>

		<h2>How to use:</h2>
		<ol>
			<li>Include jquery.js and jquery.fontSize.js between <head></head> tags.</li>
			<li>Give id's for both links, for example #increase (+) and #decrease (-)</li>
			<li>Initialize the plugin, like the folowing:<br/>
            <pre>
            $(document).ready(function(){
                $('#increase').fontSizer({
                    action: "up",
                    max: 36
                });
                $('#decrease').fontSizer({
                    action: 'down'
                });
            });
            </pre>
            </li>
			<li>That's it. now, the parameters:
				<ul>
					<li>action: "up/down" (required)</li>
					<li>elements: "element" (which element will be influenced by the font-size)</li>
					<li>increment: number (how many steps will increase/decrease the font-size)</li>
					<li>max: number (max. font-size)</li>
					<li>min: number (min. font-size)</li>
				</ul>
			</li>
		</ol>
	</div>
	<p><a href="http://plugins.jquery.com/project/FontSize">Download</a></p>

	<a href="#" class="increase box" title="Increase text size">A+</a> <a href="#" class="decrease box" title="Decrease Text Sise">A-</a>
</body>
</html>