Почему в браузерах не срабатывает скрипт JS?

Question

[FlexStat]

Имеется скрипт таймера с прогресс баром, суть такая, что в песочницах скрипт отрабатывает корректно

playcode.io/128280?tabs=console&index.html&output

Но в браузерах(firefox, chrome) ничего не происходит (в консоли все ок), как только не пытался. Сначала грешил на то, что не подключается корректно jquery, но с этим не должно быть проблем

Вот сайт, где пытаюсь запустить скрипт: dev.poest.eu

Может, кто сталкивался с подобным. Заранее спасибо.

Comments

[Максим Тимофеев]

что в песочницах скрипт отрабатывает корректно

Но в браузерах

А песочницу Вы не через браузер открываете? У Вас codepen standalone и jsfeedle portable?

Answer 1

[Stalker_RED]

Потому что на момент выполнения строки $('.timeline').each(function(){
элемент <div class="timeline"></div> не существует.

_{и вообще, это жесть}

Comments

[FlexStat]

Спасибо.

[AngReload]

Чтобы решить эту проблему нужно перенести скрипт в конец тега body или обернуть в

$( document ).ready(function() {
 // ваш код здесь
})

Answer 2

[Ihor Bratukh]

Простой jQuery плагин.



Инициализация:

$('.timer').timer({
	date: '12/25/2018',
	language: 'RU',
	template: function(time) {
		return `
			<span>
				Осталось
				${time.hours.value} ${time.hours.text},
				${time.minutes.value} ${time.minutes.text} и 
				<span v-if="${time.seconds.value > 5}">
					${time.seconds.value} ${time.seconds.text}
				</span>
				<span v-else style="color:red;">
					${time.seconds.value} ${time.seconds.text}
				</span>
			</span>
		`;
	}
});

P.S тема для которой был сделан плагин: перейти.