Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.08.2013, 18:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,821

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. конечно это можно сделать и без плагина )))

Последний раз редактировалось рони, 13.01.2021 в 19:33.
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2014, 11:15
Аватар для Bravo
Интересующийся
Отправить личное сообщение для Bravo Посмотреть профиль Найти все сообщения от Bravo
 
Регистрация: 26.03.2014
Сообщений: 19

Спасибо за решение (плюсануть не смог, уже ранее плюсовал)

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

Учитывая момент, что хранить придется информацию для страниц, где много элементов у которых был увеличен текст.
Ответить с цитированием
  #3 (permalink)  
Старый 14.04.2014, 12:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,821

Сохранение установленного размера шрифта
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>

Последний раз редактировалось рони, 14.04.2014 в 12:48.
Ответить с цитированием
  #4 (permalink)  
Старый 11.08.2014, 19:23
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Замечательно. Спасибо вам огромное. Вот только как сделать так, что бы увеличение было у отдельных элементов.
Например id="content" добавляю в нескольких блоках - увеличивается только первый
Ответить с цитированием
  #5 (permalink)  
Старый 11.08.2014, 19:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,821

qwe88,
id уникально !!! либо если совсем невмоготу то $('[id="content"]') но лучше класс для одинаковых блоков
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2014, 14:42
Новичок на форуме
Отправить личное сообщение для Radrigo Посмотреть профиль Найти все сообщения от Radrigo
 
Регистрация: 04.12.2014
Сообщений: 4

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

Можно как-то сделать чтоб вместе с font-size так же менялось значение line-height ?
Ответить с цитированием
  #7 (permalink)  
Старый 04.12.2014, 15:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,821

Radrigo,
Цитата:
При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.
может вам установить normal в line-height для нужных элементов?
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2014, 15:28
Новичок на форуме
Отправить личное сообщение для Radrigo Посмотреть профиль Найти все сообщения от Radrigo
 
Регистрация: 04.12.2014
Сообщений: 4

Сообщение от рони Посмотреть сообщение
Radrigo,

может вам установить normal в line-height для нужных элементов?
Да спасибо=)
line-height:normal работает
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2014, 12:30
Новичок на форуме
Отправить личное сообщение для Kopegoro Посмотреть профиль Найти все сообщения от Kopegoro
 
Регистрация: 06.12.2014
Сообщений: 2

В общем, скрипт работает, но когда добавляю id="content", например, в блок <div>, все eго стили (прописанные у меня во внешней таблице) летят к чёрту.
Что я делаю не так?
Ответить с цитированием
  #10 (permalink)  
Старый 06.12.2014, 12:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,821

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery для загрузки страницы в <div> Dr.Holerik jQuery 12 11.10.2016 18:36
Работа для знатока jQuery virtualbrest Работа 0 24.07.2013 16:05
Как сделать плагин jQuery в виде объекта? SkaN jQuery 12 28.06.2012 12:31
Javascript + jQuery для начинающих видеоформате tamerlan_93 Общие вопросы Javascript 3 26.04.2011 01:04
Плагин на jquery can3p jQuery 0 02.11.2009 16:02