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,
нет кода нет совета - делайте макет - все стили лететь не могут меняется только размер шрифта |
| Часовой пояс GMT +3, время: 05:09. |