Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » вопросы по javascript

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

Открыть новую тему     Написать ответ в эту тему

Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
приветствую, я в недоумении - может быть подскажете, где лежит проблема.  
Есть небольшая интерактивная анимация, которая на сайте работала нормально примерно около года, а сейчас вдруг отвалилась в некоторых браузерах. Пример страницы, где она реализована. (в самом низу, пепед футером, открытый принтер). По клику на анимированные кружки должны появляться соот-щие описания. Сейчас у меня не работает в chrome и edge, но нормально работает в firefox и safari.  
Код подтягивается с файла com_custom.js, весь другой код из этого файла работает штатно.  
Почему то ошибок в отладчике не вижу - и самое удивительное, что у меня локальная версия сайта, где практически все 1 в 1, кроме картинок - те же версии по, те же версии браузеров - все работает нормально.  
В чем может быть дело?

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 10:13 08-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum
не понимаю зачем так писать код, мешая jquery и чистый js. ну да ладно.
проблема у вас в том, что когда выполняется

Цитата:
(function() {
    var buttons = document.querySelectorAll(".lg-hotspot__button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", selectHotspot);
    }
}
)();

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

Код:
$(document).on('click', '.lg-hotspot__button', selectHotspot);

единственное может быть проблема в порядке выполнения обработчика, так как в разных местах добавляете классы и проверяете их наличие. добавление может оказаться после проверки наличия.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 10:32 08-02-2021 | Исправлено: Mavrikii, 10:37 08-02-2021
Weinaum



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii

Цитата:
нужных элементов на странице еще нет. выполнять этот код нужно когда DOM уже загружен.

да, спасибо - сейчас проверил, банально window.onload или $(document).ready  решают проблему... смутило то, что в каких то браузерах работает.  

Цитата:
не понимаю зачем так писать код, мешая jquery и чистый js

На самом деле разными людьми писался, но вы правы, все равно неправильно было все в один файл... перепишем.

Всего записей: 2152 | Зарегистр. 18-06-2006 | Отправлено: 12:15 08-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum

Цитата:
все равно неправильно было все в один файл

я имел в виду не разные файлы, а что часть кода написана так, другая иначе.
 

Цитата:
window.onload или $(document).ready

первое плохо - будет ждать пока загрузится все, включая картинки.
второе - можно заменить просто $(function(){});, но если обработчик цепляется к document как я показал, то роли нет вообще где и когда.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 21:35 08-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Граждане, кто может подсказать, как этот код переделать в простой JS?

Код:
jQuery(function ($) {
 
$('.progress-meter').css('animation', 'bar 2s linear infinite forwards');
 
});

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:06 13-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Код:
document.addEventListener('DOMContentLoaded', function(event) {
  var elements = document.getElementsByClassName('progress-meter');
  for (var el of elements)
     el.style.animation = 'bar 2s linear infinite forwards';
});

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 01:17 13-02-2021 | Исправлено: Mavrikii, 01:17 13-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо за ответ! Но с другой стороны, столько текста вместо jQuery? Тогда уж лучше пусть jQuery остаётся, наверное.
Как писал в теме по CSS, прогресс бар, а именно анимация полосок, почему-то глючит в Сафари. Когда переместил код анимации из CSS в JS, то анимация нормально стала работать.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 01:53 13-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Но с другой стороны, столько текста вместо jQuery? Тогда уж лучше пусть jQuery остаётся, наверное

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

Цитата:
а именно анимация полосок, почему-то глючит в Сафари.

100 раз говорил, у меня нет Сафари.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 03:26 13-02-2021 | Исправлено: Mavrikii, 03:26 13-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, почему если в файле есть этот код, то анимация появления уровня не работает?

Код:
var mydiv = $('.progress');
        mydiv.each(function(){
            var that = $(this);
            that.html(that.html().replace(/f/g, '&#xf'));            
    });

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 16:47 15-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Потому что если этот код применяется после подключения к потомкам .progress каких либо обработчиков событий, то они удаляются. Ибо идет переписывание DOM структуры страницы.  
Проще говоря, берется кусок кода, преобразуется в текстовый вид (удаляя все функциональные обработчики) и снова назначается тому же месту в коде после замены символа. Без этих обработчиков.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 19:02 15-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Это код, который заменяет \f на &#xf для показа FA в тултипе balloon.css. Пробовал использовать progress-meter вместо progress, тогда анимация работает, но вместо значков FA показывается код.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:29 15-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Это код, который заменяет \f на &#xf для показа FA в тултипе balloon.css.

мне все равно что это, я вам написал причину.
и, вроде бы, описал как это избежать.

Цитата:
если этот код применяется после подключения к потомкам

ну, что подсказывает логика в данной ситуации?

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 23:34 15-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Честно? Не знаю.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 23:50 15-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Честно? Не знаю.

сначала поменять, а потом нацепить обработчики событий.
либо обработчик событий цеплять к общему, неизменяемому родителю.
 
показываю..
https://jsfiddle.net/w61svoc7/
 
но
https://jsfiddle.net/a65bf83k/1/

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 23:53 15-02-2021 | Исправлено: Mavrikii, 00:08 16-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подскажите, плиз, есть ли онлайн конвертер из JS в jQuery? И можно ли как-то переделать этот код в jQuery?

Код:
"use strict";
[].map.call(document.querySelectorAll('[anim="ripple"]'), el => {
    el.addEventListener('click', e => {
        e = e.touches ? e.touches[0] : e;
        const r = el.getBoundingClientRect(), d = Math.sqrt(Math.pow(r.width, 2) + Math.pow(r.height, 2)) * 2;
        el.style.cssText = `--s: 0; --o: 1;`;
        el.offsetTop;
        el.style.cssText = `--t: 1; --o: 0; --d: ${d}; --x:${e.clientX - r.left}; --y:${e.clientY - r.top};`;
    });
});


Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 18:43 21-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
есть ли онлайн конвертер из JS в jQuery?

только ручками.
 

Цитата:
И можно ли как-то переделать этот код в jQuery

jQuery это надстройка над js (фреймворк), а значит что то можно и переделать, но зачем?

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 23:25 21-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Может и не надо. Просто, с этим кодом всё работает, но в программе почему-то показывает ошибку на вторую строку:
SyntaxError: Unexpected token '>'

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:06 22-02-2021
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
но в программе почему-то показывает ошибку на вторую строку:

в программе устаревший браузер/js движок, не поддерживающий ES6 (вариант JS с 2015 года).
http://helpexe.ru/programmirovanie/chto-takoe-es6-i-chto-nuzhno-znat-programmistam

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 00:14 22-02-2021
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Понятно тогда, спасибо за ответ!

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 00:22 22-02-2021
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Подскажите, в чем разница между
alert (true)
!alert (true)

Всего записей: 3025 | Зарегистр. 24-10-2002 | Отправлено: 17:23 24-02-2021 | Исправлено: Death_INN, 17:24 24-02-2021
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

Компьютерный форум Ru.Board » Интернет » Web-программирование » вопросы по javascript


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru