Good Afternoon, I am trying to have a loading animation for the pages on my site, but the client-side setTimeout function is not working. I have the same function on a test page with no bootstrap and no other scripts and it works, but once I put the script on my landing page it doesn't wait. I have console logged in setTimeout and it does log properly so it's firing, I just don't know why the page isn't waiting. I am using the EJS template engine.
/* 1 */
$(document).ready(function () {
$(window).on('load', function () {
setTimeout(function () {
$("#loader").hide();
}, 5000);
$('#page').show();
});
});
/* 2.
Loading animation javascript */
! function (a, b) {
"use strict";
function c(a) {
a = a || {};
for (var b = 1; b < arguments.length; b++) {
var c = arguments[b];
if (c)
for (var d in c) c.hasOwnProperty(d) && ("object" == typeof c[d] ? deepExtend(a[d], c[d]) : a[d] = c[d])
}
return a
}
function d(d, g) {
function h() {
if (y) {
r = b.createElement("canvas"), r.className = "pg-canvas", r.style.display = "block", d.insertBefore(r, d.firstChild), s = r.getContext("2d"), i();
for (var c = Math.round(r.width * r.height / g.density), e = 0; c > e; e++) {
var f = new n;
f.setStackPos(e), z.push(f)
}
a.addEventListener("resize", function () {
k()
}, !1), b.addEventListener("mousemove", function (a) {
A = a.pageX, B = a.pageY
}, !1), D && !C && a.addEventListener("deviceorientation", function () {
F = Math.min(Math.max(-event.beta, -30), 30), E = Math.min(Math.max(-event.gamma, -30), 30)
}, !0), j(), q("onInit")
}
}
function i() {
r.width = d.offsetWidth, r.height = d.offsetHeight, s.fillStyle = g.dotColor, s.strokeStyle = g.lineColor, s.lineWidth = g.lineWidth
}
function j() {
if (y) {
u = a.innerWidth, v = a.innerHeight, s.clearRect(0, 0, r.width, r.height);
for (var b = 0; b < z.length; b++) z[b].updatePosition();
for (var b = 0; b < z.length; b++) z[b].draw();
G || (t = requestAnimationFrame(j))
}
}
function k() {
i();
for (var a = d.offsetWidth, b = d.offsetHeight, c = z.length - 1; c >= 0; c--)(z[c].position.x > a || z[c].position.y > b) && z.splice(c, 1);
var e = Math.round(r.width * r.height / g.density);
if (e > z.length)
for (; e > z.length;) {
var f = new n;
z.push(f)
} else e < z.length && z.splice(e);
for (c = z.length - 1; c >= 0; c--) z[c].setStackPos(c)
}
function l() {
G = !0
}
function m() {
G = !1, j()
}
function n() {
switch (this.stackPos, this.active = !0, this.layer = Math.ceil(3 * Math.random()), this.parallaxOffsetX = 0, this.parallaxOffsetY = 0, this.position = {
x: Math.ceil(Math.random() * r.width),
y: Math.ceil(Math.random() * r.height)
}, this.speed = {}, g.directionX) {
case "left":
this.speed.x = +(-g.maxSpeedX + Math.random() * g.maxSpeedX - g.minSpeedX).toFixed(2);
break;
case "right":
this.speed.x = +(Math.random() * g.maxSpeedX + g.minSpeedX).toFixed(2);
break;
default:
this.speed.x = +(-g.maxSpeedX / 2 + Math.random() * g.maxSpeedX).toFixed(2), this.speed.x += this.speed.x > 0 ? g.minSpeedX : -g.minSpeedX
}
switch (g.directionY) {
case "up":
this.speed.y = +(-g.maxSpeedY + Math.random() * g.maxSpeedY - g.minSpeedY).toFixed(2);
break;
case "down":
this.speed.y = +(Math.random() * g.maxSpeedY + g.minSpeedY).toFixed(2);
break;
default:
this.speed.y = +(-g.maxSpeedY / 2 + Math.random() * g.maxSpeedY).toFixed(2), this.speed.x += this.speed.y > 0 ? g.minSpeedY : -g.minSpeedY
}
}
function o(a, b) {
return b ? void (g[a] = b) : g[a]
}
function p() {
console.log("destroy"), r.parentNode.removeChild(r), q("onDestroy"), f && f(d).removeData("plugin_" + e)
}
function q(a) {
void 0 !== g[a] && g[a].call(d)
}
var r, s, t, u, v, w, x, y = !!b.createElement("canvas").getContext,
z = [],
A = 0,
B = 0,
C = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),
D = !!a.DeviceOrientationEvent,
E = 0,
F = 0,
G = !1;
return g = c({}, a[e].defaults, g), n.prototype.draw = function () {
s.beginPath(), s.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, g.particleRadius / 2, 0, 2 * Math.PI, !0), s.closePath(), s.fill(), s.beginPath();
for (var a = z.length - 1; a > this.stackPos; a--) {
var b = z[a],
c = this.position.x - b.position.x,
d = this.position.y - b.position.y,
e = Math.sqrt(c * c + d * d).toFixed(2);
e < g.proximity && (s.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY), g.curvedLines ? s.quadraticCurveTo(Math.max(b.position.x, b.position.x), Math.min(b.position.y, b.position.y), b.position.x + b.parallaxOffsetX, b.position.y + b.parallaxOffsetY) : s.lineTo(b.position.x + b.parallaxOffsetX, b.position.y + b.parallaxOffsetY))
}
s.stroke(), s.closePath()
}, n.prototype.updatePosition = function () {
if (g.parallax) {
if (D && !C) {
var a = (u - 0) / 60;
w = (E - -30) * a + 0;
var b = (v - 0) / 60;
x = (F - -30) * b + 0
} else w = A, x = B;
this.parallaxTargX = (w - u / 2) / (g.parallaxMultiplier * this.layer), this.parallaxOffsetX += (this.parallaxTargX - this.parallaxOffsetX) / 10, this.parallaxTargY = (x - v / 2) / (g.parallaxMultiplier * this.layer), this.parallaxOffsetY += (this.parallaxTargY - this.parallaxOffsetY) / 10
}
var c = d.offsetWidth,
e = d.offsetHeight;
switch (g.directionX) {
case "left":
this.position.x + this.speed.x + this.parallaxOffsetX < 0 && (this.position.x = c - this.parallaxOffsetX);
break;
case "right":
this.position.x + this.speed.x + this.parallaxOffsetX > c && (this.position.x = 0 - this.parallaxOffsetX);
break;
default:
(this.position.x + this.speed.x + this.parallaxOffsetX > c || this.position.x + this.speed.x + this.parallaxOffsetX < 0) && (this.speed.x = -this.speed.x)
}
switch (g.directionY) {
case "up":
this.position.y + this.speed.y + this.parallaxOffsetY < 0 && (this.position.y = e - this.parallaxOffsetY);
break;
case "down":
this.position.y + this.speed.y + this.parallaxOffsetY > e && (this.position.y = 0 - this.parallaxOffsetY);
break;
default:
(this.position.y + this.speed.y + this.parallaxOffsetY > e || this.position.y + this.speed.y + this.parallaxOffsetY < 0) && (this.speed.y = -this.speed.y)
}
this.position.x += this.speed.x, this.position.y += this.speed.y
}, n.prototype.setStackPos = function (a) {
this.stackPos = a
}, h(), {
option: o,
destroy: p,
start: m,
pause: l
}
}
var e = "particleground",
f = a.jQuery;
a[e] = function (a, b) {
return new d(a, b)
}, a[e].defaults = {
minSpeedX: .1,
maxSpeedX: .7,
minSpeedY: .1,
maxSpeedY: .7,
directionX: "center",
directionY: "center",
density: 1e4,
dotColor: "#666666",
lineColor: "#666666",
particleRadius: 7,
lineWidth: 1,
curvedLines: !1,
proximity: 100,
parallax: !0,
parallaxMultiplier: 5,
onInit: function () { },
onDestroy: function () { }
}, f && (f.fn[e] = function (a) {
if ("string" == typeof arguments[0]) {
var b, c = arguments[0],
g = Array.prototype.slice.call(arguments, 1);
return this.each(function () {
f.data(this, "plugin_" + e) && "function" == typeof f.data(this, "plugin_" + e)[c] && (b = f.data(this, "plugin_" + e)[c].apply(this, g))
}), void 0 !== b ? b : this
}
return "object" != typeof a && a ? void 0 : this.each(function () {
f.data(this, "plugin_" + e) || f.data(this, "plugin_" + e, new d(this, a))
})
})
}(window, document),
/**
* requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
* #see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
* #see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
* #license: MIT license
*/
function () {
for (var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0; c < b.length && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"];
window.requestAnimationFrame || (window.requestAnimationFrame = function (b) {
var c = (new Date).getTime(),
d = Math.max(0, 16 - (c - a)),
e = window.setTimeout(function () {
b(c + d)
}, d);
return a = c + d, e
}), window.cancelAnimationFrame || (window.cancelAnimationFrame = function (a) {
clearTimeout(a)
})
}();
particleground(document.getElementById('particles-foreground'), {
dotColor: 'rgba(255, 255, 255, 1)',
lineColor: 'rgba(255, 255, 255, 0.05)',
minSpeedX: 0.3,
maxSpeedX: 0.6,
minSpeedY: 0.3,
maxSpeedY: 0.6,
density: 50000, // One particle every n pixels
curvedLines: false,
proximity: 250, // How close two dots need to be before they join
parallaxMultiplier: 10, // Lower the number is more extreme parallax
particleRadius: 4, // Dot size
});
particleground(document.getElementById('particles-background'), {
dotColor: 'rgba(255, 255, 255, 0.5)',
lineColor: 'rgba(255, 255, 255, 0.05)',
minSpeedX: 0.075,
maxSpeedX: 0.15,
minSpeedY: 0.075,
maxSpeedY: 0.15,
density: 30000, // One particle every n pixels
curvedLines: false,
proximity: 20, // How close two dots need to be before they join
parallaxMultiplier: 20, // Lower the number is more extreme parallax
particleRadius: 2, // Dot size
});
p {
background: lightgray;
margin: 0
}
p::before {
content: "Placeholder for: "
}
#loader {
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<p><%- include('layouts/head'); -%></p>
<p><%- include('layouts/index/index-style'); -%> </p>
<p><%- include('layouts/index/google-analytics'); -%></p>
</head>
<body>
<div id="loader">
<div id="particles-background" class="vertical-centered-box"></div>
<div id="particles-foreground" class="vertical-centered-box"></div>
<div class="vertical-centered-box">
<div class="content">
<div class="loader-circle"></div>
<div class="loader-line-mask">
<div class="loader-line"></div>
</div>
<p><%- include('layouts/payment/paymentCanceled-svg'); -%></p>
</div>
</div>
</div>
<div id="page" class="container">
(page content is located within this container using bootstrap)
</div>
<p><%- include('layouts/footer'); -%></p>
<p><%- include('layouts/scripts'); -%></p>
</body>
</html>
I found that setTimeout was not the function I was looking for because my app was not waiting for the page to load. I instead used the below and it worked!
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
document.querySelector("body").style.visibility = "hidden";
document.querySelector("#loader").style.visibility = "visible";
} else {
document.querySelector("#loader").style.display = "none";
document.querySelector("body").style.visibility = "visible";
}
};
Related
I have come across an url that I need to decode.
After trying multiple base64 (utf8), and JS url decoders online, it doesn't help, though the latter did work to an extent.
The url is;
starplayer://%3Curl%3Ebolwl6pIrBrL1GEf7V%2F5Uy6eoFPW77xb5jrS%2BCqRb3%2BoaVq%2Fm3REcqkDQzNsEu2JH6Q2ysUzG73Is93y%2FhmRNK10znrzHKOmEcFITgVDIQeGRVDk7iMBeDth%2BNzmZLIK1yDadYIyBvUPAJ4JRiHzevUVOQ8FMVUJzWAtA5qONGf40KaP31iKvMICFJ3lRjI1cuclOg4KxDo8GeQfmsS7xCAbX1XSWMNlEQ%2Fqzaaht2Gj1fWfbgo%2FsJbGVGSr5swv7ezk4S77LV%2BLpT%2FGbRLbovv0X%2BE4bAQFBtbxfsJ%2BjRU%3D%3Cbase_url%3Ehttp%3A%2F%2Fwww.etoosindia.com%2F%3Cwidth%3E720%3Cheight%3E500%3Ctopmost%3Etrue%3Cresizing%3Eundefined%3Ccookie%3EX2dhPUdBMS4yLjM2NzU5MzMwNS4xNDk4MjExMjczOyBjb29raWVfdWlkPTsgbWVtX25tPVpHOXVkQ0JqWVd4czsgbWVtX2lkPVoyeHdaM1ZvWkdOQWMyaGhjbXRzWVhObGNuTXVZMjl0OyBtZW1fY2Q9TnpreU1EVTU7IF9femxjbWlkPWhBZ1hnVGM4bU1Iekxl%3Ccaption%3ERXRvb3MlMjBJbmRpYQ%3D%3D
After putting the above into a url decoder, I got;
starplayer://<url>bolwl6pIrBrL1GEf7V/5Uy6eoFPW77xb5jrS+CqRb3+oaVq/m3REcqkDQzNsEu2JH6Q2ysUzG73Is93y/hmRNK10znrzHKOmEcFITgVDIQeGRVDk7iMBeDth+NzmZLIK1yDadYIyBvUPAJ4JRiHzevUVOQ8FMVUJzWAtA5qONGf40KaP31iKvMICFJ3lRjI1cuclOg4KxDo8GeQfmsS7xCAbX1XSWMNlEQ/qzaaht2Gj1fWfbgo/sJbGVGSr5swv7ezk4S77LV+LpT/GbRLbovv0X+E4bAQFBtbxfsJ+jRU=<base_url>http://www.etoosindia.com/<width>720<height>500<topmost>true<resizing>undefined<cookie>X2dhPUdBMS4yLjM2NzU5MzMwNS4xNDk4MjExMjczOyBjb29raWVfdWlkPTsgbWVtX25tPVpHOXVkQ0JqWVd4czsgbWVtX2lkPVoyeHdaM1ZvWkdOQWMyaGhjbXRzWVhObGNuTXVZMjl0OyBtZW1fY2Q9TnpreU1EVTU7IF9femxjbWlkPWhBZ1hnVGM4bU1Iekxl<caption>RXRvb3MlMjBJbmRpYQ==
The above url was decoded by a script I am attaching below (see end);
var STARPLAYER_EXE_NOT_INSTALLED = "The StarPlayer is not installed.";
var STARPLAYER_EXE_WANT_TO_INSTALL = "Do you want to install?";
var STARPLAYER_UNKNOWN_INSTALLED = "Has the StarPlayer is running normally?";
var StarPlayerExe = {};
StarPlayerExe.run = function() {
if (typeof this.url == "undefined") {
alert("undefined url");
return
}
var a = this;
StarPlayerLaunchUri(a.getUrl(), function() {
a.result(true, a.install)
}, function() {
a.result(false, a.install)
}, function() {
a.unKnownResult(a.install)
})
}
;
function base_url() {
var b = location.protocol;
var a = location.host;
return b + "//" + a + "/"
}
StarPlayerExe.getUrl = function() {
var a = "<url>" + this.url + "<base_url>" + base_url() + "<width>" + this.width + "<height>" + this.height + "<topmost>" + this.topmost + "<resizing>" + this.resizing + "<cookie>" + Base64.encode(document.cookie) + "<caption>" + Base64.encode(encodeURIComponent(this.caption));
return "starplayer://" + encodeURIComponent(a)
}
;
StarPlayerExe.result = function(a, c) {
if (a == false) {
var b = confirm(STARPLAYER_EXE_NOT_INSTALLED + "\n" + STARPLAYER_EXE_WANT_TO_INSTALL);
if (b == true) {
window.location.href = c
}
}
}
;
StarPlayerExe.unKnownResult = function(b) {
if (COOKIE.get("starplayer_installed") != "true") {
var a = confirm(STARPLAYER_UNKNOWN_INSTALLED);
if (a == true) {
COOKIE.set("starplayer_installed", "true", 60)
} else {
window.location.href = b
}
}
}
;
function StarPlayerLaunchUri(g, d, b, o) {
var s, k, a, j, n, l, m, h, r;
function f(e) {
if (typeof e === "function") {
e()
}
}
function p(t) {
var e;
if (!t) {
t = document.body
}
e = document.createElement("iframe");
e.style.display = "none";
t.appendChild(e);
return e
}
function c(e) {
if (!j) {
return
}
if (!e) {
e = document.body
}
e.removeChild(j);
j = null
}
var i = navigator.appVersion.indexOf("Edge/12") != -1 ? true : false;
r = {
isChrome: false,
isFirefox: false,
isIE: false,
isSafari: false
};
if (window.chrome && !navigator.userAgent.match(/Opera|OPR\//)) {
r.isChrome = true
} else {
if (typeof InstallTrigger !== "undefined") {
r.isFirefox = true
} else {
if (i || "ActiveXObject"in window) {
r.isIE = true
} else {
if (navigator.userAgent.match(/Safari\//)) {
r.isSafari = true
}
}
}
}
if (navigator.msLaunchUri) {
navigator.msLaunchUri(g, d, b)
} else {
if (r.isChrome || r.isSafari) {
m = function() {
window.clearTimeout(l);
window.removeEventListener("blur", m);
f(d)
}
;
h = function() {
window.removeEventListener("blur", m);
f(b)
}
;
window.addEventListener("blur", m);
l = window.setTimeout(h, 1000);
window.location.href = g
} else {
if (r.isFirefox) {
j = p();
try {
j.contentWindow.location.href = g;
f(d)
} catch (q) {
if (q.name === "NS_ERROR_UNKNOWN_PROTOCOL") {
f(b)
} else {
f(o)
}
} finally {
c()
}
} else {
if (r.isIE) {
a = window.open("", "launcher", "width=0,height=0");
a.location.href = g;
try {
a.location.href = "about:blank";
f(d);
n = window.setInterval(function() {
a.close();
if (a.closed) {
window.clearInterval(n)
}
}, 500)
} catch (q) {
a = window.open("about:blank", "launcher");
a.close();
f(b)
}
} else {
j = p();
j.contentWindow.location.href = g;
window.setTimeout(function() {
c(k);
f(o)
}, 1000)
}
}
}
}
}
var COOKIE = {
set: function(g, b, d, c) {
var a = new Date();
var f;
switch (c) {
case "day":
a.setDate(a.getDate() + d);
break;
case "hour":
a.setTime(a.getTime() + (d * 60 * 60 * 1000));
break;
default:
a.setDate(a.getDate() + d)
}
if (d) {
f = escape(b) + "; expires=" + a.toGMTString()
} else {
f = escape(b)
}
document.cookie = g + "=" + f + "; path=/"
},
get: function(g) {
var e = document.cookie.split(";");
var d, c, f, b, a;
b = e.length;
for (d = 0; d < b; d++) {
a = e[d].indexOf("=");
c = e[d].substr(0, a);
f = e[d].substr(a + 1);
c = c.replace(/^\s+|\s+$/g, "");
if (c == g) {
return unescape(f)
}
}
},
del: function(a) {
this.set(a, "", -1)
}
};
var Base64 = {
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode: function(c) {
var a = "";
var k, h, f, j, g, e, d;
var b = 0;
c = Base64._utf8_encode(c);
while (b < c.length) {
k = c.charCodeAt(b++);
h = c.charCodeAt(b++);
f = c.charCodeAt(b++);
j = k >> 2;
g = ((k & 3) << 4) | (h >> 4);
e = ((h & 15) << 2) | (f >> 6);
d = f & 63;
if (isNaN(h)) {
e = d = 64
} else {
if (isNaN(f)) {
d = 64
}
}
a = a + this._keyStr.charAt(j) + this._keyStr.charAt(g) + this._keyStr.charAt(e) + this._keyStr.charAt(d)
}
return a
},
decode: function(c) {
var a = "";
var k, h, f;
var j, g, e, d;
var b = 0;
c = c.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (b < c.length) {
j = this._keyStr.indexOf(c.charAt(b++));
g = this._keyStr.indexOf(c.charAt(b++));
e = this._keyStr.indexOf(c.charAt(b++));
d = this._keyStr.indexOf(c.charAt(b++));
k = (j << 2) | (g >> 4);
h = ((g & 15) << 4) | (e >> 2);
f = ((e & 3) << 6) | d;
a = a + String.fromCharCode(k);
if (e != 64) {
a = a + String.fromCharCode(h)
}
if (d != 64) {
a = a + String.fromCharCode(f)
}
}
a = Base64._utf8_decode(a);
return a
},
_utf8_encode: function(b) {
b = b.replace(/\r\n/g, "\n");
var a = "";
for (var e = 0; e < b.length; e++) {
var d = b.charCodeAt(e);
if (d < 128) {
a += String.fromCharCode(d)
} else {
if ((d > 127) && (d < 2048)) {
a += String.fromCharCode((d >> 6) | 192);
a += String.fromCharCode((d & 63) | 128)
} else {
a += String.fromCharCode((d >> 12) | 224);
a += String.fromCharCode(((d >> 6) & 63) | 128);
a += String.fromCharCode((d & 63) | 128)
}
}
}
return a
},
_utf8_decode: function(a) {
var b = "";
var d = 0;
var e = c1 = c2 = 0;
while (d < a.length) {
e = a.charCodeAt(d);
if (e < 128) {
b += String.fromCharCode(e);
d++
} else {
if ((e > 191) && (e < 224)) {
c2 = a.charCodeAt(d + 1);
b += String.fromCharCode(((e & 31) << 6) | (c2 & 63));
d += 2
} else {
c2 = a.charCodeAt(d + 1);
c3 = a.charCodeAt(d + 2);
b += String.fromCharCode(((e & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
d += 3
}
}
}
return b
}
};
Can the above code be used to decode this url, and if so, how?
If anyone can help me decode this, I would be very thankful.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am making a star wars game with HTML, CSS and JS. It should look a little bit like this game: https://www.gog.com/game/star_wars_xwing_vs_tie_fighter
Now I want to make it like a kind of game in which you have to shoot at enemy ships. for these ships I want to use this image: http://vignette4.wikia.nocookie.net/starwars/images/0/0a/TIE_Advanced_x1_starfighter.png/revision/latest?cb=20150310124250
Now her this is my questions:
How can I make it look like the ship in this image is getting closer to you? So that it appears in the distance really small and gets closer to you and becomes bigger, so that it looks like it is flying towards you?
I tried to use z-index but that did not work.
Also pls don't mind the code for I have been working on it for a long time and it finally works the way I want it to, but if it is a hinder in any further progress feel free to tell me what I need to add/change/remove or whatsoever.
Also I have been looking around on the internet how I could possibly make something like a star wars game but for example on this site the obly thing I could find related to star wars was how to make the crawling introduction but that is not what I am looking for:)
Number.prototype.clamp = function(min, max) {
'use strict';
return Math.max(min, Math.min(this, max));
};
var url = document.location.href;
var n = parseInt((url.indexOf('n=') != -1) ? url.substring(url.indexOf('n=') + 2, ((url.substring(url.indexOf('n=') + 2, url.length)).indexOf('&') != -1) ? url.indexOf('n=') + 2 + (url.substring(url.indexOf('n=') + 2, url.length)).indexOf('&') : url.length) : 512 * 4);
var star = new Array(n);
var hyperspace = 0;
var lol = {}
lol.id = 'starfield';
lol.pr = {
w: 1,
h: 1
};
lol.zr = 256;
lol.timer = 0;
lol.spd = 1;
lol.rid = false;
lol.cvs = false;
lol.ctx = false;
lol.util = {
isboolean: function(v) {
if (typeof v === 'boolean') {
return true;
}
return false;
},
isstring: function(v) {
if (typeof v === 'string') {
return true;
}
return false;
},
isobject: function(v) {
if (typeof v === 'object') {
return true;
}
return false;
},
isfunction: function(v) {
if (typeof v === 'function') {
return true;
}
return false;
},
isempty: function(obj) {
if (window.Object.getOwnPropertyNames(obj).length === 0) {
return true;
}
return false;
},
isffx: function() {
return (/firefox/i).test(window.navigator.userAgent);
},
copy: function(v) {
return v.slice(0);
},
clone: function(v) {
return Object.create({
x: v.x,
y: v.y,
z: v.z
});
},
sign: function(v) {
v = parseFloat(Number(v).toFixed(1));
if (v === 0) {
return ' ';
}
if (v < 0) {
return '';
}
if (v > 0) {
return '+';
}
},
random: function(n) {
var i = 0,
type, start, len, rnd = '';
while (i < n) {
type = Math.round(Math.random() * 2);
if (type === 0) {
start = 48;
len = 10;
} else {
start = (Math.round(Math.random() * 2) % 2 === 0) ? 65 : 97;
len = 26;
}
rnd += String.fromCharCode(start + Math.floor(Math.random() * len));
i += 1;
}
return rnd;
},
interpolate: function(from, to, n, i) {
return from + (to - from) / n * i;
},
time: function() {
return (new Date()).getTime();
}
};
lol.i = function(id) {
return window.document.getElementById(String(id));
};
lol.el = function(el) {
return window.document.createElement(String(el));
};
lol.tn = function(txt) {
return window.document.createTextNode(String(txt));
};
function $r(parent, child) {
(document.getElementById(parent)).removeChild(document.getElementById(child));
}
function $t(name) {
return document.getElementsByTagName(name);
}
function $c(code) {
return String.fromCharCode(code);
}
function $h(value) {
return ('0' + Math.max(0, Math.min(255, Math.round(value))).toString(16)).slice(-2);
}
function _i(id, value) {
$t('div')[id].innerHTML += value;
}
function _h(value) {
return !hires ? value : Math.round(value / 2);
}
function get_screen_size() {
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
return Array(w, h);
};
lol.init = function() {
window.addEventListener('resize', lol.resize, false);
window.addEventListener('mousemove', lol.mouse.move, false);
var e = lol.util.isffx() ? 'DOMMouseScroll' : 'mousewheel';
window.addEventListener(e, lol.mouse.wheel, false);
window.addEventListener('keypress', lol.key, false);
lol.viewport();
lol.resize();
for (var i = 0; i < n; i++) {
star[i] = new Array(5);
star[i][0] = Math.random() * lol.w * 3 - lol.x * 3;
star[i][1] = Math.random() * lol.h * 3 - lol.y * 3;
star[i][2] = Math.round(Math.random() * lol.z);
star[i][3] = lol.x;
star[i][4] = lol.y;
}
lol.anim.start();
};
lol.viewport = function() {
var el = lol.el('div');
el.id = lol.id;
el.style.position = 'absolute';
window.document.body.appendChild(el);
lol.cvs = lol.el('canvas');
lol.cvs.id = lol.id + '-viewport';
lol.cvs.style.position = 'absolute';
el.appendChild(lol.cvs);
lol.ctx = lol.cvs.getContext('2d');
};
lol.resize = function() {
var w = window.innerWidth,
h = window.innerHeight,
el = lol.i(lol.id);
lol.w = (w + lol.pr.w - w % lol.pr.w) / lol.pr.w;
lol.w += lol.w % 2;
lol.h = (h + lol.pr.h - h % lol.pr.h) / lol.pr.h;
lol.h += lol.h % 2;
lol.x = Math.round(w / 2);
lol.y = Math.round(h / 2);
lol.z = (w + h) / 2;
lol.r = 1 / lol.z;
el.width = lol.w * lol.pr.w;
el.height = lol.h * lol.pr.h;
lol.cvs.width = lol.w * lol.pr.w;
lol.cvs.height = lol.h * lol.pr.h;
lol.cvs.style.backgroundColor = '#000';
lol.ctx.scale(lol.pr.w, lol.pr.h);
lol.mouse.o = {
x: lol.x,
y: lol.y
};
};
lol.anim = {
update: function() {
var c;
lol.ctx.fillStyle = 'rgba(0,0,0,0.5)';
if (hyperspace === 1) {
lol.spd = lol.spd * 1.015;
lol.zr = lol.zr * 0.99;
c = Math.round(lol.spd * 4);
lol.ctx.fillStyle = 'rgba(' + c + ',' + c + ',' + c + ',0.5)';
if (lol.spd > 64) {
lol.ctx.fillStyle = 'rgba(0,0,0,0.5)';
lol.spd = 16;
lol.zr = 256;
hyperspace = 2;
}
}
if (hyperspace === 2) {
if (lol.spd > 1) {
lol.spd *= 0.99;
} else {
lol.spd = 1;
hyperspace = 0;
}
}
lol.ctx.fillRect(0, 0, lol.w, lol.h);
for (var i = 0; i < n; i++) {
var test = true,
x2 = star[i][3],
y2 = star[i][4];
star[i][0] += lol.mouse.p.x * 0.1;
if (star[i][0] > lol.x * 3) {
star[i][0] -= lol.w * 3;
test = false;
}
if (star[i][0] < -lol.x * 3) {
star[i][0] += lol.w * 3;
test = false;
}
star[i][1] += lol.mouse.p.y * 0.1;
if (star[i][1] > lol.y * 3) {
star[i][1] -= lol.h * 3;
test = false;
}
if (star[i][1] < -lol.y * 3) {
star[i][1] += lol.h * 3;
test = false;
}
star[i][2] -= lol.spd;
if (star[i][2] > lol.z) {
star[i][2] -= lol.z;
test = false;
}
if (star[i][2] < 0) {
star[i][2] += lol.z;
test = false;
}
star[i][3] = lol.x + (star[i][0] / star[i][2]) * lol.zr;
star[i][4] = lol.y + (star[i][1] / star[i][2]) * lol.zr;
if (test) {
c = 1 - lol.r * star[i][2];
lol.ctx.fillStyle = 'rgba(255,255,255,' + c + ')';
lol.ctx.strokeStyle = 'rgba(255,255,255,' + (c / 4) + ')';
lol.ctx.lineWidth = (1 - lol.r * star[i][2]) * 1.5;
lol.ctx.beginPath();
lol.ctx.moveTo(x2, y2);
lol.ctx.lineTo(star[i][3], star[i][4]);
lol.ctx.rect(star[i][3] - 0.75, star[i][4] - 0.75, 1.5, 1.5);
lol.ctx.closePath();
lol.ctx.stroke();
lol.ctx.fill();
}
}
lol.rid = window.requestAnimationFrame(lol.anim.update);
},
start: function() {
lol.anim.update();
},
stop: function() {
window.cancelAnimationFrame(lol.rid);
lol.rid = false;
},
pause: function() {
lol.anim[lol.rid ? 'stop' : 'start']();
}
};
lol.mouse = {
p: {
x: 0,
y: 0
},
o: {
x: 0,
y: 0
},
click: false,
move: function(e) {
e = e || window.event;
lol.mouse.p.x = ((e.pageX - lol.mouse.o.x) / window.innerWidth) * 256;
lol.mouse.p.y = ((e.pageY - lol.mouse.o.y) / window.innerHeight) * 256;
e.preventDefault();
},
wheel: function(e) {
e = e || window.event;
var delta = e.wheelDelta / 120;
lol.spd -= delta * 0.1;
e.preventDefault();
}
};
lol.key = function(e) {
e = e || window.event;
console.log(e.keyCode);
switch (e.keyCode) {
case 13:
lol.anim.pause();
break;
case 32:
hyperspace = 1;
break;
}
};
lol.init();
body {
margin: 0px;
padding: 0px;
overflow: hidden;
z-index: -1
}
#footer {
text-align: center;
background-color: black;
color: white;
}
#div {
background-color: black;
text-align: center;
}
<footer id="footer">Galaxy Defender
<br>Mohan Bloxs</br>
</footer>
I've been trying to work out this simple javascript tic tac toe game. I'm trying to make the board size a variable and number needed in a row a variable. I've created a global variable for board size and number in a row. However it doesn't seem to be working. It makes the board the size I want but only a few of the squares will actually result in a 'Win'. Could someone please help me out ;).
Here is an image of one of the issues: http://imgur.com/oNK9ErK
I imagine the error occurs here:
function checkWinner(mArr) {
var winner = [false, ""];
for (var i = 0; i < mArr.length; i++) {
var hor = [],
ver = [],
diag = [];
if (mArr[i][3] !== "") {
//horizontal
if (i % 3 === 0) {
for (var j = 0; j < 3; j++) {
hor.push([mArr[i + j][3], i + j]);
}
if (hor.length === numinrow) {
winner = isWinner(hor);
if (winner[0]) {
return winner;
}
}
}
//vertical && diag/anti diag
if (i < 3) {
for (var j = 0; j + i < mArr.length; j += 3) {
ver.push([mArr[i + j][3], i + j]);
}
if (ver.length === numinrow) {
winner = isWinner(ver);
if (winner[0]) {
return winner;
}
}
if (i !== 1) {
for (var z = 0; z + i < mArr.length - i; z += (4 - i)) {
diag.push([mArr[i + z][3], i + z]);
}
if (diag.length === numinrow) {
winner = isWinner(diag);
if (winner[0]) {
return winner;
}
}
}
}
}
}
return winner;
}
Here is the entire .js
(function () {
var bsize = 5;
var numinrow = 3;
function Board(id, c, r) {
if (this instanceof Board) {
this.CANVAS = document.getElementById(id);
this.CTX = this.CANVAS.getContext("2d");
this.WIDTH = this.CANVAS.width || 0;
this.HEIGHT = this.CANVAS.height || 0;
this.COLS = c || bsize;
this.ROWS = r || bsize;
this.TILEWIDTH = (this.WIDTH / this.COLS);
this.moveCount = 0;
this.board = this.gameBoard(this.TILEWIDTH, this.COLS, this.ROWS);
this.CANVAS.addEventListener('selectstart', function (e) {
e.preventDefault();
return false;
}, false);
this.winner = [false, ""];
this.boardDisabled = false;
} else {
return new Board(id, c, r);
}
}
Board.prototype.draw = function () {
var ctx = this.CTX;
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "#168dd9";
// Draw column dividers
for (var i = 1; i <= this.COLS - 1; i++) {
ctx.moveTo(this.TILEWIDTH * i, 0);
ctx.lineTo(this.TILEWIDTH * i, this.HEIGHT);
}
//Draw horizontal dividers
for (var i = 1; i <= this.ROWS - 1; i++) {
ctx.moveTo(0, this.TILEWIDTH * i);
ctx.lineTo(this.WIDTH, this.TILEWIDTH * i);
}
ctx.stroke();
};
Board.prototype.gameBoard = function (t, c, r) {
var b = [],
count = 0;
// Create gameboard array with the following data:
// [x pos, y pos, tile count, empty string for move symbol (x or o)]
for (var y = 0; y < r; y++) {
for (var x = 0; x < c; x++) {
b.push([x * t, y * t, count++, ""]);
}
}
return b;
};
Board.prototype.updateScore = function () {
if (supports_html5_storage()) {
var p = sessionStorage.score || {
"score_x": 0,
"score_o": 0,
"score_tie": 0
},
w = "score_" + (this.winner[1][0] || "tie");
if (sessionStorage.score) {
p = JSON.parse(p);
}
p[w] ++;
sessionStorage.score = JSON.stringify(p);
this.updateScoreBoard();
}
};
Board.prototype.updateScoreBoard = function () {
if (supports_html5_storage()) {
var p = sessionStorage.score ? JSON.parse(sessionStorage.score) : {
"score_x": 0,
"score_o": 0,
"score_tie": 0
};
for (var s in p) {
if (p.hasOwnProperty(s)) {
document.getElementById(s).innerHTML = p[s];
}
}
}
};
Board.prototype.reset = function (x) {
var timer = x || 4000;
window.setTimeout(function () {
window.location.reload(false);
}, timer);
};
Board.prototype.resetScore = function () {
if (supports_html5_storage()) {
sessionStorage.removeItem("score");
this.updateScoreBoard();
}
};
Board.prototype.move = function (coor) {
var width = this.TILEWIDTH,
ctx = this.CTX,
board = this.board,
blen = board.length;
//Loop through and find tile that click was detected on
for (var i = 0; i < blen; i++) {
if (coor.x > board[i][0] && coor.y > board[i][1] && coor.x < board[i][0] + width && coor.y < board[i][1] + width) {
var x = board[i][0],
y = board[i][1],
validTile = board[i][3] === "";
if (validTile) {
if (this.moveCount++ % 2 === 1) {
moveO(x, y, width, ctx);
board[i][3] = "o";
} else {
moveX(x, y, width, ctx);
board[i][3] = "x";
}
}
//Check board for winner if move count is 5 or more
if (this.moveCount > 4) {
this.winner = checkWinner(board);
var w = this.winner,
winner = w[0],
shape = w[1][0],
boardDisabled = this.boardDisabled;
//If there is a winner, redraw winning tiles in red
if (winner && !boardDisabled) {
if (shape === "o") {
for (var j = 1; j < 4; j++) {
moveO(board[w[j][1]][0], board[w[j][1]]
[1], width, ctx, "red", 5);
}
} else {
for (var j = 1; j < 4; j++) {
moveX(board[w[j][1]][0], board[w[j][1]]
[1], width, ctx, "red", 5);
}
}
}
if ((winner || this.moveCount === board.length) && !boardDisabled) {
if (!winner) {
//If tie, redraw all moves in red
for (var j = 0; j < board.length; j++) {
if (board[j][3] === "o") {
moveO(board[j][0], board[j][1], width, ctx, "red", 5);
} else {
moveX(board[j][0], board[j][1], width, ctx, "red", 5);
}
}
}
this.boardDisabled = true;
this.updateScore();
this.reset();
}
}
break;
}
}
};
function checkWinner(mArr) {
var winner = [false, ""];
for (var i = 0; i < mArr.length; i++) {
var hor = [],
ver = [],
diag = [];
if (mArr[i][3] !== "") {
//horizontal
if (i % 3 === 0) {
for (var j = 0; j < 3; j++) {
hor.push([mArr[i + j][3], i + j]);
}
if (hor.length === numinrow) {
winner = isWinner(hor);
if (winner[0]) {
return winner;
}
}
}
//vertical && diag/anti diag
if (i < 3) {
for (var j = 0; j + i < mArr.length; j += 3) {
ver.push([mArr[i + j][3], i + j]);
}
if (ver.length === numinrow) {
winner = isWinner(ver);
if (winner[0]) {
return winner;
}
}
if (i !== 1) {
for (var z = 0; z + i < mArr.length - i; z += (4 - i)) {
diag.push([mArr[i + z][3], i + z]);
}
if (diag.length === numinrow) {
winner = isWinner(diag);
if (winner[0]) {
return winner;
}
}
}
}
}
}
return winner;
}
function isWinner(arr) {
arr.sort();
var w = arr[0][0] && arr[0][0] === arr[arr.length - 1][0] ? [true].concat(arr) : [false, ""];
return w;
}
function moveO(x, y, r, ctx, fill, lineW) {
var x = x + r / 2,
y = y + r / 2,
r = r / 2 - (r * 0.15);
ctx.beginPath();
ctx.lineWidth = lineW || 3;
ctx.strokeStyle = fill || "#333";
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.stroke();
}
function moveX(x, y, w, ctx, fill, lineW) {
var pad = w * 0.15,
lineCoor = [
[
[x + pad, y + pad], //line 1 start
[x + w - pad, y + w - pad] //line 1 end
],
[
[x + pad, y + w - pad], //line 2 start
[x + w - pad, y + pad] //line 2 end
]
];
ctx.beginPath();
ctx.lineWidth = lineW || 3;
ctx.strokeStyle = fill || "#333";
for (var i = 0; i < 2; i++) {
ctx.moveTo(lineCoor[i][0][0], lineCoor[i][0][1]);
ctx.lineTo(lineCoor[i][1][0], lineCoor[i][1][1]);
}
ctx.stroke();
}
function clickTouch(e) {
var coor = b.CANVAS.relMouseCoords(e);
if (!b.winner[0]) {
b.move(coor);
}
}
function clickTouchReset(e) {
var target = e.target.id;
if (target === "resetScore" && confirm("Are you sure you want to reset the score?")) {
b.resetScore();
} else if (target === "resetGame") {
b.reset(1);
}
}
// Initialize Game
//BOARD SIZE
var b = new Board("game", bsize, bsize),
resetcon = document.getElementById("reset");
b.draw();
b.updateScoreBoard();
//Add event listeners for click or touch
window.addEventListener("click", clickTouch, false);
window.addEventListener("touchstart", clickTouch, false);
resetcon.addEventListener("click", clickTouchReset, false);
resetcon.addEventListener("touchstart", clickTouchReset, false);
})();
/*****
Get Mouse click coordinates within canvas
Modified to include touch events
Source: http://stackoverflow.com/a/9961416
******/
HTMLCanvasElement.prototype.relMouseCoords = function (event) {
var totalOffsetX = 0,
totalOffsetY = 0,
canvasX = 0,
canvasY = 0,
touch = event.touches,
currentElement = this;
do {
totalOffsetX += currentElement.offsetLeft;
totalOffsetY += currentElement.offsetTop;
}
while (currentElement = currentElement.offsetParent)
canvasX = (touch ? touch[0].pageX : event.pageX) - totalOffsetX;
canvasY = (touch ? touch[0].pageY : event.pageY) - totalOffsetY;
canvasX = Math.round(canvasX * (this.width / this.offsetWidth));
canvasY = Math.round(canvasY * (this.height / this.offsetHeight));
return {
x: canvasX,
y: canvasY
}
}
function supports_html5_storage() {
try {
return 'sessionStorage' in window && window.sessionStorage !== null;
} catch (e) {
return false;
}
}
I am using following code to simulate mouse click event on an element.
var composeEl = $('.asf.T-I-J3.J-J5-Ji:visible')[0];
if (composeEl) {
//Trigger mouse down event
var mouseDown = document.createEvent('MouseEvents');
mouseDown.initEvent('mousedown', true, false);
composeEl.dispatchEvent(mouseDown)
//Trigger mouse up event
var mouseUp = document.createEvent('MouseEvents');
mouseUp.initEvent('mouseup', true, false);
composeEl.dispatchEvent(mouseUp)
}
it works fine, its clicking but throw this error in console
Uncaught TypeError: Cannot read property 'getSelection' of null.
What is wrong with this javascript code?
Chrome show error in content.js file. I am not including this file.
error is on this line
var c=b.view.getSelection(); in below code
var m;if (!window.a) {
var t = function() {
var b = window.self === window.top;
this.k = (this.G = b) ? 0 : null;
this.s = this.d = !1;
this.j = this.i = -1;
this.F = 1;
this.c = {};
this.q = [];
var c = chrome.extension.connect({
name: b ? "top" : "sub"
});
this.a = c;
this.r = c.a || Math.ceil(975 * Math.random());
c.onMessage.addListener(this.onMessage.bind(this));
c.onDisconnect.addListener(this.v.bind(this));
this.b(window, "scroll", this.O, !0);
this.b(window, "keydown", this.u, !0);
this.b(window, "keyup", this.u, !0);
this.b(window, "mousedown", this.L, !0);
this.b(window, "mouseup",
this.M, !0);
this.b(window, "blur", this.K, !0);
this.b(document, "beforeload", this.I, !0);
this.b(document, "DOMContentLoaded", this.J);
b && this.b(window, "resize", this.N)
};
window.a = !0;
var x = {
16: !0,
17: !0,
18: !0,
45: !0,
46: !0
},
C = ["VIDEO", "AUDIO", "OBJECT", "EMBED"],
D = new RegExp(atob("eXRwbGF5ZXJcLmNvbmZpZ1xzKj1ccypcew=="));
m = t.prototype;
m.A = function(b, c, e, f) {
try {
var d = document.activeElement,
n = d && 0 <= C.indexOf(d.tagName) ? d : null;
n || (n = (d = document.elementFromPoint(this.i, this.j)) && 0 <= C.indexOf(d.tagName) ? d : null);
for (var k =
0, p, q, r, h, l = 0; l < C.length; l++) {
for (var g = document.getElementsByTagName(C[l]), w = 0; w < g.length; w++)
if (d = g[w], 3 != l || "application/x-shockwave-flash" == d.type.toLowerCase()) {
var s = d.src || d.data;
if (s && (s == b || s == c)) {
p = d;
break
}
if (!n && !q)
if (!s || s != e && s != f) {
var u = d.clientWidth,
v = d.clientHeight;
if (u && v) {
var y = d.getBoundingClientRect();
if (!(0 >= y.right + window.scrollX || 0 >= y.bottom + window.scrollY)) {
var z = window.getComputedStyle(d);
if (!z || "hidden" != z.visibility) {
var A = u * v;
A > k && 1.35 * u > v && u < 3 * v && (k = A, r = d);
h || (h = d)
}
}
}
} else q =
d
}
if (p) break
}
b = p || n || q || r || h;
if (!b) return null;
if ("EMBED" == b.tagName && !b.clientWidth && !b.clientHeight) {
var B = b.parentElement;
"OBJECT" == B.tagName && (b = B)
}
return this.g(b)
} catch (E) {}
};
m.w = function(b, c, e) {
try {
for (var f = [], d, f = Array.prototype.concat.apply(f, document.getElementsByTagName("FRAME")), f = Array.prototype.concat.apply(f, document.getElementsByTagName("IFRAME")), n = 0; n < f.length; n++) {
var k = f[n];
if (parseInt(k.getAttribute("__idm_frm__")) == b) {
d = k;
break
}
if (!d) {
var p = k.src;
!p || p != c && p != e || (d = k)
}
}
return this.g(d)
} catch (q) {}
};
m.p = function() {
var b = window.devicePixelRatio,
c = document.width,
e = document.body.scrollWidth;
c && e && (b = c == e ? 0 : c / e);
return b
};
m.n = function(b) {
try {
var c = b.getBoundingClientRect(),
e = Math.round(c.width),
f = Math.round(c.height);
if (15 > e || 15 > f) return null;
var d = document.documentElement,
n = d.scrollHeight || d.clientHeight,
k = Math.round(c.left) + b.clientLeft,
p = Math.round(c.top) + b.clientTop;
return k >= (d.scrollWidth || d.clientWidth) || p >= n ? null : {
left: k,
top: p,
right: k + e,
bottom: p + f,
zoom: this.p()
}
} catch (q) {}
};
m.o = function() {
this.a.postMessage([21,
window.location.href
])
};
m.f = function(b) {
if (b) {
if (!this.H) {
this.H = !0;
this.b(window, "message", this.P);
var c = document.createElement("script");
c.src = chrome.extension.getURL("document.js");
c.onload = function() {
c.parentNode.removeChild(c)
};
document.documentElement.appendChild(c)
}
window.setTimeout(function() {
window.postMessage([1], "/")
}, 3E3)
} else if ("loading" == document.readyState) this.t = !0;
else {
this.t = !1;
b = document.getElementsByTagName("SCRIPT");
for (var e = 0; e < b.length; e++)
if (c = b[e], !c.src && D.test(c.innerText)) {
b =
this.h();
this.a.postMessage([34, b, -1, c.outerHTML]);
break
}
}
};
m.P = function(b) {
var c = b.data;
c instanceof Array && b.origin == (document.origin || location.origin) && 2 == c[0] && this.a.postMessage([34, c[1], -1, c[2]])
};
m.D = function(b) {
var c = b[2] || this.w(b[3], b[4], b[5]),
e = c && this.c[c],
e = e && this.n(e);
this.a.postMessage([22, b[1], b[3], c, e])
};
m.C = function(b) {
var c = !b[2],
e = b[2] || this.A(b[3], b[4], b[5], b[6]);
b = [23, b[1], e, !1];
var f = e && this.c[e];
if (f) {
var d = this.n(f);
d && (b[4] = d);
c ? (b[5] = f.tagName, b[6] = f.src || f.data, b[7] = this.h()) :
d || document.contains(f) || (b[3] = !0, delete this.c[e])
}
this.a.postMessage(b)
};
m.g = function(b) {
try {
var c = parseInt(b.getAttribute("__idm_id__"));
c || (c = this.r << 10 | this.F++, b.setAttribute("__idm_id__", c));
this.c[c] = b;
return c
} catch (e) {}
};
m.h = function(b) {
var c;
try {
c = window.top.document.title
} catch (e) {}
if (c)
if (c = c.replace(/[ \t\r\n\u25B6]+/g, " ").trim(), b) this.a.postMessage([24, b, c]);
else return c
};
m.e = function(b) {
if (!this.l) {
var c = "\\b\\w+://(?:[%T]*(?::[%T]*)?#)?[%H.]+\\.[%H]+(?::\\d+)?(?:/(?:(?: +(?!\\w+:))?[%T/~;])*)?(?:\\?[%Q]*)?(?:#[%T]*)?".replace(/%\w/g,
function(b) {
return this[b]
}.bind({
"%H": "\\w\\-\u00a0-\ufeff",
"%T": "\\w\\-.+*()$!,%\u00a0-\ufeff",
"%Q": "^\\s\\[\\]{}()"
}));
this.l = new RegExp(c, "gi")
}
for (var e = []; c = this.l.exec(b);) e.push(c.shift());
return e
};
m.m = function(b, c, e) {
var f = [],
d = {},
n = "",
k = "",
p = !e,
q;
if (e && (q = b.getSelection(), !q || q.isCollapsed)) return f;
var r = b.getElementsByTagName("A");
if (r)
for (var h = 0; h < r.length; h++) {
var l = r[h];
if (l && (p || q.containsNode(l, !0))) {
var g = l.href;
g && !d[g] && c.test(g) && (d[g] = f.push([g, 2, l.innerText || l.title]));
e &&
d[g] && (n += l.innerText, n += "\n")
}
}
if (r = b.getElementsByTagName("AREA"))
for (h = 0; h < r.length; h++)(l = r[h]) && (p || q.containsNode(l, !0)) && (g = l.href) && !d[g] && c.test(g) && (d[g] = f.push([g, 2, l.alt]));
if (r = p && b.getElementsByTagName("IFRAME"))
for (h = 0; h < r.length; h++)(l = r[h]) && (p || q.containsNode(l, !0)) && (g = l.src) && !d[g] && c.test(g) && (d[g] = f.push([g, 4]));
if (h = e && q.toString())
for (l = this.e(h), n = this.e(n), h = 0; h < l.length; h++)(g = l[h]) && !d[g] && c.test(g) && 0 > n.indexOf(g) && (d[g] = f.push([g, 1]));
if (n = (p || !f.length) && b.getElementsByTagName("IMG"))
for (h =
0; h < n.length; h++)(l = n[h]) && (p || q.containsNode(l, !0)) && ((g = l.src) && !d[g] && c.test(g) && (d[g] = f.push([g, 3, "<<<=IDMTRANSMITIMGPREFIX=>>>" + l.alt])), p && l.onclick && (k += l.onclick, k += "\n"));
if (b = p && b.getElementsByTagName("SCRIPT")) {
for (h = 0; h < b.length; h++) k += b[h].innerText, k += "\n";
for (k = this.e(k); k.length;)(g = k.shift()) && !d[g] && c.test(g) && (d[g] = f.push([g, 5]))
}
return f
};
m.B = function(b, c) {
for (var e = this.m(document, b, c), f = document.getElementsByTagName("IFRAME"), d = Array.prototype.push, n = 0; n < f.length; n++) try {
var k =
f[n],
p = k.contentDocument;
p && !k.src && d.apply(e, this.m(p, b, c))
} catch (q) {}
return e
};
m.u = function(b) {
x[b.keyCode] && this.a.postMessage([31, b.keyCode, "keydown" == b.type])
};
m.L = function(b) {
this.s && this.a.postMessage([28]);
if (0 == b.button) {
var c = b.view.getSelection();
this.d = c && c.isCollapsed;
this.a.postMessage([32, b.button, !0])
}
};
m.M = function(b) {
if (0 == b.button && (this.i = b.clientX, this.j = b.clientY, this.a.postMessage([32, b.button, !1]), this.d)) {
this.d = !1;
var c = b.view.getSelection();
c && !c.isCollapsed && this.a.postMessage([26,
b.clientX, b.clientY, this.p()
])
}
};
m.K = function() {
this.d = !1;
this.a.postMessage([33])
};
m.O = function() {
this.a.postMessage([29])
};
m.N = function(b) {
b = b.target;
this.a.postMessage([30, b.innerWidth, b.innerHeight])
};
m.I = function(b) {
var c = b.target,
e = c.tagName;
0 <= C.indexOf(e) && b.url && (c = this.g(c), this.a.postMessage([25, c, e, b.url]))
};
m.J = function() {
this.t && this.f()
};
m.onMessage = function(b) {
switch (b[0]) {
case 11:
var c = b[2];
if (c) {
this.k = c;
try {
window.frameElement && window.frameElement.setAttribute("__idm_frm__", c)
} catch (e) {}
}
b[3] &&
this.o();
b[4] && this.f();
break;
case 17:
b[1] && this.o();
b[2] && this.f(!0);
break;
case 12:
var c = this.B(b[4] ? new RegExp(b[4], "i") : null, b[2]),
f = [27, b[1], this.k, c.length];
b[3] || (f[4] = c, f[5] = window.location.href, this.G && (f[6] = window.location.href, f[7] = document.title));
this.a.postMessage(f);
break;
case 13:
this.s = b[1];
break;
case 14:
this.h(b[1]);
break;
case 15:
this.C(b);
break;
case 16:
this.D(b)
}
};
m.b = function(b) {
var c = Array.prototype.slice.call(arguments);
c[2] = c[2].bind(this);
this.q.push(c);
b.addEventListener.apply(b,
c.slice(1))
};
m.v = function() {
for (var b; b = this.q.shift();) {
var c = b.shift();
c.removeEventListener.apply(c, b)
}
this.a = this.r = null;
window.a = !1
};
new t
};
It looks like one of your chrome extensions is throwing a javascript error. Please disable all of your chrome extensions and test. Especially disable Internet Download Manager if you have it installed.
Thanks Clayton Leis, I disabled the Internet Download Manager extension and error is gone. content script of idm extension was creating problem, Thanks again :).
I've modified the Nivo Slider code, using a 960px container.
The image slot has a width of 50%, as does the caption, which is floated off to the left.
I mainly used z-index to make this work. But now, the caption for the NEXT image in my set is loading about .5 seconds before its image does.
How can I modify the JS to make the image and corresponding caption rotate at the exact same time? Or, at the very least, which part of the JS should I focus on?
Note: I'm rotating between 3 different images/captions.
Here is the JS:
(function(e) {
var t = function(t, n) {
var r = e.extend({}, e.fn.nivoSlider.defaults, n);
var i = {
currentSlide: 0,
currentImage: "",
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
var s = e(t);
s.data("nivo:vars", i).addClass("nivoSlider");
var o = s.children();
o.each(function() {
var t = e(this);
var n = "";
if (!t.is("img")) {
if (t.is("a")) {
t.addClass("nivo-imageLink");
n = t
}
t = t.find("img:first")
}
var r = r === 0 ? t.attr("width") : t.width(),
s = s === 0 ? t.attr("height") : t.height();
if (n !== "") {
n.css("display", "none")
}
t.css("display", "none");
i.totalSlides++
});
if (r.randomStart) {
r.startSlide = Math.floor(Math.random() * i.totalSlides)
}
if (r.startSlide > 0) {
if (r.startSlide >= i.totalSlides) {
r.startSlide = i.totalSlides - 1
}
i.currentSlide = r.startSlide
}
if (e(o[i.currentSlide]).is("img")) {
i.currentImage = e(o[i.currentSlide])
} else {
i.currentImage = e(o[i.currentSlide]).find("img:first")
} if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
var u = e("<img/>").addClass("nivo-main-image");
u.attr("src", i.currentImage.attr("src")).show();
s.append(u);
e(window).resize(function() {
s.children("img").width(s.width());
u.attr("src", i.currentImage.attr("src"));
u.stop().height("auto");
e(".nivo-slice").remove();
e(".nivo-box").remove()
});
s.append(e('<div class="nivo-caption"></div>'));
var a = function(t) {
var n = e(".nivo-caption", s);
if (i.currentImage.attr("title") != "" && i.currentImage.attr("title") != undefined) {
var r = i.currentImage.attr("title");
if (r.substr(0, 1) == "#") r = e(r).html();
if (n.css("display") == "block") {
setTimeout(function() {
n.html(r)
}, t.animSpeed)
} else {
n.html(r);
n.stop().fadeIn(t.animSpeed)
}
} else {
n.stop().fadeOut(t.animSpeed)
}
};
a(r);
var f = 0;
if (!r.manualAdvance && o.length > 1) {
f = setInterval(function() {
d(s, o, r, false)
}, r.pauseTime)
}
if (r.directionNav) {
s.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + r.prevText + '</a><a class="nivo-nextNav">' + r.nextText + "</a></div>");
e(s).on("click", "a.nivo-prevNav", function() {
if (i.running) {
return false
}
clearInterval(f);
f = "";
i.currentSlide -= 2;
d(s, o, r, "prev")
});
e(s).on("click", "a.nivo-nextNav", function() {
if (i.running) {
return false
}
clearInterval(f);
f = "";
d(s, o, r, "next")
})
}
if (r.controlNav) {
i.controlNavEl = e('<div class="nivo-controlNav"></div>');
s.after(i.controlNavEl);
for (var l = 0; l < o.length; l++) {
if (r.controlNavThumbs) {
i.controlNavEl.addClass("nivo-thumbs-enabled");
var c = o.eq(l);
if (!c.is("img")) {
c = c.find("img:first")
}
if (c.attr("data-thumb")) i.controlNavEl.append('<a class="nivo-control" rel="' + l + '"><img src="' + c.attr("data-thumb") + '" alt="" /></a>')
} else {
i.controlNavEl.append('<a class="nivo-control" rel="' + l + '">' + (l + 1) + "</a>")
}
}
e("a:eq(" + i.currentSlide + ")", i.controlNavEl).addClass("active");
e("a", i.controlNavEl).bind("click", function() {
if (i.running) return false;
if (e(this).hasClass("active")) return false;
clearInterval(f);
f = "";
u.attr("src", i.currentImage.attr("src"));
i.currentSlide = e(this).attr("rel") - 1;
d(s, o, r, "control")
})
}
if (r.pauseOnHover) {
s.hover(function() {
i.paused = true;
clearInterval(f);
f = ""
}, function() {
i.paused = false;
if (f === "" && !r.manualAdvance) {
f = setInterval(function() {
d(s, o, r, false)
}, r.pauseTime)
}
})
}
s.bind("nivo:animFinished", function() {
u.attr("src", i.currentImage.attr("src"));
i.running = false;
e(o).each(function() {
if (e(this).is("a")) {
e(this).css("display", "none")
}
});
if (e(o[i.currentSlide]).is("a")) {
e(o[i.currentSlide]).css("display", "block")
}
if (f === "" && !i.paused && !r.manualAdvance) {
f = setInterval(function() {
d(s, o, r, false)
}, r.pauseTime)
}
r.afterChange.call(this)
});
var h = function(t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().is("a") ? e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().height() : e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height();
for (var s = 0; s < n.slices; s++) {
var o = Math.round(t.width() / n.slices);
if (s === n.slices - 1) {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: t.width() - o * s + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
} else {
t.append(e('<div class="nivo-slice" name="' + s + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (o + s * o - o) + 'px;" /></div>').css({
left: o * s + "px",
width: o + "px",
height: i + "px",
opacity: "0",
overflow: "hidden"
}))
}
}
e(".nivo-slice", t).height(i);
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var p = function(t, n, r) {
if (e(r.currentImage).parent().is("a")) e(r.currentImage).parent().css("display", "block");
e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
var i = Math.round(t.width() / n.boxCols),
s = Math.round(e('img[src="' + r.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height() / n.boxRows);
for (var o = 0; o < n.boxRows; o++) {
for (var a = 0; a < n.boxCols; a++) {
if (a === n.boxCols - 1) {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: t.width() - i * a + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
} else {
t.append(e('<div class="nivo-box" name="' + a + '" rel="' + o + '"><img src="' + r.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + s * o + "px; left:-" + i * a + 'px;" /></div>').css({
opacity: 0,
left: i * a + "px",
top: s * o + "px",
width: i + "px"
}));
e('.nivo-box[name="' + a + '"]', t).height(e('.nivo-box[name="' + a + '"] img', t).height() + "px")
}
}
}
u.stop().animate({
height: e(r.currentImage).height()
}, n.animSpeed)
};
var d = function(t, n, r, i) {
var s = t.data("nivo:vars");
if (s && s.currentSlide === s.totalSlides - 1) {
r.lastSlide.call(this)
}
if ((!s || s.stop) && !i) {
return false
}
r.beforeChange.call(this);
if (!i) {
u.attr("src", s.currentImage.attr("src"))
} else {
if (i === "prev") {
u.attr("src", s.currentImage.attr("src"))
}
if (i === "next") {
u.attr("src", s.currentImage.attr("src"))
}
}
s.currentSlide++;
if (s.currentSlide === s.totalSlides) {
s.currentSlide = 0;
r.slideshowEnd.call(this)
}
if (s.currentSlide < 0) {
s.currentSlide = s.totalSlides - 1
}
if (e(n[s.currentSlide]).is("img")) {
s.currentImage = e(n[s.currentSlide])
} else {
s.currentImage = e(n[s.currentSlide]).find("img:first")
} if (r.controlNav) {
e("a", s.controlNavEl).removeClass("active");
e("a:eq(" + s.currentSlide + ")", s.controlNavEl).addClass("active")
}
a(r);
e(".nivo-slice", t).remove();
e(".nivo-box", t).remove();
var o = r.effect,
f = "";
if (r.effect === "random") {
f = new Array("sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse");
o = f[Math.floor(Math.random() * (f.length + 1))];
if (o === undefined) {
o = "fade"
}
}
if (r.effect.indexOf(",") !== -1) {
f = r.effect.split(",");
o = f[Math.floor(Math.random() * f.length)];
if (o === undefined) {
o = "fade"
}
}
if (s.currentImage.attr("data-transition")) {
o = s.currentImage.attr("data-transition")
}
s.running = true;
var l = 0,
c = 0,
d = "",
m = "",
g = "",
y = "";
if (o === "sliceDown" || o === "sliceDownRight" || o === "sliceDownLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function() {
var n = e(this);
n.css({
top: "0px"
});
if (c === r.slices - 1) {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUp" || o === "sliceUpRight" || o === "sliceUpLeft") {
h(t, r, s);
l = 0;
c = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function() {
var n = e(this);
n.css({
bottom: "0px"
});
if (c === r.slices - 1) {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "sliceUpDown" || o === "sliceUpDownRight" || o === "sliceUpDownLeft") {
h(t, r, s);
l = 0;
c = 0;
var b = 0;
d = e(".nivo-slice", t);
if (o === "sliceUpDownLeft") {
d = e(".nivo-slice", t)._reverse()
}
d.each(function() {
var n = e(this);
if (c === 0) {
n.css("top", "0px");
c++
} else {
n.css("bottom", "0px");
c = 0
} if (b === r.slices - 1) {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
b++
})
} else if (o === "fold") {
h(t, r, s);
l = 0;
c = 0;
e(".nivo-slice", t).each(function() {
var n = e(this);
var i = n.width();
n.css({
top: "0px",
width: "0px"
});
if (c === r.slices - 1) {
setTimeout(function() {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
width: i,
opacity: "1.0"
}, r.animSpeed)
}, 100 + l)
}
l += 50;
c++
})
} else if (o === "fade") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: t.width() + "px"
});
m.animate({
opacity: "1.0"
}, r.animSpeed * 2, "", function() {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInRight") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function() {
t.trigger("nivo:animFinished")
})
} else if (o === "slideInLeft") {
h(t, r, s);
m = e(".nivo-slice:first", t);
m.css({
width: "0px",
opacity: "1",
left: "",
right: "0px"
});
m.animate({
width: t.width() + "px"
}, r.animSpeed * 2, "", function() {
m.css({
left: "0px",
right: ""
});
t.trigger("nivo:animFinished")
})
} else if (o === "boxRandom") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
y = v(e(".nivo-box", t));
y.each(function() {
var n = e(this);
if (c === g - 1) {
setTimeout(function() {
n.animate({
opacity: "1"
}, r.animSpeed, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + l)
} else {
setTimeout(function() {
n.animate({
opacity: "1"
}, r.animSpeed)
}, 100 + l)
}
l += 20;
c++
})
} else if (o === "boxRain" || o === "boxRainReverse" || o === "boxRainGrow" || o === "boxRainGrowReverse") {
p(t, r, s);
g = r.boxCols * r.boxRows;
c = 0;
l = 0;
var w = 0;
var E = 0;
var S = [];
S[w] = [];
y = e(".nivo-box", t);
if (o === "boxRainReverse" || o === "boxRainGrowReverse") {
y = e(".nivo-box", t)._reverse()
}
y.each(function() {
S[w][E] = e(this);
E++;
if (E === r.boxCols) {
w++;
E = 0;
S[w] = []
}
});
for (var x = 0; x < r.boxCols * 2; x++) {
var T = x;
for (var N = 0; N < r.boxRows; N++) {
if (T >= 0 && T < r.boxCols) {
(function(n, i, s, u, a) {
var f = e(S[n][i]);
var l = f.width();
var c = f.height();
if (o === "boxRainGrow" || o === "boxRainGrowReverse") {
f.width(0).height(0)
}
if (u === a - 1) {
setTimeout(function() {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3, "", function() {
t.trigger("nivo:animFinished")
})
}, 100 + s)
} else {
setTimeout(function() {
f.animate({
opacity: "1",
width: l,
height: c
}, r.animSpeed / 1.3)
}, 100 + s)
}
})(N, T, l, c, g);
c++
}
T--
}
l += 100
}
}
};
var v = function(e) {
for (var t, n, r = e.length; r; t = parseInt(Math.random() * r, 10), n = e[--r], e[r] = e[t], e[t] = n);
return e
};
var m = function(e) {
if (this.console && typeof console.log !== "undefined") {
console.log(e)
}
};
this.stop = function() {
if (!e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = true;
m("Stop Slider")
}
};
this.start = function() {
if (e(t).data("nivo:vars").stop) {
e(t).data("nivo:vars").stop = false;
m("Start Slider")
}
};
r.afterLoad.call(this);
return this
};
e.fn.nivoSlider = function(n) {
return this.each(function(r, i) {
var s = e(this);
if (s.data("nivoslider")) {
return s.data("nivoslider")
}
var o = new t(this, n);
s.data("nivoslider", o)
})
};
e.fn.nivoSlider.defaults = {
effect: "random",
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3e3,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: "Prev",
nextText: "Next",
randomStart: false,
beforeChange: function() {},
afterChange: function() {},
slideshowEnd: function() {},
lastSlide: function() {},
afterLoad: function() {}
};
e.fn._reverse = [].reverse
})(jQuery) = [].reverse
})(jQuery)