Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 26.07.2019, 18:39   #1
Алексей Юрьевич.
Новичок
 
Регистрация: 26.07.2019
Сообщений: 2
Репутация: 10
Печаль Не работает на сайте JS. Очень нужна ваша помощь.

Ребята, всем привет. Я новичок в JS.
Вообщем есть код, который отлично работал в Fiddle (онлайн редактор js)
Но не работал в на сайте.. Не мог понять почему.
Я ковырялся дня 2, по форумам искал ответы.
Потом вдруг он перестал и в редакторе работать.

Суть когда в том, что бы срабатывало однократно аудио
при скролинге до определенного дива с классом "elem"
Вот собственно Html:
Код:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>

<div style="height: 130vh;width: 100%;background: #111;" ></div>
<div style="height: 100px;width: 100%;background: #ccc;" class="elem"></div>
<div style="height: 600px;width: 100%;background: #111;" ></div>
</body>
</html>
Пожалуйста, оформляйте Ваш код согласно правилам.

А это JS:
Код:
var fired = false;
var target = $('.elem');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
  var winScrollTop = $(this).scrollTop();
  if(winScrollTop > scrollToElem && fired === false){
   var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
audio.play();fired = true;
  }
});

Последний раз редактировалось Вадим Мошев; 27.07.2019 в 10:58.
Алексей Юрьевич. вне форума   Ответить с цитированием
Старый 26.07.2019, 22:05   #2
Serge_Bliznykov
МегаМодератор
СуперМодератор
 
Регистрация: 09.01.2008
Сообщений: 25,829
Репутация: 5617
По умолчанию

подозреваю, что ошибка возникает
Uncaught (in promise) DOMException
см. https://toster.ru/q/551481

попробуйте такой код:

Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>

<div style="height: 130vh;width: 100%;background: #111;" ></div>
<div style="height: 100px;width: 100%;background: #ccc;" class="elem"></div>
<div style="height: 600px;width: 100%;background: #111;" ></div>
</body>
<script>
window.scrollTo(0, 0); // переместить страницу вверх
var fired = false;
var target = $('.elem');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
  var winScrollTop = $(this).scrollTop();
  if(winScrollTop > scrollToElem && fired === false){
   fired = true;
   var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
     var promise = audio.play();
     if (promise) {
        //Older browsers may not return a promise, according to the MDN website
        promise.catch(function(error) { console.error(error); });
    }
}});
</script>
</html>
Serge_Bliznykov вне форума   Ответить с цитированием
Старый 30.07.2019, 18:07   #3
Алексей Юрьевич.
Новичок
 
Регистрация: 26.07.2019
Сообщений: 2
Репутация: 10
По умолчанию

Спасибо БОЛЬШОЕ.♡ Буду изучать!
Алексей Юрьевич. вне форума   Ответить с цитированием
Ответ

Опции темы

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ну очень нужна ваша помощь(((((( kinza Помощь студентам 4 08.06.2009 15:27
мне еще ваша помощь нужна очень umiko Помощь студентам 9 22.05.2009 09:57
Очень нужна Ваша помощь!!! innadans Microsoft Office Excel 2 17.05.2009 21:07


14:29.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.