Как поменять размер чего угодно на странице

Как поменять размер чего угодно на странице

Проект с использованием слайдера в JQuery UI

Сегодня будет простой, но полезный проект — мы добавим на веб-страницу слайдер, чтобы им можно было увеличить или уменьшить размер текста.

Смысл проекта в том, чтобы прикрутить к существующей веб-странице внешнюю библиотеку и заставить её работать с содержимым исходной страницы. Для этого нужно будет изучить поведение этой библиотеки, понять логику её работы и корректно привязать к существующим элементам. 

Логика проекта

Чтобы упростить весь проект и не делать то, что уже кем-то сделано, мы поступим так:

  1. Подготовительный этап — соберём исходную страницу и отметим нужные блоки текста определённым классом, чтобы потом к ним обращаться. 
  2. Подключим jQuery, чтобы получить доступ к нужным объектам. В современном вебе в этом уже нет необходимости, но также JQuery нужна для следующего шага. 
  3. Подключим библиотеку jQuery UI, которая нарисует нам слайдер и поможет обработать взаимодействие с ним. 
  4. Разберёмся с тем, как работает слайдер, и привяжем к нему нужные обработчики. 
  5. Настроим обработчики так, чтобы они влияли на размер текста. 

Создаём страницу и подключаем библиотеки

Тут ничего сложного, просто страница с импортом двух библиотек: JQuery и JQUery UI. Первая будет отвечать за взаимодействие с документом как таковым, а вторая — за интерфейс слайдера. 

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Слайдер и размер текста</title>
  <!-- подключаем стили для слайдера -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <!--  подключаем jQuery-->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <!-- подключаем библиотеку с готовыми скриптами для интерфейсов -->
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>

</body>
</html>

Добавляем слайдер и описание

Идём в документацию к слайдерам в JQuery UI и копипастим оттуда код для отрисовки этого слайдера. Сначала HTML, который должен быть на странице, чтобы в нём рисовался слайдер:

<!-- сообщаем о том, как работает слайдер -->
<p>
  <label for="amount">Размер текста (слайдер меняет по 2 пикселя):</label>
  <!-- текущий размер шрифта сделаем в отдельном поле -->
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<!-- пока что здесь будет лежать пустой блок, а чуть позднее мы внутри него нарисуем слайдер -->
<div id="slider"></div>

Теперь скрипт, который инициирует слайдер в созданном выше куске HTML. Этот скрипт ставится ближе к концу документа и точно после того, как мы указали <div id="slider">. 

<!-- основной скрипт -->
<script>
  // начальный размер текста в пикселях
  start_size = 14;
  // рисуем слайдер
  $( function() {
    // создаём слайдер в одноимённом блоке
    $( "#slider" ).slider({
      // устанавливаем начальные и пограничные значения, а также шаг ползунка
      value:start_size,
      min: 6,
      max: 30,
      step: 2,
      
    });
    // выводим стартовое значение слайдера
    $( "#amount" ).val( $( "#slider" ).slider( "value" ) + "px" );

  } );
</script>
Как поменять размер чего угодно на странице

Добавляем текст на страницу

Добавим текст, размером которого и будет управлять этот слайдер. Логика с текстом будет такая:

  1. Чтобы можно было управлять каким-то элементом на странице, нам нужно знать его id или class. 
  2. Если нам нужно поменять текст у нескольких элементов, то id не подходит — если на странице будет несколько элементов с одинаковым id, то скрипт обработает только первый, а остальные пропустит.
  3. Значит, остаётся class, который можно указать как у отдельного абзаца, так и у целого блока со множеством элементов.

Возьмём текст из статьи про протокол и добавим его к нам на страницу. Причём добавим хитро: два абзаца мы добавим в блоке, а третий — сам по себе. И у блока, и у абзаца укажем нужный класс — так мы проверим, что слайдер меняет размер текста у каждого элемента с таким текстом, а не только у первого.

<h1>
  Что такое протокол
</h1>

<!-- добавляем несколько абзацев текста и указываем нужный класс-->
<div class ="variant">
  <p >Сейчас многие устройства и программы умеют связываться друг с другом: компьютеры — между собой, телефон — с наушниками, а серверы — с браузером. И довольно часто всё происходит без сбоев. Этим мы обязаны протоколам — вот о них и поговорим.</p>
  <p >Протокол в ИТ — это набор правил, по которым устройства и программы обмениваются данными. Можно сказать, что это язык — в смысле, что это набор правил общения. Можно сказать, что это грамматика языка. Короче — набор правил.</p>
</div>

<!-- и ещё отдельный абзац для проверки работы класса -->
<p class ="variant">Когда мы говорили про умный дом, то там многое было завязано на протоколы. Именно по этой причине приборы от разных производителей часто не могут работать вместе — у них просто нет общего протокола.</p>
Как поменять размер чего угодно на странице
Для чистоты эксперимента мы добавили заголовок H1 без класса — посмотрим, изменится у него размер или нет

Добавляем реакцию на движение ползунка

Сейчас на странице есть все нужные элементы, но текст никак не реагирует на движения ползунка по слайдеру. Всё потому, что мы не прописали это в обработчике jQuery. 

Всё вместе работает так:

  1. Перепроверяем, чтобы текст был стартового размера. Вдруг у пользователя какие-то настройки браузера, из-за которых текст выводится в другом размере?
  2. Рисуем слайдер (мы это уже сделали)
  3. При каждом взаимодействии со слайдером меняем размер текста

<!-- основной скрипт -->
<script>
  // начальный размер текста в пикселях
  start_size = 14;
  // Перепроверяем, чтобы исходный текст был стартового размера. А точнее — заставляем его стать нужного стартового размера
  $( function() {
      // получаем массив со всеми элементами нужного класса
      elements = document.getElementsByClassName("variant");
      // перебираем все элементы по очереди
      for( let i = 0; i < elements.length; i++){ 
        // для каждого элемента устанавливаем стартовый размер шрифта
        elements[i].style.setProperty("font-size",start_size+"px"); 
      }

    // создаём слайдер в одноимённом блоке
    $( "#slider" ).slider({
      // устанавливаем начальные и пограничные значения, а также шаг ползунка
      value:start_size,
      min: 6,
      max: 30,
      step: 2,
      // используем метод из подключённой библиотеки чтобы вызвать новую функцию — она будет отвечать за обновление размера текста
      slide: function( event, ui ) {
        // пишем текущее значение слайдера
        $( "#amount" ).val( ui.value + "px");
       // перебираем все элементы по очереди
        for( let i = 0; i < elements.length; i++){ 
          // для каждого элемента устанавливаем новый размер шрифта
            elements[i].style.setProperty("font-size",ui.value+"px"); 
          }
      }
    });
    // выводим новое значение слайдера
    $( "#amount" ).val( $( "#slider" ).slider( "value" ) + "px" );

  } );
</script>
Как поменять размер чего угодно на странице

Проверим, как работает скрипт и передвинем ползунок на 20 пикселей:

Как поменять размер чего угодно на странице

Посмотреть на работу скрипта можно на странице проекта.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Слайдер и размер текста</title>
  <!-- подключаем стили для слайдера -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <!--  подключаем jQuery-->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <!-- подключаем библиотеку с готовыми скриптами для интерфейсов -->
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

  <!-- основной скрипт -->
  <script>
    // начальный размер текста в пикселях
    start_size = 14;
    // Перепроверяем, чтобы исходный текст был стартового размера. А точнее — заставляем его стать нужного стартового размера
    $( function() {
        // получаем массив со всеми элементами нужного класса
        elements = document.getElementsByClassName("variant");
        // перебираем все элементы по очереди
        for( let i = 0; i < elements.length; i++){ 
          // для каждого элемента устанавливаем стартовый размер шрифта
          elements[i].style.setProperty("font-size",start_size+"px"); 
        }

      // создаём слайдер в одноимённом блоке
      $( "#slider" ).slider({
        // устанавливаем начальные и пограничные значения, а также шаг ползунка
        value:start_size,
        min: 6,
        max: 30,
        step: 2,
        // используем метод из подключённой библиотеки чтобы вызвать новую функцию — она будет отвечать за обновление размера текста
        slide: function( event, ui ) {
          // пишем текущее значение слайдера
          $( "#amount" ).val( ui.value + "px");
         // перебираем все элементы по очереди
          for( let i = 0; i < elements.length; i++){ 
            // для каждого элемента устанавливаем новый размер шрифта
              elements[i].style.setProperty("font-size",ui.value+"px"); 
            }
        }
      });
      // выводим новое значение слайдера
      $( "#amount" ).val( $( "#slider" ).slider( "value" ) + "px" );

    } );
  </script>
</head>
<body>
  <!-- сообщаем о том, как работает слайдер -->
  <p>
    <label for="amount">Размер текста (слайдер меняет по 2 пикселя):</label>
    <!-- текущий размер шрифта сделаем в отдельном поле -->
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  </p>
  <!-- пока что здесь будет лежать пустой блок, а чуть позднее мы внутри него нарисуем слайдер -->
  <div id="slider"></div>

  <h1>
    Что такое протокол
  </h1>

  <!-- добавляем несколько абзацев текста и указываем нужный класс-->
  <div class ="variant">
    <p >Сейчас многие устройства и программы умеют связываться друг с другом: компьютеры — между собой, телефон — с наушниками, а серверы — с браузером. И довольно часто всё происходит без сбоев. Этим мы обязаны протоколам — вот о них и поговорим.</p>
    <p >Протокол в ИТ — это набор правил, по которым устройства и программы обмениваются данными. Можно сказать, что это язык — в смысле, что это набор правил общения. Можно сказать, что это грамматика языка. Короче — набор правил.</p>
  </div>

  <!-- и ещё отдельный абзац для проверки работы класса -->
  <p class ="variant">Когда мы говорили про умный дом, то там многое было завязано на протоколы. Именно по этой причине приборы от разных производителей часто не могут работать вместе — у них просто нет общего протокола.</p>
    
</body>
</html>

Что дальше

У нашего скрипта есть один недостаток — он меняет размер шрифта только у конкретных элементов с определённым классом. Было бы здорово, если бы слайдер увеличивал шрифт одновременно у всех элементов — вдруг подписи к картинкам останутся слишком мелкими, даже если основной текст станет большим. 

Попробуем исправить это и сделать универсальный скрипт в следующий раз. А пока напишите в комментариях, что ещё можно полезного повесить на этот слайдер.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Алина Грызлова

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Изучить
Веб-разработка — это новый чёрный
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
глитч-эффект
Проглючило: делаем глитч-эффект на SASS

На это можно смотреть бесконечно.

medium
Как устроен проект «Гадаем на статьях Кода»
Как устроен проект «Гадаем на статьях Кода»

Никакой магии, только JavaScript.

easy
Пишем Чехова на цепях Маркова: готовая библиотека
Пишем Чехова на цепях Маркова: готовая библиотека

Многократно ускоряем разработку.

easy
Проект: собственный поиск по странице на jQuery
Проект: собственный поиск по странице на jQuery

Потому что почему бы и нет.

medium
Универсальная аналитическая машина

Она может предсказать что угодно, если правильно её настроить.

medium
Работаем с биг-датой: визуализируем данные на Python
Работаем с биг-датой: визуализируем данные на Python

Обрабатываем 4 миллиона строк данных

hard
ООП: атрибуты и методы
ООП: атрибуты и методы

Два главных слова любого программиста в ООП. Знай их, люби их, говори правильно.

easy
Делаем простые автотесты на Python
Делаем простые автотесты на Python

Пусть программа проверяет другую программу

medium
Запускаем нейросеть на домашнем компьютере
Запускаем нейросеть на домашнем компьютере

Пошаговое руководство для начинающих

hard
CSS: как задавать размеры элементов на сайте
CSS: как задавать размеры элементов на сайте

Шпаргалка по единицам измерения для начинающих верстальщиков

easy
medium