Код
<div class="resize">
<h1>Увеличение текста <span> (cookie)</span></h1>
<a href="#" id="increaseFont"></a>
<a href="#" id="decreaseFont"></a>
</div>
<div class="container">
<p>Тут ставим текст который будет увеличиваться</p>
</div>
CSS
Код
$timing: 0.25s;
$radius: 8px;
$bgColor: #7DA5A6;
$increaseColor: #d35400;
$decreaseColor: #e67e22;
$button: #005057;
$white: #fff;
$font-size: 14px;
.resize{
position: relative;
margin: 0 auto;
width: 400px;
text-align: center;
span{
font-size: 13px;
}
}
a{
text-decoration: none;
padding: 15px;
color: $white;
font-family: FontAwesome;
display: inline-block;
}
a#increaseFont{
background-color: $increaseColor;
border-radius: $radius;
&:before{
content: "\f067";
}
}
a#decreaseFont{
background-color: $decreaseColor;
border-radius: $radius;
&:before{
content: "\f068";
}
}
.container{
position: relative;
width: 50%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #ecf0f1;
margin-top: 20px;
border-radius: $radius;
p{
margin-top: 0;
transition: all $timing linear;
font-size: $font-size;
}
ul > li{
transition: all $timing linear;
font-size: $font-size;
}
.navigate{
border-top: 1px solid $bgColor;
padding-top: 20px;
text-align: center;
p{
display: block;
margin-bottom: 10px;
font-weight: bold;
}
a{
padding: 5px 10px;
background-color: $button;
color: $white;
text-decoration: none;
display: block;
max-width: 80px;
margin: 0 auto;
}
span{
font-size: 12px;
display: block;
}
JS
Код
<script type="text/javascript">
textResizer = $(function (){
// Set Cookie
var docCookies = {
getItem: function (sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
if (!sKey) { return false; }
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};
function changeSize(element, size) {
var current = parseInt(docCookies.getItem("FontSize"));
var newSize;
if (current !== "") {
current = parseInt(element.css('font-size'));
}
if (size === 'decrease') {
if (current > 12) {
newSize = current - 2;
}
} else if (size === 'increase') {
if (current < 22) {
newSize = current + 2;
}
}
element.css('font-size', newSize + 'px');
docCookies.setItem("FontSize", newSize, Infinity);
}
$('#decreaseFont').click(function (e) {
changeSize(text, 'decrease');
e.preventDefault();
});
$('#increaseFont').click(function (e) {
changeSize(text, 'increase');
e.preventDefault();
});
var text = $("p, ul > li"),
fontSize = docCookies.getItem("FontSize");
if (fontSize) {
text.css('font-size', fontSize + 'px');
}
});
</script>