Einbindung JS Particle

Foxly · Jul 15th 2020

Schönen guten Tag,

ich habe mich jetzt durch sämtliche Beiträge gelesen welche mit einbinden von JS in der Suche auftauchen. Finde aber meinen Fehler nicht. Ich würde gerne in einer Box ein Script verwenden (https://github.com/JulianLaval/canvas-particle-network)

eingebunden habe ich es mit (die particle-network.min.js liegt dabei im Ordner js )

JavaScript

Code

<div id="particle-canvas"></div>

<script data-relocate="true" src="../js/particle-network.min.js"></script>

<script>
  var canvasDiv = document.getElementById('particle-canvas');
      var options = {
              particleColor: '#fff',
              interactive: true,
              speed: 'medium',
              density: 'medium'

};

var particleCanvas = new ParticleNetwork(canvasDiv, options);

</script>

Display More

im Stil ist folgender CSS hinterlegt:

CSS

Code

#particle-canvas {
    width:100%;
    height:100%;

}

Jedoch tauchen nur Fehler in der Dev-Konsole des Browsers auf. Ich bin etwas überfragt .

Grüße

Fightcrasher · Jul 15th 2020

Hallo so ein ähnliches Problem hätte ich auch Mal und ich erinnere mich drann das ich den Teil mit dem .js entfernen müsste da der Cote sein eigenes hatt. Du kannst es ja Mal probieren ob das geht.

Natürlich ohne Gewähr, aber testen kann man es ja ein schaden wird dadurch nicht entstehen.

Aze · Jul 15th 2020

Wenn ich hier Dünnpfiff von mir geben sollte, bitte ich um Verbesserung, aber müsste bei <script>var canvasDiv...</script> nicht auch ein data-relocate="true" hinzugefügt werden?

**Tim Düsterhus** · Jul 15th 2020

Hallo,

Quote from Layz

Jedoch tauchen nur Fehler in der Dev-Konsole des Browsers auf. Ich bin etwas überfragt .

hilfreich wäre es die Fehler zu nennen.

Es ist an dieser Stelle aber festzustellen, dass die JavaScript-Datei ein AMD-Modul ist und daher mit Hilfe von require.js geladen werden sollte.

Foxly · Jul 15th 2020

Quote from Tim Düsterhus

Hallo,
hilfreich wäre es die Fehler zu nennen.

Es ist an dieser Stelle aber festzustellen, dass die JavaScript-Datei ein AMD-Modul ist und daher mit Hilfe von require.js geladen werden sollte.

Code: Fehler

(index):1219 Uncaught ReferenceError: ParticleNetwork is not defined
    at (index):1219
(anonymous) @ (index):1219
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at (index):1005
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ (index):1005
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):947
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
_executeCallbacks @ WCF.Combined.min.js?v=1594660881:28
execute @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ (index):1055
ScDereferer.js?t=1594660881:27 Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at Object.init (ScDereferer.js?t=1594660881:27)
    at (index):1065
    at WoltLabSuite.Core.min.js?v=1594660881:21
init @ ScDereferer.js?t=1594660881:27
(anonymous) @ (index):1065
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):1059
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
_executeCallbacks @ WCF.Combined.min.js?v=1594660881:28
execute @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ (index):1294
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21

Display More

Ich habe mal die particle-network.js bearbeitet und diese eingebunden, statt der .min.js

Code

<script data-relocate="true">
  $(function() {
    Hier den Code von particle-network.js eingefügt
  });
</script>

darauf folgen diese Fehler in der Console:

Code

Uncaught ReferenceError: ParticleNetwork is not defined
    at (index):1219
(anonymous) @ (index):1219
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at (index):1005
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ (index):1005
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):947
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
_executeCallbacks @ WCF.Combined.min.js?v=1594660881:28
execute @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ (index):1055
ScDereferer.js?t=1594660881:27 Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at Object.init (ScDereferer.js?t=1594660881:27)
    at (index):1065
    at WoltLabSuite.Core.min.js?v=1594660881:21
init @ ScDereferer.js?t=1594660881:27
(anonymous) @ (index):1065
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):1059
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
_executeCallbacks @ WCF.Combined.min.js?v=1594660881:28
execute @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ (index):1294
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21

Display More

Christopher Walz · Jul 15th 2020

Versuch mal:

Code

<script data-relocate="true">define.amd = undefined;</script>
<script data-relocate="true" src="../js/particle-network.min.js"></script>
<script data-relocate="true">define.amd = __require_define_amd;</script>

**Tim Düsterhus** · Jul 15th 2020

Hallo,

das riecht verdächtig nach dem was ich vermutet habe. Teste folgendes:

JavaScript

require(['../particle-network.min'], function (ParticleNetwork) {
 // stuff
});

Foxly · Jul 15th 2020

Quote from Christopher Walz

Versuch mal:

Code

<script data-relocate="true">define.amd = undefined;</script>
<script data-relocate="true" src="../js/particle-network.min.js"></script>
<script data-relocate="true">define.amd = __require_define_amd;</script>

Kein Fehler in der Console, dafür wird aber auch nur ein Balken angezeigt

Quote from Tim Düsterhus
Hallo,

das riecht verdächtig nach dem was ich vermutet habe. Teste folgendes:
JavaScript
require(['../particle-network.min'], function (ParticleNetwork) {
 // stuff
});

Wo soll das angepasst werden? So:?

Code

<script data-relocate="true">
    require(['../particle-network.min'], function (ParticleNetwork) {
 // stuff
});
</script>

**Tim Düsterhus** · Jul 15th 2020

Hallo,

Quote from Layz

Wo soll das angepasst werden? So:?

Ja. Ich habe es jetzt aber einmal selbst getestet, das Skript ist nicht besonders schön programmiert. Du brauchst:

HTML

<script data-relocate="true">
require(['../particle-network.min'], function (dummy) {
 new window.ParticleNetwork(…);
});
</script>

Foxly · Jul 15th 2020

Erstmal danke für die hilfe ich stelle mich aber gerade etwas an.

In die Box also:

HTML

<div id="particle-canvas"></div>

<script data-relocate="true" src="../js/particle-network.min.js">
require(['../particle-network.min'], function (dummy) {
 new window.ParticleNetwork(…);
});
</script>

<script data-relocate="true">
  var canvasDiv = document.getElementById('particle-canvas');
      var options = {
              particleColor: '#fff',
              interactive: true,
              speed: 'medium',
              density: 'medium'

};

var particleCanvas = new ParticleNetwork(canvasDiv, options);

</script>

Display More

oder muss die particle-network.min.js so angepasst werden?

JavaScript: particle-network.min.js

require(['../particle-network.min'], function(dummy) {
    new window.ParticleNetwork(…);
! function(a) { var b = "object" == typeof self && self.self === self && self || "object" == typeof global && global.global === global && global; "function" == typeof define && define.amd ? define(["exports"], function(c) { b.ParticleNetwork = a(b, c) }) : "object" == typeof module && module.exports ? module.exports = a(b, {}) : b.ParticleNetwork = a(b, {}) }(function(a, b) {
    var c = function(a) { this.canvas = a.canvas, this.g = a.g, this.particleColor = a.options.particleColor, this.x = Math.random() * this.canvas.width, this.y = Math.random() * this.canvas.height, this.velocity = { x: (Math.random() - .5) * a.options.velocity, y: (Math.random() - .5) * a.options.velocity } };
    return c.prototype.update = function() {
        (this.x > this.canvas.width + 20 || this.x < -20) && (this.velocity.x = -this.velocity.x), (this.y > this.canvas.height + 20 || this.y < -20) && (this.velocity.y = -this.velocity.y), this.x += this.velocity.x, this.y += this.velocity.y
    }, c.prototype.h = function() { this.g.beginPath(), this.g.fillStyle = this.particleColor, this.g.globalAlpha = .7, this.g.arc(this.x, this.y, 1.5, 0, 2 * Math.PI), this.g.fill() }, b = function(a, b) { this.i = a, this.i.size = { width: this.i.offsetWidth, height: this.i.offsetHeight }, b = void 0 !== b ? b : {}, this.options = { particleColor: void 0 !== b.particleColor ? b.particleColor : "#fff", background: void 0 !== b.background ? b.background : "#1a252f", interactive: void 0 !== b.interactive ? b.interactive : !0, velocity: this.setVelocity(b.speed), density: this.j(b.density) }, this.init() }, b.prototype.init = function() {
        if (this.k = document.createElement("div"), this.i.appendChild(this.k), this.l(this.k, { position: "absolute", top: 0, left: 0, bottom: 0, right: 0, "z-index": 1 }), /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background)) this.l(this.k, { background: this.options.background });
        else {
            if (!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background)) return console.error("Please specify a valid background image or hexadecimal color"), !1;
            this.l(this.k, { background: 'url("' + this.options.background + '") no-repeat center', "background-size": "cover" })
        }
        if (!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor)) return console.error("Please specify a valid particleColor hexadecimal color"), !1;
        this.canvas = document.createElement("canvas"), this.i.appendChild(this.canvas), this.g = this.canvas.getContext("2d"), this.canvas.width = this.i.size.width, this.canvas.height = this.i.size.height, this.l(this.i, { position: "relative" }), this.l(this.canvas, { "z-index": "20", position: "relative" }), window.addEventListener("resize", function() {
            return this.i.offsetWidth === this.i.size.width && this.i.offsetHeight === this.i.size.height ? !1 : (this.canvas.width = this.i.size.width = this.i.offsetWidth, this.canvas.height = this.i.size.height = this.i.offsetHeight, clearTimeout(this.m), void(this.m = setTimeout(function() {
                this.o = [];
                for (var a = 0; a < this.canvas.width * this.canvas.height / this.options.density; a++) this.o.push(new c(this));
                this.options.interactive && this.o.push(this.p), requestAnimationFrame(this.update.bind(this))
            }.bind(this), 500)))
        }.bind(this)), this.o = [];
        for (var a = 0; a < this.canvas.width * this.canvas.height / this.options.density; a++) this.o.push(new c(this));
        this.options.interactive && (this.p = new c(this), this.p.velocity = { x: 0, y: 0 }, this.o.push(this.p), this.canvas.addEventListener("mousemove", function(a) { this.p.x = a.clientX - this.canvas.offsetLeft, this.p.y = a.clientY - this.canvas.offsetTop }.bind(this)), this.canvas.addEventListener("mouseup", function(a) { this.p.velocity = { x: (Math.random() - .5) * this.options.velocity, y: (Math.random() - .5) * this.options.velocity }, this.p = new c(this), this.p.velocity = { x: 0, y: 0 }, this.o.push(this.p) }.bind(this))), requestAnimationFrame(this.update.bind(this))
    }, b.prototype.update = function() {
        this.g.clearRect(0, 0, this.canvas.width, this.canvas.height), this.g.globalAlpha = 1;
        for (var a = 0; a < this.o.length; a++) {
            this.o[a].update(), this.o[a].h();
            for (var b = this.o.length - 1; b > a; b--) {
                var c = Math.sqrt(Math.pow(this.o[a].x - this.o[b].x, 2) + Math.pow(this.o[a].y - this.o[b].y, 2));
                c > 120 || (this.g.beginPath(), this.g.strokeStyle = this.options.particleColor, this.g.globalAlpha = (120 - c) / 120, this.g.lineWidth = .7, this.g.moveTo(this.o[a].x, this.o[a].y), this.g.lineTo(this.o[b].x, this.o[b].y), this.g.stroke())
            }
        }
        0 !== this.options.velocity && requestAnimationFrame(this.update.bind(this))
    }, b.prototype.setVelocity = function(a) { return "fast" === a ? 1 : "slow" === a ? .33 : "none" === a ? 0 : .66 }, b.prototype.j = function(a) { return "high" === a ? 5e3 : "low" === a ? 2e4 : isNaN(parseInt(a, 10)) ? 1e4 : a }, b.prototype.l = function(a, b) { for (var c in b) a.style[c] = b[c] }, b
});
});

Display More

**Tim Düsterhus** · Jul 15th 2020

Hallo,

Quote from Layz

oder muss die particle-network.min.js so angepasst werden?

die Datei ist nicht anzupassen. Der Code gehört in die Box / in das Template.

Foxly · Jul 15th 2020

Huhu,

Quote from Tim Düsterhus

Hallo,
die Datei ist nicht anzupassen. Der Code gehört in die Box / in das Template.

das dachte ich mir, dennoch wirft die Console folgende Fehler:

Code

(index):1234 Uncaught ReferenceError: ParticleNetwork is not defined
    at (index):1234
(anonymous) @ (index):1234
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at (index):1005
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ (index):1005
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):947
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
_executeCallbacks @ WCF.Combined.min.js?v=1594660881:28
execute @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ (index):1055
ScDereferer.js?t=1594660881:27 Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at Object.init (ScDereferer.js?t=1594660881:27)
    at (index):1065
    at WoltLabSuite.Core.min.js?v=1594660881:21
init @ ScDereferer.js?t=1594660881:27
(anonymous) @ (index):1065
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):1059
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
_executeCallbacks @ WCF.Combined.min.js?v=1594660881:28
execute @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ (index):1309
(index):949 Uncaught (in promise) TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at WCF.Combined.min.js?v=1594660881:28
    at WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):949
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:7
forEach @ WoltLabSuite.Core.min.js?v=1594660881:6
forEach @ WoltLabSuite.Core.min.js?v=1594660881:7
trigger @ WoltLabSuite.Core.min.js?v=1594660881:7
(anonymous) @ WCF.Combined.min.js?v=1594660881:28
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
_executeCallbacks @ WCF.Combined.min.js?v=1594660881:28
execute @ WCF.Combined.min.js?v=1594660881:28
init @ WCF.Combined.min.js?v=1594660881:47
r @ WCF.Combined.min.js?v=1594660881:24
(anonymous) @ (index):1118
f @ WCF.Combined.min.js?v=1594660881:5
p @ WCF.Combined.min.js?v=1594660881:5
setTimeout (async)
(anonymous) @ WCF.Combined.min.js?v=1594660881:5
c @ WCF.Combined.min.js?v=1594660881:5
fireWith @ WCF.Combined.min.js?v=1594660881:5
fire @ WCF.Combined.min.js?v=1594660881:5
c @ WCF.Combined.min.js?v=1594660881:5
fireWith @ WCF.Combined.min.js?v=1594660881:5
ready @ WCF.Combined.min.js?v=1594660881:5
we.holdReady @ WCF.Combined.min.js?v=1594660881:6
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:11
setInterval (async)
setup @ WoltLabSuite.Core.min.js?v=1594660881:11
setup @ WoltLabSuite.Core.min.js?v=1594660881:11
(anonymous) @ (index):917
(anonymous) @ WoltLabSuite.Core.min.js?v=1594660881:21
Promise.then (async)
e.require @ WoltLabSuite.Core.min.js?v=1594660881:21
(anonymous) @ (index):819
(index):949 Uncaught TypeError: Dereferer.init is not a function
    at (index):949
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Array.forEach (<anonymous>)
    at WoltLabSuite.Core.min.js?v=1594660881:7
    at Map.forEach (<anonymous>)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:6)
    at t.forEach (WoltLabSuite.Core.min.js?v=1594660881:7)
    at Object.trigger (WoltLabSuite.Core.min.js?v=1594660881:7)
    at o._finalize (WoltLabSuite.Core.min.js?v=1594660881:8)
    at o._success (WoltLabSuite.Core.min.js?v=1594660881:8)

Display More

mit

Code

<div id="particle-canvas"></div>

<script data-relocate="true" src="../js/particle-network.min.js">
require(['../particle-network.min'], function (dummy) {
 new window.ParticleNetwork(…);
});
</script>

<script data-relocate="true">
  var canvasDiv = document.getElementById('particle-canvas');
      var options = {
              particleColor: '#fff',
              interactive: true,
              speed: 'medium',
              density: 'medium'

};

var particleCanvas = new ParticleNetwork(canvasDiv, options);

</script>

Display More

Sonnenspeer · Jul 15th 2020

Du musst schon die weiteren Scripte im "require"-Teil weiterführen.

Code

<div id="particle-canvas"></div>

<script data-relocate="true" src="../js/particle-network.min.js">
require(['../particle-network.min'], function (dummy) {
    var canvasDiv = document.getElementById('particle-canvas');
    var options = {
              particleColor: '#fff',
              interactive: true,
              speed: 'medium',
              density: 'medium'

     new window.ParticleNetwork(canvasDiv, options);
});
</script>

Display More

Foxly · Jul 15th 2020

Quote from Sonnenspeer

Du musst schon die weiteren Scripte im "require"-Teil weiterführen.

Code

<div id="particle-canvas"></div>

<script data-relocate="true" src="../js/particle-network.min.js">
require(['../particle-network.min'], function (dummy) {
    var canvasDiv = document.getElementById('particle-canvas');
    var options = {
              particleColor: '#fff',
              interactive: true,
              speed: 'medium',
              density: 'medium'

     new window.ParticleNetwork(canvasDiv, options);
});
</script>

Display More

Ah ok Jetzt wird ein Schuh daraus. Danke euch allen für die Hilfe.

**Tim Düsterhus** · Jul 15th 2020

Hallo,

Quote from Sonnenspeer

<script data-relocate="true" src="../js/particle-network.min.js">

und das src gehört da natürlich auch nicht mehr hin.

Einbindung JS Particle

Participate now!

Share