Может кому будет полезно - формула вычисления позиции: показатель.style.left = текущее_значение*(ширина_родителя-50)+"px", при условии, что текущее_значение в диапазоне от 0 до 1, а 50 зависит от размера ползунка и range (50, при ширине ползунка 16px, 25 при 8 px). (ширину можно получить через getComputedStyle)
У меня тоже в VSC style заменяется на getElementsByClassName; console.log('Выходит, что я тоже криворукий!'); Автору видео большое почтение и респект за понятное разъяснение. Таких уроков очень и очень мало. Продолжай в том же духе! Молодец!!!
You prolly dont give a shit but if you guys are bored like me during the covid times you can stream all the latest movies on instaflixxer. Been watching with my gf these days =)
отличное объяснение, спасибо, в последнее время смотрю практически только ваш контент - а насчет замены style на другие слова - это боль, я каждый раз ругаюсь, приходится применять ctrl+z
Спасибо, Александр. Решил повторить, и разобраться, почему не выравнивалось codepen.io/BlackStar1991/pen/ywxVyG Вообщем, если задавать в оббертке, с text-align: center; то всё становиться хорошо. (Для WebKit браузеров, в других оно выглядит иначе)
добрый день. очень нравятся ваши видео! скажите, как я могу полностью заменить бегунок своим дивом, что бы стилизовать его уже без префиксов при это покаатели счетчика будут меняться по шагам step.
Спасибо. пересматриваю все плейлисты! Говорили можно подкидывать идейки! Т.к. затронули импуты, то может авто техтериа, чтобы изменялась высота под текст и при стирании текста в исходную, ну, как зис поле для комментов.
Александр, если функцию именовать (я назвал ее go ) и вызвать вначале, то отдает undefined. Я решил это привязкой вызова к контексту : go.call(range); правильно ли, или есть более изящный способ? UPD: функция отдает undefined потому что при вызове вне объекта range она теряет контекст (this). Более элегантный способ нашел - использовать bind. Вот что получилось в итоге (понимаю, что все очевидно, но, может, кому-то будет полезно): let range = document.querySelector('.number'); // получили input range let rangeNum = document.querySelector('.range-num'); // получили квадратик сверху для цифр function go() { // объявил функцию go (она имеет в себе this, значит, без контекста ее нельзя использовать) rangeNum.style.left = this.value - 15 + 'px'; rangeNum.innerHTML = this.value; }.bind(range); // здесь мы жестко привязали функцию go к контексту объекта range. Теперь this = range при любом вызове. go(); // вызвал функцию go (чтобы при загрузке страницы отображался нолик) range.oninput = function() { go() } // Теперь при каждом изменении range будет срабатывать функция go с привязкой к контексту range. Спасибо!
честно говоря, лучше выложить код на codepen - здесь тяжело смотреть код. Ваш вариант конечно имеет право быть - по оптимальности - тяжело с мобильного оценить код здесь.
У меня был небольшой опыт написания подобного элемента. Я поймал сам элемент ползунка и скриптом добавил ему потомка див-элемент. Этому диву задал абсолютное позиционирование. Остаётся отследить изменение значения и вписать в этот элемент.
Так все-таки, как можно избавиться от эффекта "обгона" слайдера? Пытаюсь изменить длину блока в зависимости от положения слайдера. Длинна увеличивается по экспоненте. Хотя в коде числовое значение this.Value совпадает со значением длинны. А визуально длинна больше.
Александр, очень интересно было бы посмотреть на вашу реализацию сортировки. Например, в портфолио или в товарной номенклатуре. Интересно как бы это можно было максимально просто реализовать на нативном js.
@@itgid но было бы очень интересно! Например, есть ведь в сетке css flex и grid свойство order. Можно ведь присваивать через js различные значения order flex-элементам в зависимости от нажатой кнопки фильтра. Я бы даже посмотрел такую реализацию в продолжении вашего урока по интернет-витрине на гугл таблицах. Обычно ведь и каталог делается не с помощью онлайн таблиц. Мне кажется, опыт такого прикладного js был бы очень интересен на канале для аудитории. Я не настаиваю на order, но я, например, другого решения не вижу, может быть ваш опыт подсказал бы изящное решение))
@@АлександрМарченко-ы4к увы, даже элементарное упорядочивание массива по двум параметрам при выборке из базы делается намного проще чем эмулировать это в JS. И быстрее. Подумаю над вопросом, но это в любом случае будут "велосипеды"
Нужная, если вам нужно, например, знать какие фичи поддерживаются, тач устройство или нет. Подходит, что бы фиксить какие проблемы со стилями на телефонах.
Кстати о таком ползунке думал недавно, хотел реализовать) углубился в jquery, а его оказывается можно сделать видимо на чистом js) посмотрю ролик, опишу как понравилось
@@itgid т.е там плагины могут быть рабочими раз они остаются на сайтах в неизменном старом виде? Там же огонь плагины, причем очень мало строк кода, достаточно скачать 3 библиотеки и можно создавать интерфейсы для разных приложений на уровне гугла или яндекса
Можна уроки в CodePen записувати там і зручно і код можна після уроку демонструвати. у мене по ходу виконання виникло питання можливо трохи не по темі заняття але всеж: я в прикладі замість звичайної функції використав стрілочну range.oninput = () => { console.log(this.value );} ось так і в мене замість значення з повзунка range відобразилось underfined, з звичайною функцією проблем не було. Так от в чому проблема і чи це якось повязано з тим що стрілочні функції беруть this з зовнішнього лексичного середовища???
Жодної проблеми, ви відповіли самі на своє питання в останньому реченні. Не варто використовувати стрілочні функції всюди як заміну оголошенню, вони мають своє призначення.
@@ПростоЕвгений-е3б this використовується в стрілочних функціях в цьому якраз їхня фішка, при використанні стрілочної функції відсутня втрата контексту в callback функціях
14:15 а так интересно получается потому, что JS понимает это выражение как строку. А значит, например 20 + 10 + рх = 2010рх. Динамическая типизация это же неоспоримое преимущество! (минутка хейта JS)
Так это ж удобно) Чтобы исправить это нужно добавить один символ, зато в похожей ситуации можно не приводить числовое значение к строке, чтобы добавить 'px'
@@странствие тут дело не в одном символе. Динамическая типизация выглядит удобной, но, в последствии, приносит кучу проблем. Настолько кучу, что целый язык выдумали, Type Script, чтобы бороться с "удобствами" динамической типизации в JS.
@@странствие основных две: 1) неявное приведение типов иногда подкидывает головную боль, особенно если мало опыта. Но с этим жить можно. 2) необходимость проверки параметров функций, если предполагается, что ей будут пользоваться другие люди. И вот это в крупных проектах становится серьёзной проблемой. Ведь я вынужден проконтролировать, что пользователь моей функции правильно передаст параметры нужного типа. В языках со строгой типизацией за меня это сделает компилятор. Это, собственно, одна из основных причин появления Type Script. Ну и так, по мелочи: указание типа переменной, параметра функции и т.п. помогает документировать код, ведь уже при объявлении я понимаю, какого типа данные тут должны быть.
@@simplewebdev1098 1) ну о какой головной боли ты говоришь-то? Обычно ошибку сразу заметно, так что она решается за пару секунд. 2) а смысл их проверять? используй toString() или унарный плюс, вот и все. Или можно пример кода, а то я не совсем понимаю
![fellow fellow - พรุ่งนี้ไม่มีใครรู้ feat. INK WARUNTORN [OFFICIAL MV]](http://i.ytimg.com/vi/QP6JyjYx_W0/mqdefault.jpg)
Дякую більше. Як мені це було необхідно в даний момент. Дуже дякую, ще раз.
Александр, у Вас хороший опыт. Видно как Вы умеете раскрывать суть
Спасибо!
Может кому будет полезно - формула вычисления позиции: показатель.style.left = текущее_значение*(ширина_родителя-50)+"px", при условии, что текущее_значение в диапазоне от 0 до 1, а 50 зависит от размера ползунка и range (50, при ширине ползунка 16px, 25 при 8 px). (ширину можно получить через getComputedStyle)
Очень полезная информация. Можно Вас попросить, написать формулу на JS, как она будет выглядеть. А то так не понятно.
У меня тоже в VSC style заменяется на getElementsByClassName;
console.log('Выходит, что я тоже криворукий!');
Автору видео большое почтение и респект за понятное разъяснение. Таких уроков очень и очень мало. Продолжай в том же духе! Молодец!!!
Мегадоступное объяснение как всегда)
Спасибо!
You prolly dont give a shit but if you guys are bored like me during the covid times you can stream all the latest movies on instaflixxer. Been watching with my gf these days =)
@Alden Raymond yea, been watching on InstaFlixxer for months myself :D
@Alden Raymond Yup, I have been watching on InstaFlixxer for years myself =)
Очень нравится как объясняешь
Великий гуру JS. Спасибо
отличное объяснение, спасибо, в последнее время смотрю практически только ваш контент - а насчет замены style на другие слова - это боль, я каждый раз ругаюсь, приходится применять ctrl+z
Спасибо, Александр. Решил повторить, и разобраться, почему не выравнивалось codepen.io/BlackStar1991/pen/ywxVyG Вообщем, если задавать в оббертке, с text-align: center; то всё становиться хорошо. (Для WebKit браузеров, в других оно выглядит иначе)
добрый день. очень нравятся ваши видео! скажите, как я могу полностью заменить бегунок своим дивом, что бы стилизовать его уже без префиксов при это покаатели счетчика будут меняться по шагам step.
Спасибо. пересматриваю все плейлисты!
Говорили можно подкидывать идейки!
Т.к. затронули импуты, то может авто техтериа, чтобы изменялась высота под текст и при стирании текста в исходную, ну, как зис поле для комментов.
Так забавно вздохнул когда style поменялся на абрукадабру =)))
Александр, если функцию именовать (я назвал ее go ) и вызвать вначале, то отдает undefined. Я решил это привязкой вызова к контексту : go.call(range); правильно ли, или есть более изящный способ?
UPD: функция отдает undefined потому что при вызове вне объекта range она теряет контекст (this). Более элегантный способ нашел - использовать bind. Вот что получилось в итоге (понимаю, что все очевидно, но, может, кому-то будет полезно):
let range = document.querySelector('.number'); // получили input range
let rangeNum = document.querySelector('.range-num'); // получили квадратик сверху для цифр
function go() { // объявил функцию go (она имеет в себе this, значит, без контекста ее нельзя использовать)
rangeNum.style.left = this.value - 15 + 'px';
rangeNum.innerHTML = this.value;
}.bind(range); // здесь мы жестко привязали функцию go к контексту объекта range. Теперь this = range при любом вызове.
go(); // вызвал функцию go (чтобы при загрузке страницы отображался нолик)
range.oninput = function() { go() } // Теперь при каждом изменении range будет срабатывать функция go с привязкой к контексту range.
Спасибо!
честно говоря, лучше выложить код на codepen - здесь тяжело смотреть код. Ваш вариант конечно имеет право быть - по оптимальности - тяжело с мобильного оценить код здесь.
Просто замени this на range и без контекста все будет работать.
У меня был небольшой опыт написания подобного элемента. Я поймал сам элемент ползунка и скриптом добавил ему потомка див-элемент. Этому диву задал абсолютное позиционирование.
Остаётся отследить изменение значения и вписать в этот элемент.
Супер
Так все-таки, как можно избавиться от эффекта "обгона" слайдера? Пытаюсь изменить длину блока в зависимости от положения слайдера. Длинна увеличивается по экспоненте. Хотя в коде числовое значение this.Value совпадает со значением длинны. А визуально длинна больше.
Александр, очень интересно было бы посмотреть на вашу реализацию сортировки. Например, в портфолио или в товарной номенклатуре. Интересно как бы это можно было максимально просто реализовать на нативном js.
да обычно это делают на бекенде.
@@itgid но было бы очень интересно! Например, есть ведь в сетке css flex и grid свойство order. Можно ведь присваивать через js различные значения order flex-элементам в зависимости от нажатой кнопки фильтра. Я бы даже посмотрел такую реализацию в продолжении вашего урока по интернет-витрине на гугл таблицах. Обычно ведь и каталог делается не с помощью онлайн таблиц. Мне кажется, опыт такого прикладного js был бы очень интересен на канале для аудитории. Я не настаиваю на order, но я, например, другого решения не вижу, может быть ваш опыт подсказал бы изящное решение))
@@АлександрМарченко-ы4к увы, даже элементарное упорядочивание массива по двум параметрам при выборке из базы делается намного проще чем эмулировать это в JS. И быстрее. Подумаю над вопросом, но это в любом случае будут "велосипеды"
Здравствуйте тов.Лущенко.Вы онлайн уроки проводите или же консультацию дадите по конкретному вопросу js?
Напишите в телеграмм
Настоящий мужчина должен сделать 3 вещи в своей жизни .
1. Посадить дерево
2. Построить дом
3. Подписаться на Александра
Согласен.
Посмотрел, отлично все)👍
А Вы пользуетесь библиотеками что бы проверять возможности браузеров? modernizr.js
Это вообще нужная библиотека сейчас?
Нужная, если вам нужно, например, знать какие фичи поддерживаются, тач устройство или нет.
Подходит, что бы фиксить какие проблемы со стилями на телефонах.
Кстати о таком ползунке думал недавно, хотел реализовать) углубился в jquery, а его оказывается можно сделать видимо на чистом js) посмотрю ролик, опишу как понравилось
гуд. В jQuery гляньте на jQueryUI
@@itgid Спасибо за совет!
@@itgid ничего себе какие там элементы, прям другой уровень
@@-it7046 да, а самое интересное, что переписывать их на es6 никто не спешит. В результате целый пласт наработок можем потерять.
@@itgid т.е там плагины могут быть рабочими раз они остаются на сайтах в неизменном старом виде?
Там же огонь плагины, причем очень мало строк кода, достаточно скачать 3 библиотеки и можно создавать интерфейсы для разных приложений на уровне гугла или яндекса
Однозначно годно!
Крутяг, спасибо!
Супер!
Давайте обзор на vs code
не вникнуть в тему - ошибка;
не привести значения ползунка к доле от максимума и минимума - фатальная ошибка, и соответственно, смещение квадратика
Можна уроки в CodePen записувати там і зручно і код можна після уроку демонструвати. у мене по ходу виконання виникло питання можливо трохи не по темі заняття але всеж: я в прикладі замість звичайної функції використав стрілочну range.oninput = () => { console.log(this.value );} ось так і в мене замість значення з повзунка range відобразилось underfined, з звичайною функцією проблем не було. Так от в чому проблема і чи це якось повязано з тим що стрілочні функції беруть this з зовнішнього лексичного середовища???
Жодної проблеми, ви відповіли самі на своє питання в останньому реченні. Не варто використовувати стрілочні функції всюди як заміну оголошенню, вони мають своє призначення.
this не використовується в стрілочних функціях.
@@ПростоЕвгений-е3б this використовується в стрілочних функціях в цьому якраз їхня фішка, при використанні стрілочної функції відсутня втрата контексту в callback функціях
@@andriidou8023 я мав наувазі не так, я к в звичайних функціях, дякую, що виправили мене.
Сколько трактористов?
Ничего себе какой тонкий юмор!
Классно все равно бы коэффициент найти бы! Хорошо было бы!
transform: translateX(-50%)
14:15 а так интересно получается потому, что JS понимает это выражение как строку. А значит, например 20 + 10 + рх = 2010рх. Динамическая типизация это же неоспоримое преимущество! (минутка хейта JS)
Так это ж удобно) Чтобы исправить это нужно добавить один символ, зато в похожей ситуации можно не приводить числовое значение к строке, чтобы добавить 'px'
@@странствие тут дело не в одном символе. Динамическая типизация выглядит удобной, но, в последствии, приносит кучу проблем. Настолько кучу, что целый язык выдумали, Type Script, чтобы бороться с "удобствами" динамической типизации в JS.
@@simplewebdev1098 какие же проблемы она приносит?
@@странствие основных две:
1) неявное приведение типов иногда подкидывает головную боль, особенно если мало опыта. Но с этим жить можно.
2) необходимость проверки параметров функций, если предполагается, что ей будут пользоваться другие люди. И вот это в крупных проектах становится серьёзной проблемой. Ведь я вынужден проконтролировать, что пользователь моей функции правильно передаст параметры нужного типа. В языках со строгой типизацией за меня это сделает компилятор. Это, собственно, одна из основных причин появления Type Script.
Ну и так, по мелочи: указание типа переменной, параметра функции и т.п. помогает документировать код, ведь уже при объявлении я понимаю, какого типа данные тут должны быть.
@@simplewebdev1098 1) ну о какой головной боли ты говоришь-то? Обычно ошибку сразу заметно, так что она решается за пару секунд.
2) а смысл их проверять? используй toString() или унарный плюс, вот и все. Или можно пример кода, а то я не совсем понимаю
у меня с onchange не работает только с oninput.
у когото роботает с onchange?
onchange срабатывает когда вы окончили изменение состояния. Т.е. грубо говоря отпустили ползунок, поэтому и не работает.
@@itgid в таком случае не было бы такой "анимации" а просто "прыжок" блока с значением:))
@@norde_5741 согласен. Тогда код на codepen - и сюда ссылку.
что гадать то? transform: translateX(-50%) width бегунка убрать. и всегда по центру будет
Коэф 1,9
rangeNum.style.left = this.value - 5 * this.value * 0.01 +'px'; вот так более-менее
Число над слайдером? =)
Над ползунком, или над range инпутом
...блин реально слайдером зовётся...
if (value < 3) {
upperRangeLogger.style.left = 6 +'px';
} else if (value < 10 && value > 2) {
upperRangeLogger.style.left = value*2.5 + 'px';
} else {
upperRangeLogger.style.left = value*1.42 + 'px';
}