Не работает скрипт

Статус
Закрыто для дальнейших ответов.

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
Уважаемые знатоки - подскажите, пожалуйста, почему не работают скрипты на сайте?

Хочу поставить этот скрипт - пример - что уже с ним не делал - не работает.

HTML код - вставлял и в страницу, и в header.php

<div id="container">
<div id="c-container">
<canvas id="c">Sorry.</canvas>
</div>
<div id="c2-container">
<canvas id="c2">Sorry.</canvas>
</div>

</div>
CSS код - то же самое - и в страницу, и в header.php -

<style type="text/css">
@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700 i,900,900i';

body,
html {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
background-color: black;
overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
margin: 0;
padding: 0;
}

#container {
width: 100vw;
height: 100vh;
position: relative;
float: left;
opacity: 0;
}

#c-container,
#c2-container {
width: 100vw;
height: 80vh;
position: absolute;
top: 0;
left: 0;
}

canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>

JS код - то же самое - и в страницу, и в footer.php -

<script type='text/javascript>
$(window).bind('load', function () {
const raf = function (entry) {
window.requestAnimationFrame(entry);
};
const random = function (min, max) {
max = max + 1;
return Math.floor(Math.random() * (max - min) + min);
}
var app = {
init: function () {
this.cacheDOM();
this.style();
},
cacheDOM: function () {
this.container = $('#container');
this.images = $('img');

this.mouseX = null;
this.mouseY = null;
},
style: function () {
this.images.imagesLoaded(function () {
$(window).resize(function initial() {
TweenMax.set(app.container, {
opacity: 1
});
return initial;
}());
});
},
cursorEvents: function (e) {
app.mouseX = e.clientX;
app.mouseY = e.clientY;
}
}

app.init();

var cContainer = $('#c-container'),
c = document.getElementById('c'),
c2Container = $('#c2-container'),
c2 = document.getElementById('c2'),
cx = c.getContext('2d'),
c2x = c2.getContext('2d'),
particleIndex = 0,
particles = {},
particleNum = 1,
particlesLoaded = false,
Particle,
Particle2,
canvas,
canvas2;

c.width = $('#c').outerWidth();
c.height = $('#c').outerHeight();

c2.width = $('#c2').outerWidth();
c2.height = $('#c2').outerHeight();

//INITIAL CANVAS DRAW
cx.fillStyle = 'rgba(0,0,0,1)';
cx.fillRect(0, 0, c.width, c.height);
c2x.fillStyle = 'rgba(0,0,0,1)';
c2x.fillRect(0, 0, c2.width, c2.height);

function particleFactory(thisCanvas, thisContext, thisParticleName, thisCanvasFunction) {

var particleIndex = 0,
particles = {},
particleNum = 2,
particlesLoaded = false;

thisParticleName = function () {
this.r = 8;
this.rStart = this.r;
this.rIncrement = this.r * -0.01;
this.x = thisCanvas.width / 2;
this.y = thisCanvas.height / 2;

this.vxIsNegative = random(1,2);

this.originTriggered = false;
this.vx = this.vxIsNegative === 1 ? random(0,50) * -0.1 : random(0,50) * 0.1;
this.vxMult = random(10,20) * 0.1;
this.vy = random(-10, 10);
this.vyMult = random(2,6) * -0.1;
this.opacityLimit = 1;
this.opacity = 1;
this.opacityIncrement = 0.05;
this.opacityReversing = false;
this.gravity = 1;
this.framerate = 0;
this.framerateCounter = this.framerate;
this.counter = 0;
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.life = 0;
this.maxLife = random(0, 100);
this.hue = random(30, 60);
this.light = random(50, 100);
this.color = `hsla(${this.hue},100%,${this.light}%,${this.opaci ty})`;

this.bounced = false;

this.duration = 60;
this.durationTotal = this.duration + this.opacityLimit * 10;
this.durationCounter = 0;
}

thisParticleName.prototype.draw = function () {

if ((!this.originTriggered) && (app.mouseX != null)) {
this.originTriggered = true;
this.x = app.mouseX;
this.y = app.mouseY;
}
this.color = `hsla(${this.hue},100%,${this.light}%,${this.opaci ty})`;
thisContext.fillStyle = this.color;
thisContext.beginPath();
thisContext.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
thisContext.fill();

//START DRAW OPERATION
this.r += this.rIncrement;
this.x += this.vx;
this.y += this.vy;
this.durationCounter++;
if (this.vx === 0) {
this.vx++;
}
if (this.vxIsNegative === 1) {
this.vx
}
if (this.vy === 0) {
this.vy++;
}
if (this.y > thisCanvas.height - this.rStart) {
if (!this.bounced) {
this.vx *= this.vxMult;
} else {
this.vx *= 0.9;
}
this.bounced = true;
this.vy *= this.vyMult;
this.y = thisCanvas.height - this.rStart;
}
this.vy += this.gravity;
if ((this.r <= 0)) {
delete particles[this.id];
}
this.life++;
//END DRAW OPERATION
}

thisCanvasFunction = function () {
thisContext.globalCompositeOperation = 'source-over';
thisContext.fillStyle = 'rgba(0,0,0,1)';
thisContext.fillRect(0, 0, thisCanvas.width, thisCanvas.height);
if (!particlesLoaded) {
for (var i = 0; i < particleNum; i++) {
new thisParticleName();
}
}
thisContext.globalCompositeOperation = 'lighter';
for (var i in particles) {
particles.draw();
}
}
setInterval(thisCanvasFunction, 15);
}

$(window).resize(function initial() {
window.addEventListener('mousemove', app.cursorEvents, false);

c.width = $('#c').outerWidth();
c.height = $('#c').outerHeight();

c2.width = $('#c2').outerWidth();
c2.height = $('#c2').outerHeight();

return initial;
}());

particleFactory(c, cx, Particle, canvas);
particleFactory(c2, c2x, Particle2, canvas2);

TweenMax.set(c2Container, {
transformOrigin: 'center bottom',
scaleY: -1,
opacity: 1
});

TweenMax.set(c2, {
filter: 'blur(10px)'
});
});
</script>
Подключил

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>

Ничего не помогает. Что я делаю не так?
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Надо смотреть в консоли браузера, там должны быть ошибки показаны.
 

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
ошибок нет - предупреждения есть. На некоторых сайтах, просматривая код, показывает по 5-7 ошибок - и всё работает, а тут вот ....
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Сложно гадать на приведённом коде из примера.
Выкладывай на хостинг свои файлы, там и будем смотреть.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Это не поможет. Нам эти файлы не запустить.
Выкладывай в онлайн, где можно посмотреть сгенерированный код.
 

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
Как я понимаю - это ссылка на сайт, где установлен код?

Это тестовый сайт - на рабочем боюсь пока пробовать. Тема и всё остальное - как на рабочем сайте

http://test.mastervdnr.pp.ua/

не пойму - на сайте вот это - и больше ничего - и ничего не работает
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
1) Там у тебя подключается hueman/assets/front/js/scripts.min.js, он вызывает ошибку.
2) Так уже подключатся jQuery, второй раз подключать не надо. Правда там устаревшая версия, поэтому либо её надо обновить, либо отключить. Хотя это, вроде, не должно вызывать конфликтов.
 

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
А можно определить, что именно в этом файле вызывает ошибку?

Файл в архиве

Лучше обычный , чем мин
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
В консоли браузера всё написано
Uncaught TypeError: Cannot read property 'clientHeight' of undefined at f
Но так как файл минифицирован - точно место найти проблематично.
Ругается, что не может найти clientHeight у какого-то элемента, потому что этого элемента на странице, скорее всего, нет.

Обычно рядом разработчики размещают не минифицированный файл. Надо его подключить вместо минифицированного и тогда можно будет посмотреть.
Либо можно самому "разминифицировать" через любой онлайн сервис: в гугле "js beautiful online" и выбираем понравившийся.
 

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
Я так и сделал - скинул сначала мин файл, потом нашёл обычный (без мин) и скинул его следом


Ещё такой вопрос:

Почему он ругается, что не может найти clientHeight у какого-то элемента? До того, как был вставлен код - всё было хорошо - значит этот код куда-то дел этот clientHeight?
 

Вложения

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Ещё раз: прикреплённые файлы ничего не дадут, всё надо смотреть онлайн.
Сейчас же это выглядит: "у меня машина не едет, вот посмотрите колесо".
На том сайте надо подключать нормальною версию, а не min и потом уже смотреть.
 

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
А где его нужно подключать? Не могу найти это место
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Где-то в папке с темой.
Скорее всего в файле header.php, либо functions.php.
Рекомендую освоить "поиск текста по файлам".
 

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
В Нотепад++ - я уже давно освоил - он его там не находит.

Попробовал чуток по-другому вставить коды - страница нормально работает - ошибок не выдаёт - но по идее сам скрипт не работает - когда открываю его в файловом менеджере на хостинге - первый скрипт - красный, а закрывающий - жёлтый.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
"поиск текста по файлам"
Что гугл рекомендует по такому запросу?
 

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
Теперь понял - а можно где-нибудь или как-нибудь проверить - рабочий скрипт или нет?

Здесь он работает https://codepen.io/waisbren89/pen/gwvVpP - а у меня - по идее нет.

Я правильно понимаю на счёт цвета? У рабочего скрипта должны быть все красные script?
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Без понятия что там показывает файловый менеджер на хостинге. Может и погоду на Марсе.
Смотреть надо в консоли браузера.
 

serhiokravadnr

Active Member
Регистрация
07.12.2017
Сообщения
36
проверял только что скрипт весь на http://jsfiddle.net/ - он тоже не работает - чёрный экран и всё

Пора наверное закрывать эту тему - ничего не получается
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 137
Если продолжать гнуть свою лень и не пытаться делать что говорят, то да - шансов нет.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ