Разобрался. Оказывается, был конфликт с другим плагином, где также присутствовал 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, время: 03:07. |