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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
| <!DOCTYPE html>
<html lang="fr">
<head>
<style>
body {
font-size:100%;
font-family:Arial,sans-serif;
}
.fontsize-ajuster, .fontsize-ajuster li {
padding:0; margin:0; list-style:none;
}
.fontsize-ajuster li {
position:relative;
display:inline-block;
cursor:pointer;
width:32px;
padding:5px 0;
text-align:center;
border:1px solid #ccc;
border-radius:50px;
}
.fontsize-ajuster li span {
position:absolute;
display:inline-block;
left:-9999px; /* accessibilité (on déplace hors page) */
z-index:9;
border:1px solid #ccc;
background:#fff;
padding:5px;
border-radius:5px;
text-align:left;
}
.fontsize-ajuster li:hover span {
top:40px; /* dessous */
left:0;
}
</style>
<script type="text/javascript">
// ---------------------------------------------------------
// Ajuster la taille de la police (utilise jQuery)
$(function(){
var JSsiteURLwww = 'www.mon-site-a-moi.com'; // personnalisation des cookies
var fontSection = '.ajustFontSize';
// taille à l'ouverture de page
var originalFontSize = $('body').css('font-size');
var originalFontSizeNum = parseFloat(originalFontSize, 10);
var newFontSize = (readCookie(JSsiteURLwww+'-fontsize'))? readCookie(JSsiteURLwww+'-fontsize') : '';
if( newFontSize=='' ){
newFontSize = originalFontSizeNum;
createCookie(JSsiteURLwww+'-fontsize', newFontSize, 1);
}
$(fontSection).css('font-size', newFontSize+'px');
// Restaurer la taille
$(".fontsize-reset").click(function(){
newFontSize = originalFontSizeNum;
$(fontSection).css('font-size', originalFontSize);
createCookie(JSsiteURLwww+'-fontsize', newFontSize, 1);
});
// Augmenter la taille
$(".fontsize-increase").click(function(){
var currentFontSize = $(fontSection).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
newFontSize = Math.floor(currentFontSizeNum*1.25);
if( newFontSize<=50 ){ // on limite la taille maxi
$(fontSection).css('font-size', newFontSize+'px');
createCookie(JSsiteURLwww+'-fontsize', newFontSize, 1);
}
return false;
});
// Diminuer la taille
$(".fontsize-decrease").click(function(){
var currentFontSize = $(fontSection).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
newFontSize = Math.floor(currentFontSizeNum/1.25);
if( newFontSize>=5 ){ // on limite la taille mini
$(fontSection).css('font-size', newFontSize+'px');
createCookie(JSsiteURLwww+'-fontsize', newFontSize, 1);
}
return false;
});
});
// ---------------------------------------------------------
// Cookies
function createCookie(name,value,days ){
if( days ){
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name ){
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for( var i=0;i < ca.length;i++ ){
var c = ca[i];
while( c.charAt(0)==' ') c = c.substring(1,c.length);
if( c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name ){
createCookie(name,"",-1);
};
// ---------------------------------------------------------
</script>
<meta charset="UTF-8"/>
</head>
<body>
<section>
<article>
<ul class="fontsize-ajuster ajustFontSize">
<li class="fontsize-decrease">a- <span>Diminuer la taille des caractères</span></li>
<li class="fontsize-reset">0 <span>Rétablir la taille des caractères</span></li>
<li class="fontsize-increase">A+ <span>Augmenter la taille des caractères</span></li>
</ul>
<section class="ajustFontSize">
<p><b>Cette section sera modifiée.</b></p>
<p>Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem
velut exsaturati mox abiecerunt in flumen.
</p>
</section>
<section>
<p><b>Cette section ne changera pas.</b></p>
<p>Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum
exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
</p>
</section>
<section class="ajustFontSize">
<p><b>Cette section sera modifiée.</b></p>
<p>Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et
Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.
</p>
</section>
</article>
</section>
</body>
</html> |
Améliorer la navigation
Répondre avec citation
Partager