Форум

рони · #1 (**permalink**) 21.08.2013, 18:01

плагин умеет увеличивать уменьшать размер шрифта в заданном диапазоне и возвращать исходное значение
добавлено: опция - нераспространять параметры шрифта на указаннных потомков

<!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 · #2 (**permalink**) 12.04.2014, 11:15

Спасибо за решение

(плюсануть не смог, уже ранее плюсовал)

Но возник вопрос, как быть с записью в куки, чтобы размер шрифтов сохранялся при переходе по страницам?

Учитывая момент, что хранить придется информацию для страниц, где много элементов у которых был увеличен текст.

рони · #3 (**permalink**) 14.04.2014, 12:46

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>

qwe88 · #4 (**permalink**) 11.08.2014, 19:23

Замечательно. Спасибо вам огромное. Вот только как сделать так, что бы увеличение было у отдельных элементов.
Например id="content" добавляю в нескольких блоках - увеличивается только первый

рони · #5 (**permalink**) 11.08.2014, 19:30

qwe88,
id уникально !!! либо если совсем невмоготу то $('[id="content"]') но лучше класс для одинаковых блоков

Radrigo · #6 (**permalink**) 04.12.2014, 14:42

Попробовал у себя на сайте, скрипт работает отлично, однако значение line-height остаётся неизменным.

Можно как-то сделать чтоб вместе с font-size так же менялось значение line-height ?

рони · #7 (**permalink**) 04.12.2014, 15:05

Radrigo,

Цитата:

При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.

может вам установить normal в line-height для нужных элементов?

Radrigo · #8 (**permalink**) 04.12.2014, 15:28

Сообщение от рони

Radrigo,

может вам установить normal в line-height для нужных элементов?

Да спасибо=)
line-height:normal работает

Kopegoro · #9 (**permalink**) 06.12.2014, 12:30

В общем, скрипт работает, но когда добавляю id="content", например, в блок <div>, все eго стили (прописанные у меня во внешней таблице) летят к чёрту.
Что я делаю не так?

рони · #10 (**permalink**) 06.12.2014, 12:45

Kopegoro,
нет кода нет совета - делайте макет - все стили лететь не могут меняется только размер шрифта

Форум

Справочник

Discord чат

Курсы javascript