Помогите исправить скрипт
В общем есть скрипт который меняет размер шрифта для слабовидящих. Только определенному списку классов. либо всем кроме определенного списка классов.
Тут: 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' }); })(); |
Так у вас скрипт работает. Где указано менять размер шрифта там он и меняет.
|
Ок. Понял. А можете подсказать как исправить код в скрипте? Чтобы не было повторений 3-4 строки и 6-7 строки..
|
Типа такого?
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'; }) }); |
увеличение размера шрифта для слабовидящих
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> |
Цитата:
https://jsfiddle.net/Georka/jmwetdyp/9/ |
В общем немного пошаманил с тем что вы предлагали и вот что вышло:
https://jsfiddle.net/Georka/jmwetdyp/19/ Спасибо вам мужики) я получил то что хотел На сайте это выглядет так: http://dear0ptika.tmweb.ru/sl-coverings.html |
Цитата:
Исправленный скрипт — https://jsfiddle.net/y5s4kq1x/ Цитата:
Я вам рекомендую указать в адресе ссылки номер телефона — <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; }, которое не позволяет передвигаться по странице при помощи клавиатуры или пульта — удалите такое правило, или напишите свой стиль, который позволяет понять, что человек сфокусирован на ссылке. |
Часовой пояс GMT +3, время: 19:03. |