Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2020, 11:51
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

Помогите исправить скрипт
В общем есть скрипт который меняет размер шрифта для слабовидящих. Только определенному списку классов. либо всем кроме определенного списка классов.
Тут: https://jsfiddle.net/Georka/jmwetdyp/1/

Но он почему то работает частично: http://dear0ptika.tmweb.ru
В самом низу-слева есть ползунок с увеличением.

Подскажите в чем беда ? Почему он работает частично?

И можете помочь переделать скрипт более грамотно? буду оч благодарен)
Он выглядет так:
( function() {
var rng = document.getElementById('impaired');
var teg1 = document.querySelector("body");
var teg2 = document.querySelector(".wrapper-site p");
rng.addEventListener("input", function() {
    teg1.style.fontSize = rng.value + 'px'
    teg2.style.fontSize = rng.value + 'px'
});
})();

Последний раз редактировалось Georgian, 17.04.2020 в 11:59.
Ответить с цитированием
  #2 (permalink)  
Старый 17.04.2020, 12:13
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 458

Так у вас скрипт работает. Где указано менять размер шрифта там он и меняет.
Ответить с цитированием
  #3 (permalink)  
Старый 17.04.2020, 12:18
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

Ок. Понял. А можете подсказать как исправить код в скрипте? Чтобы не было повторений 3-4 строки и 6-7 строки..
Ответить с цитированием
  #4 (permalink)  
Старый 17.04.2020, 12:50
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 458

Типа такого?
var rng = document.querySelector('#impaired');
var selectors = ['body', '.wrapper-site p'];

rng.addEventListener('change', function() {
    selectors.forEach(function(sl) {
        document.querySelector(sl).style.fontSize = rng.value + 'px';
    })
});
Ответить с цитированием
  #5 (permalink)  
Старый 17.04.2020, 13:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,799

увеличение размера шрифта для слабовидящих
Georgian,
заменить скрипт и атрибуты input(срока 63), установить максимальное увеличение строка 33.
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .wrapper-site h2{
  font-size: 22px;
  margin: 5px 0;
  padding: 5px 0;
}
.wrapper-site p{
  font-size: 14px;
  margin: 5px 0;
  padding: 5px 0;
}

.other h2{
  font-size: 22px;
  margin: 5px 0;
  padding: 5px 0;
}
.other p{
  font-size: 14px;
  margin: 5px 0;
  padding: 5px 0;
}
  </style>

  <script>
document.addEventListener("DOMContentLoaded", function() {
    var elem = document.getElementById('impaired');
    var max = 5; //максимальное увеличение в разы
    elem.setAttribute("max", max);
    var timer;

    function changefontSize() {
        var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
        while (treeWalker.nextNode()) {
            var el = treeWalker.currentNode;
            var parent = el.parentNode;
            var fontSize = parent.dataset.fontSize;
            if (!fontSize) {
                var computedStyle = getComputedStyle(parent)
                fontSize = computedStyle["font-size"];
                fontSize = parseInt(fontSize, 10);
                parent.dataset.fontSize = fontSize;
            }
            fontSize = Math.floor(fontSize * elem.value);
            fontSize = elem.value == 1 ?  `` : `${fontSize}px`;
            parent.style.fontSize = fontSize
        }
    }

    elem.addEventListener("input", function() {
        clearTimeout(timer);
        timer = setTimeout(changefontSize, 80);
    });
});
  </script>
</head>
<body>
<input id="impaired" type="range" step=".1" min="1"  value="1"><br><hr>

<div class="wrapper-site">
<h2>Георгий</h2>
<p>Анастасия</p>
<div class="other">
<h2>Мария</h2>
<p>Елена</p>
</div>
</div></body>
</html>

Последний раз редактировалось рони, 17.04.2020 в 13:27.
Ответить с цитированием
  #6 (permalink)  
Старый 17.04.2020, 21:07
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

Сообщение от MC-XOBAHCK Посмотреть сообщение
Типа такого?
var rng = document.querySelector('#impaired');
var selectors = ['body', '.wrapper-site p'];

rng.addEventListener('change', function() {
    selectors.forEach(function(sl) {
        document.querySelector(sl).style.fontSize = rng.value + 'px';
    })
});
Да только чтобы этот вариант работал.. Пока что он влияет только на 1 класс:
https://jsfiddle.net/Georka/jmwetdyp/9/
Ответить с цитированием
  #7 (permalink)  
Старый 17.04.2020, 21:28
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

В общем немного пошаманил с тем что вы предлагали и вот что вышло:
https://jsfiddle.net/Georka/jmwetdyp/19/
Спасибо вам мужики) я получил то что хотел

На сайте это выглядет так: http://dear0ptika.tmweb.ru/sl-coverings.html

Последний раз редактировалось Georgian, 17.04.2020 в 21:30.
Ответить с цитированием
  #8 (permalink)  
Старый 18.04.2020, 06:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,709

Сообщение от Georgian
В общем немного пошаманил с тем что вы предлагали и вот что вышло:
Если у вас на странице не будет хоть одного из тех элементов, селекторы которых описаны в массиве, то произойдёт ошибка. Вы можете описать один селектор и найти при помощи метода document.querySelectorAll нужные элементы (а те элементы, которые не получается найти, не вызовут ошибки, поскольку найденные элементы помещаются в список)

Исправленный скрипт — https://jsfiddle.net/y5s4kq1x/

Сообщение от Georgian
На сайте это выглядет так: http://dear0ptika.tmweb.ru/sl-coverings.html
У вас на сайте обнаружены ссылки вида — <a href="#">+7 (8672) 29-28-29</a>, эти ссылки бессмысленны, поскольку они никуда не ведут, их бессмысленно сохранять в закладки и пр.

Я вам рекомендую указать в адресе ссылки номер телефона — <a href="tel:+78672292829">+7 (8672) 29-28-29</a>, таким образом можно сразу звонить с сайта (переход в Skype и пр., на мобильном телефоне открывается приложение для звонков, и даже в настольной версии Chrome, если вы вошли в аккаунт и у вас включена синхронизация в браузере в компьютере и в телефоне, то при переходе по такой ссылке или при нажатии правой кнопкой мыши по ссылке предлагается ещё вариант — позвонить с телефона)

<a href="tel:+78672292829">+7 (8672) 29-28-29</a>


Также у вас найдено вредное правило :focus { outline: none; }, которое не позволяет передвигаться по странице при помощи клавиатуры или пульта — удалите такое правило, или напишите свой стиль, который позволяет понять, что человек сфокусирован на ссылке.

Последний раз редактировалось Malleys, 18.04.2020 в 07:00.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите исправить скрипт кнопки fAmOus Элементы интерфейса 3 04.01.2013 21:33
Помогите пожалуйста правильно написать скрипт raffx Events/DOM/Window 17 16.10.2012 20:31
Автоскроллинг, помогите исправить скрипт Alamogoro Общие вопросы Javascript 3 09.10.2012 15:49
Скрипт if помогите пЕньку NeverLux Общие вопросы Javascript 1 06.01.2011 14:33
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 01:05