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

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

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в 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 117 118 119 120 121 122 123 124 125

Открыть новую тему

Написать ответ в эту тему

Silver Member

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

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

Всего записей: 2156 | Зарегистр. 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);

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

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

Silver Member

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

Mavrikii

Цитата:

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

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

Цитата:

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

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

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

Mavrikii

Platinum Member

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

Weinaum

Цитата:

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

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

Цитата:

window.onload или $(document).ready

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

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

Silver Member

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

Граждане, кто может подсказать, как этот код переделать в простой JS?

Код:

jQuery(function ($) {

$('.progress-meter').css('animation', 'bar 2s linear infinite forwards');

});

Всего записей: 3478 | Зарегистр. 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';
});

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

Silver Member

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

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

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

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

Цитата:

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

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

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

Silver Member

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

Просьба подсказать, почему если в файле есть этот код, то анимация появления уровня не работает?

Код:

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

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

Mavrikii

Platinum Member

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

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

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

Silver Member

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

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

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

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

Цитата:

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

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Честно? Не знаю.
	Всего записей: 3478 \| Зарегистр. 30-06-2002 \| Отправлено: 23:50 15-02-2021

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

сначала поменять, а потом нацепить обработчики событий.
либо обработчик событий цеплять к общему, неизменяемому родителю.

показываю..
https://jsfiddle.net/w61svoc7/

но
https://jsfiddle.net/a65bf83k/1/

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

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};`;
});
});

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

Mavrikii

Platinum Member

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

WONDROUS

Цитата:

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

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

Цитата:

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

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

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

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

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

WONDROUS Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii Понятно тогда, спасибо за ответ!
	Всего записей: 3478 \| Зарегистр. 30-06-2002 \| Отправлено: 00:22 22-02-2021

Death_INN Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Подскажите, в чем разница между alert (true) !alert (true)
	Всего записей: 3952 \| Зарегистр. 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 117 118 119 120 121 122 123 124 125

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

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

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

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC