jQuery плагин для увеличения/уменьшения шрифта
плагин умеет увеличивать уменьшать размер шрифта в заданном диапазоне и возвращать исходное значение
добавлено: опция - нераспространять параметры шрифта на указаннных потомков
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.zoomtext = function (c) {
var a = {
min: 8, //минимальный размер шрифта - 0 без ограничения
max: 32, //максимальный размер шрифта - 0 без ограничения
increment: "+=1", //приращение или размер например "24px"
recovery: !1, //вернуть исходный размер
skip: !1 //нераспространять параметры шрифта на этих потомков - селектор потомков "*"
}, a = $.extend(a, c);
c = $("*", this).add(this);
c.each(function (a, c) {
var b = $(this).css("fontSize");
!$(this).data("fontSize") && $(this).data("fontSize", b).css("fontSize", b)
});
a.skip && (c = c.not($(a.skip, this)));
return c.each(function (c, d) {
var b = $(this).css("fontSize"),
b = $("<div/>", {
css: {
fontSize: b
}
}).css("fontSize", a.increment).css("fontSize");
a.max && parseFloat(b) > a.max && (b = a.max);
a.min && parseFloat(b) < a.min && (b = a.min);
a.recovery && (b = $(this).data("fontSize"));
$(this).css({
fontSize: b
})
})
};
$(function()
{
$('#increase').click(function(event)
{event.preventDefault();
$('#content').zoomtext({increment: "+=1"});
}
);
$('#reset').click(function(event)
{event.preventDefault();
$('#content').zoomtext({recovery: true});
}
);
$('#decrease').click(function(event)
{event.preventDefault();
$('#content').zoomtext({increment: "-=3"});
}
);
$('#font24').click(function(event)
{event.preventDefault();
$('#content').zoomtext({increment: "24px"});
}
);
$('#increase_мах').click(function(event)
{event.preventDefault()
$('#content').zoomtext({increment: "+=5", max : 0,skip : '*'});
}
);
}
)
</script>
</head>
<body>
<p id="content">
Бесплатный гороскоп на сегодня 08.08.2011 для Тельца:<br /><a href="#">123456</a>
Для всех Тельцов это день максимальной активности, время, когда стоит быть энергичными в самых обыденных делах, придавая им цельность и гармонию. Не стоит упускать возможности воспользоваться чьими-то предложениями, которые могут оказаться весьма выгодными и полезными. Контакты с коллегами по работе или родственниками у Тельцов будут теплыми, приносящими успех и удовлетворение. Правда, при этом не стоит проявлять чрезмерной принципиальности в вопросах, касающихся профессиональной деятельности, так как это чревато возможными конфликтами.
</p>
<ul id="zoom">
<li><a href="#zoom" id="increase" title="увеличить шрифт">увеличить шрифт</a></li>
<li><a href="#zoom" id="reset" title="сбросить шрифт">сбросить шрифт</a></li>
<li><a href="#zoom" id="decrease" title="уменьшить шрифт">уменьшить шрифт</a></li>
<li><a href="#zoom" id="font24" title="шрифт = 24">шрифт = 24px</a></li>
<li><a href="#zoom" id="increase_мах" title="увеличить шрифт">увеличить шрифт без ограничения исключая потомков</a></li>
</ul>
</script>
</body>
</html>
P.S. конечно это можно сделать и без плагина ))) |
Спасибо за решение :) (плюсануть не смог, уже ранее плюсовал)
Но возник вопрос, как быть с записью в куки, чтобы размер шрифтов сохранялся при переходе по страницам? Учитывая момент, что хранить придется информацию для страниц, где много элементов у которых был увеличен текст. |
Сохранение установленного размера шрифта
Bravo,
Вариант с сохранением ... плагин добавлен параметр conserve: !0 //сохранять установленное значение...инициализация сохранённого строки 46-53
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.zoomtext = function (c) {
var a = {
min: 8, //минимальный размер шрифта - 0 без ограничения
max: 32, //максимальный размер шрифта - 0 без ограничения
increment: "+=1", //приращение или размер например "24px"
recovery: !1, //вернуть исходный размер
skip: !1, //нераспространять параметры шрифта на этих потомков - селектор потомков "*"
conserve: !0 //сохранять установленное значение
}, a = $.extend(a, c);
c = $("*", this).add(this);
var sel = this.selector;
c.each(function (a, c) {
var b = $(this).css("fontSize");
!$(this).data("fontSize") && $(this).data("fontSize", b).css("fontSize", b)
});
a.skip && (c = c.not($(a.skip, this)));
var old = JSON.parse(localStorage.getItem("elementsFont")) || {};
return c.each(function (c, d) {
var b = $(this).css("fontSize"),
b = $("<div/>", {
css: {
fontSize: b
}
}).css("fontSize", a.increment).css("fontSize");
a.max && parseFloat(b) > a.max && (b = a.max);
a.min && parseFloat(b) < a.min && (b = a.min);
a.recovery && (b = $(this).data("fontSize"));
a.conserve && (old[sel] = {
fontSize: b,
skip: a.skip
});
localStorage.setItem("elementsFont", JSON.stringify(old));
$(this).css({
fontSize: b
})
})
};
$(function () {
var old = JSON.parse(localStorage.getItem("elementsFont")) || {};
Object.keys(old).forEach(function (key) {
$(key).zoomtext({
increment: old[key].fontSize,
skip: old[key].skip,
conserve: false
});
});
$('#increase').click(function (event) {
event.preventDefault();
$('#content').zoomtext({
increment: "+=1"
});
});
$('#reset').click(function (event) {
event.preventDefault();
$('#content').zoomtext({
recovery: true
});
});
$('#decrease').click(function (event) {
event.preventDefault();
$('#content').zoomtext({
increment: "-=3"
});
});
$('#font24').click(function (event) {
event.preventDefault();
$('#content').zoomtext({
increment: "24px"
});
});
$('#increase_мах').click(function (event) {
event.preventDefault()
$('#content').zoomtext({
increment: "+=5",
max: 0,
skip: '*'
});
});
})
</script>
</head>
<body>
<p id="content">
Бесплатный гороскоп на сегодня 08.08.2011 для Тельца:<br /><a href="#">123456</a>
Для всех Тельцов это день максимальной активности, время, когда стоит быть энергичными в самых обыденных делах, придавая им цельность и гармонию. Не стоит упускать возможности воспользоваться чьими-то предложениями, которые могут оказаться весьма выгодными и полезными. Контакты с коллегами по работе или родственниками у Тельцов будут теплыми, приносящими успех и удовлетворение. Правда, при этом не стоит проявлять чрезмерной принципиальности в вопросах, касающихся профессиональной деятельности, так как это чревато возможными конфликтами.
</p>
<ul id="zoom">
<li><a href="#zoom" id="increase" title="увеличить шрифт">увеличить шрифт</a></li>
<li><a href="#zoom" id="reset" title="сбросить шрифт">сбросить шрифт</a></li>
<li><a href="#zoom" id="decrease" title="уменьшить шрифт">уменьшить шрифт</a></li>
<li><a href="#zoom" id="font24" title="шрифт = 24">шрифт = 24px</a></li>
<li><a href="#zoom" id="increase_мах" title="увеличить шрифт">увеличить шрифт без ограничения исключая потомков</a></li>
</ul>
</script>
</body>
</html>
|
Замечательно. Спасибо вам огромное. Вот только как сделать так, что бы увеличение было у отдельных элементов.
Например id="content" добавляю в нескольких блоках - увеличивается только первый |
qwe88,
id уникально !!! либо если совсем невмоготу то $('[id="content"]') но лучше класс для одинаковых блоков |
Попробовал у себя на сайте, скрипт работает отлично, однако значение line-height остаётся неизменным.
Можно как-то сделать чтоб вместе с font-size так же менялось значение line-height ? |
Radrigo,
Цитата:
|
Цитата:
line-height:normal работает:) |
В общем, скрипт работает, но когда добавляю id="content", например, в блок <div>, все eго стили (прописанные у меня во внешней таблице) летят к чёрту.
Что я делаю не так? |
Kopegoro,
нет кода нет совета - делайте макет - все стили лететь не могут меняется только размер шрифта |
Разобрался. Оказывается, был конфликт с другим плагином, где также присутствовал id="content". В вашем варианте изменил название id, и теперь всё работает. Спасибо!
|
рони,
Подкину свои пять копеек: 1. Если для сайта - нун делать с запоминанием для текущего юзера(для последущих страниц и входов), типично в куки для кроссбраузерности,иконка,- при наведении на иконку => появляется <input type="range"> , двигая который меняешь масштаб (как то костомизировал ползунок для идентичности во всех браузерах) С инпутом плагин сократиться до пяти строк( ибо в нем мон задать все параметры) |
Deff,
спасибо за идею но не по силам Цитата:
Цитата:
|
Немного изменил плагин - плагин применяю ко всей странице, а на ней присутствовали несколько размеров шрифтов. При загрузке из localstorage один размер применялся ко всем элементам. А это немного не устраивало :)
$.fn.zoomtext = function (c) {
var old = JSON.parse(localStorage.getItem("elementsFont")) || {};
var a = {
min: 8, // 0 - no limits
max: 42, // 0 - no limits
increment: 1, // increment
recovery: !1, // recovery old
skip: !1, // skip child (child selector - "*")
conserve: !0 // save to local storage
}, a = $.extend(a, c);
// the selector of the element
var sel = this.selector;
if (!a.recovery && old && old[sel] && old[sel].increment) {
a.increment = a.increment * old[sel].increment;
}
a.recovery && (a.increment = 1);
a.conserve && (old[sel] = {
skip: a.skip,
increment: a.increment
});
localStorage.setItem("elementsFont", JSON.stringify(old));
// the collection - element and its child
c = $("*", this).add(this);
// firstly save original font size for each elements in the collection if it has not yet
c.each(function (a, c) {
var b = $(this).css("fontSize");
!$(this).data("fontSize") && $(this).data("fontSize", b).css("fontSize", b)
});
// if skip then remove from collection
a.skip && (c = c.not($(a.skip, this)));
return c.each(function (c, d) {
var b = $(this).css("fontSize");
b = parseFloat(b) * a.increment + 'px';
//b = $("<div/>", {css: {fontSize: b}}).css("fontSize", a.increment).css("fontSize");
a.max && parseFloat(b) > a.max && (b = a.max);
a.min && parseFloat(b) < a.min && (b = a.min);
// if recovery then set original fontSize
a.recovery && (b = $(this).data("fontSize"));
$(this).css({
fontSize: b
})
})
};
var old = JSON.parse(localStorage.getItem("elementsFont")) || {};
Object.keys(old).forEach(function (key) {
$(key).zoomtext({
increment: old[key].increment,
skip: old[key].skip,
conserve: false
});
});
$(".font-sizer .reset").click(function (e) {
e.preventDefault();
$('body').zoomtext({
recovery: true
});
});
$(".font-sizer .plus").click(function (e) {
e.preventDefault();
$('body').zoomtext({increment: 1.1});
});
$(".font-sizer .minus").click(function (e) {
e.preventDefault();
$('body').zoomtext({increment: 0.9});
});
|
Исходный плагин (с вариантом сохранения размеров для всех страничек сайта) у меня работает, хотя, как Вы и сказали,
Цитата:
Цитата:
Я поменял ".font-sizer .plus" на "#increase" и так далее для всех трёх элементов (увеличения, уменьшения и сброса). Но при клике по ссылкам ничего не происходит. Возможно, я еще что-то не учел. Буду благодарен за помощь.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.zoomtext = function (c) {
var old = JSON.parse(localStorage.getItem("elementsFont")) || {};
var a = {
min: 8, // 0 - no limits
max: 42, // 0 - no limits
increment: 1, // increment
recovery: !1, // recovery old
skip: !1, // skip child (child selector - "*")
conserve: !0 // save to local storage
}, a = $.extend(a, c);
// the selector of the element
var sel = this.selector;
if (!a.recovery && old && old[sel] && old[sel].increment) {
a.increment = a.increment * old[sel].increment;
}
a.recovery && (a.increment = 1);
a.conserve && (old[sel] = {
skip: a.skip,
increment: a.increment
});
localStorage.setItem("elementsFont", JSON.stringify(old));
// the collection - element and its child
c = $("*", this).add(this);
// firstly save original font size for each elements in the collection if it has not yet
c.each(function (a, c) {
var b = $(this).css("fontSize");
!$(this).data("fontSize") && $(this).data("fontSize", b).css("fontSize", b)
});
// if skip then remove from collection
a.skip && (c = c.not($(a.skip, this)));
return c.each(function (c, d) {
var b = $(this).css("fontSize");
b = parseFloat(b) * a.increment + 'px';
//b = $("<div/>", {css: {fontSize: b}}).css("fontSize", a.increment).css("fontSize");
a.max && parseFloat(b) > a.max && (b = a.max);
a.min && parseFloat(b) < a.min && (b = a.min);
// if recovery then set original fontSize
a.recovery && (b = $(this).data("fontSize"));
$(this).css({
fontSize: b
})
})
};
var old = JSON.parse(localStorage.getItem("elementsFont")) || {};
Object.keys(old).forEach(function (key) {
$(key).zoomtext({
increment: old[key].increment,
skip: old[key].skip,
conserve: false
});
});
$("#reset").click(function (e) {
e.preventDefault();
$('body').zoomtext({
recovery: true
});
});
$("#increase").click(function (e) {
e.preventDefault();
$('body').zoomtext({increment: 1.1});
});
$("#decrease").click(function (e) {
e.preventDefault();
$('body').zoomtext({increment: 0.9});
});
</script>
</head>
<body>
<p id="content">
Бесплатный гороскоп на сегодня 08.08.2011 для Тельца:<br /><a href="#">123456</a>
Для всех Тельцов это день максимальной активности, время, когда стоит быть энергичными в самых обыденных делах, придавая им цельность и гармонию. Не стоит упускать возможности воспользоваться чьими-то предложениями, которые могут оказаться весьма выгодными и полезными. Контакты с коллегами по работе или родственниками у Тельцов будут теплыми, приносящими успех и удовлетворение. Правда, при этом не стоит проявлять чрезмерной принципиальности в вопросах, касающихся профессиональной деятельности, так как это чревато возможными конфликтами.
</p>
<ul id="zoom">
<li><a href="#zoom" id="increase" title="увеличить шрифт">увеличить шрифт</a></li>
<li><a href="#zoom" id="reset" title="сбросить шрифт">сбросить шрифт</a></li>
<li><a href="#zoom" id="decrease" title="уменьшить шрифт">уменьшить шрифт</a></li>
</ul>
</script>
</body>
</html>
|
Vectorok,
клики обернуть в ready
$(function() {
$("#reset").click(function (e) {
e.preventDefault();
$('body').zoomtext({
recovery: true
});
});
$("#increase").click(function (e) {
e.preventDefault();
$('body').zoomtext({increment: 1.1});
});
$("#decrease").click(function (e) {
e.preventDefault();
$('body').zoomtext({increment: 0.9});
});
});
|
Цитата:
Но, к сожалению, не сохраняется настройка размера шрифта при преходе на другую страницу. Чтобы проверить это, достаточно сделать копию страницы с кодом, и в исходной сделать ссылку на копию. |
Vectorok,
$(function() { --- перенесите всё сюда, а не только клики |
Цитата:
Ну да, в принципе у Вас так и было в изначальном коде. И вроде бы я это и пробовал сделать в самом начале (еще до того, как написал первое сообщение). Но видимо тогда что-то другое не поменял, и поэтому не работало. Честно скажу, пока мало понимаю jQuery, но хочу разобраться. |
А мои разборки с jQuery, закончились полным не пониманием, зачем нам нужны старые браузеры? Вот просто ведь есть (style.fontSize) и делай что пожелаешь, На пример, меняешь окно и размер шрифта, перегружайте после изменений.
<html>
<head>
<script> r=document.all;
function pysk(){
var x=1280/902;
var wi=parseInt(document.body.clientWidth);
var he=parseInt(document.body.clientHeight);
var y=(wi/he);
if (x>=y){
r.fon.style.width=wi+"px";
r.fon.style.height=wi/x;}else{r.fon.style.height=he+"px";
r.fon.style.width=he*x;}
wid=parseInt(r.fon.style.width);
razmer=((100/1280)*wid)+"%";
r.fon.style.fontSize=razmer;
}</script>
</head>
<body onload=pysk()>
<div id="fon" style=" background: #000;
position: absolute; top:0px; left:0px; font-saiz:100%; color:#fff; "height:902px;
width:1280px">Зачем огород? Любая библиотека тормоз, мой вывод. Но я сильно сомневаюсь
в своих выводах. О явескрипт знаю уже третий год, однако возраст, дитё сегодня только 62
исполнилось.
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 10:43. |