Develop Reference

setTimeout not working client side on landing page

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";
}
};

How to decode this url (combination of Base64 and UTF8)?

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.

Prevent collisions with new paths

I'm building a program that runs through an matrix (nxn) avoiding collisions with certain obstacles. I'm having trouble implementing a generic algorithm that works for all possible collision situations, the ultimate goal is to go through all the points of the matrix.
The algorithm I built is looping and can not complete the matrix.
Note: The red square can move in any direction (horizontal, vertical and diagonal movements), but only one cell(square) at a time.
var WALL = 0;
var started = false;
var gridSize = 20;
class Agent {
constructor(x, y, charge, cap, distance) {
this.x = x;
this.y = y;
this.charge = charge;
this.cap = cap;
this.distance = distance;
}
}
$(function() {
var $grid = $("#search_grid");
var opts = {
gridSize: 20
};
var grid = new GraphSearch($grid, opts);
//Initializes the agent
$("#btnInit").click(function() {
if (!started) {
var agent = new Agent(0, 0, 100, 50, 0);
agent.initialize();
started = true;
}
});
});
//Initializes the matrix
function GraphSearch($graph, options) {
this.$graph = $graph;
this.opts = options;
this.initialize();
}
//Initializes the matrix
GraphSearch.prototype.initialize = function() {
this.grid = [];
$graph = this.$graph;
$graph.empty();
var cellWidth = ($graph.width() / this.opts.gridSize) - 2,
cellHeight = ($graph.height() / this.opts.gridSize) - 2,
lineHeight = (this.opts.gridSize >= 30 ? "9.px" : ($graph.height() / this.opts.gridSize) - 10 + "px"),
fontSize = (this.opts.gridSize >= 30 ? "10px" : "20px");
$cellTemplate = $("<span />").addClass("grid_item").width(cellWidth).height(cellHeight).css("line-height", lineHeight).css("font-size", fontSize);
for (var x = 0; x < this.opts.gridSize; x++) {
var $row = $("<div class='row' />");
for (var y = 0; y < this.opts.gridSize; y++) {
var id = "cell_" + x + "_" + y,
$cell = $cellTemplate.clone();
$cell.attr("id", id).attr("x", x).attr("y", y);
$row.append($cell);
var isWall = addWall(x, y, this.opts.gridSize);
if (isWall === 1) {
$cell.addClass("wall");
} else {
$cell.addClass('weight1');
}
}
$graph.append($row);
//Fix for stackoverflow snippet
if ($(window).width() < 700) {
$("#search_grid").css("width", "320px");
$("#main").css("width", "38%");
} else {
$("#search_grid").css("width", "300px");
$("#main").css("width", "20%");
}
}
};
//Where will be wall in the matrix
addWall = function(x, y, size) {
var limitPointLeftUp = [2, 3];
var limitPointRightUp = [2, size - 4];
var limitPointLeftDown = [size - 4, 2];
var limitPointRightDown = [size - 4, size - 4];
if ((x == 2 && y == 2) || (x == 2 && y == size - 3)) {
return 1;
}
if ((x == size - 3 && y == 2) || (x == size - 3 && y == size - 3)) {
return 1;
}
if (x >= 2 && (y == 3 && x >= limitPointLeftUp[0] && x <= limitPointLeftDown[0] + 1)) {
return 1;
}
if (x >= 2 && (y == size - 4 && x >= limitPointRightUp[0] && x <= limitPointRightDown[0] + 1)) {
return 1;
}
if ((x == 1 && y == 5) || (x == 9 && y == 17) || (x == 6 && y == 0) || (x == 9 && y == 7) || (x == 15 && y == 0) || (x == 15 && y == 2) || (x == 18 && y == 15)) {
return 1;
}
}
//Initializes the agent
Agent.prototype.initialize = function() {
var agent = this;
var lastDir = "right";
var tryTo = "";
var trying = false;
var right = true;
var up = false;
var down = false;
var left = false;
var timerId = 0;
//Simulates agent movement [Here is my problem]
timerId = setInterval(function() {
RemoveAgent();
var cell = $("#search_grid .row .grid_item[x=" + agent.x + "][y=" + agent.y + "]");
cell.css("background-color", "#e2e2e2");
cell.addClass("agent");
//start direction: right
if (right) {
lastDir = "right";
if (tryTo == "down" && trying) {
if (EmptySqm(agent.x + 1, agent.y)) {
trying = false;
right = false;
down = true;
agent.x++;
}
} else if (tryTo == "up" && trying) {
if (EmptySqm(agent.x - 1, agent.y)) {
trying = false;
right = false;
up = true;
agent.x--;
}
}
if (right) {
//check if is valid sqm
if (ValidSqm(agent.x, agent.y + 1)) {
//go right if empty
if (EmptySqm(agent.x, agent.y + 1)) {
agent.y++;
} else {
right = false;
//check up sqm
if (EmptySqm(agent.x - 1, agent.y)) {
up = true;
trying = true;
}
//check down
else if (EmptySqm(agent.x + 1, agent.y)) {
down = true;
trying = true;
}
}
} else {
agent.x++;
right = false;
left = true;
}
}
//left direction
} else if (left) {
lastDir = "left";
if (tryTo == "down" && trying) {
if (EmptySqm(agent.x + 1, agent.y)) {
trying = false;
left = false;
down = true;
agent.x++;
}
} else if (tryTo == "up" && trying) {
if (EmptySqm(agent.x - 1, agent.y)) {
trying = false;
left = false;
up = true;
agent.x--;
}
}
if (left) {
if (ValidSqm(agent.x, agent.y - 1)) {
if (EmptySqm(agent.x, agent.y - 1)) {
agent.y--;
} else {
left = false;
if (EmptySqm(agent.x + 1, agent.y)) {
down = true;
trying = true;
} else if (EmptySqm(agent.x - 1, agent.y)) {
up = true;
trying = true;
}
}
} else {
agent.x++;
right = true;
left = false;
}
}
//up direction
} else if (up) {
tryTo = "down";
if (lastDir == "left") {
if (EmptySqm(agent.x, agent.y - 1)) {
up = false;
left = true;
agent.y--;
}
} else if (lastDir == "right") {
if (EmptySqm(agent.x, agent.y + 1)) {
up = false;
right = true;
agent.y++;
}
}
if (up) {
if (ValidSqm(agent.x - 1, agent.y)) {
if (EmptySqm(agent.x - 1, agent.y)) {
agent.x--;
} else {
up = false;
//check left sqm
if (EmptySqm(agent.x, agent.y - 1)) {
left = true;
agent.y--;
}
//check right sqm
else if (EmptySqm(agent.x, agent.y + 1)) {
right = true;
agent.y++;
}
//check down sqm
else if (EmptySqm(agent.x + 1, agent.y)) {
down = true;
agent.x++;
}
}
} else {
agent.x++;
up = false;
down = true;
}
}
//down direction
} else if (down) {
tryTo = "up";
if (lastDir == "left") {
if (EmptySqm(agent.x, agent.y - 1)) {
down = false;
left = true;
agent.y--;
}
} else if (lastDir == "right") {
if (EmptySqm(agent.x, agent.y + 1)) {
down = false;
right = true;
agent.y++;
}
}
if (down) {
if (ValidSqm(agent.x + 1, agent.y)) {
if (EmptySqm(agent.x + 1, agent.y)) {
agent.x++;
} else {
down = false;
//check left sqm
if (EmptySqm(agent.x, agent.y - 1)) {
left = true;
agent.y--;
}
//check right sqm
else if (EmptySqm(agent.x, agent.y + 1)) {
right = true;
agent.y++;
}
//check up sqm
else if (EmptySqm(agent.x - 1, agent.y)) {
up = true;
agent.x--;
}
}
} else {
agent.x--;
up = true;
down = false;
}
}
}
}, 100);
var stopInterval = function() {
clearInterval(timerId);
};
};
EmptySqm = function(x, y) {
var bNotWall = !$("#search_grid .row .grid_item[x=" + x + "][y=" + y + "]").hasClass("wall");
return bNotWall;
}
RemoveAgent = function() {
$("#search_grid .row .grid_item").removeClass("agent");
}
ValidSqm = function(x, y) {
return ((x >= 0 && x < gridSize) && (y >= 0 && y < gridSize));
}
html,
body {
height: 100%;
margin: 0;
}
.buttons {
float: right;
position: relative;
right: 10px;
top: 10px;
}
.buttons a {
text-decoration: none;
}
#content {
margin: 0 auto;
width: 98%;
text-align: center;
}
#controls {
text-align: center;
margin-bottom: 25px;
padding: 5px;
}
#search_grid {
width: 320px;
height: 300px;
position: relative;
}
#main {
margin: auto;
width: 20%;
}
.grid_item {
display: block;
border: 1px solid #bbb;
float: left;
line-height: 12px;
font-size: 10px;
}
.grid_item.wall {
background-color: #000000;
}
.grid_item.weight1 {
background-color: #ffffff;
}
.agent {
text-align: center;
color: grey;
font-size: 20px;
background-color: red !important;
color: blue;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="content">
<input type="button" id="btnInit" value="Start" /><br><br>
<div id="main">
<div id="search_grid">Loading...</div>
</div>
</div>
<div id="footer"></div>
</body>

I solved my problem with the help of the a* algorithm, more specifically this implementation, the deviation of the obstacles is done with the move method, which returns the path to a certain cell
path = grid.move(currentCell, endCell);
var agentSpeed = 10;
var WALL = 0;
var started = false;
var gridSize = 20;
var x = 0;
var y = 0;
var runsSameLine = false;
class Agent {
constructor(x, y, charge, cap, distance) {
this.x = x;
this.y = y;
this.charge = charge;
this.cap = cap;
this.distance = distance;
}
}
$(function() {
var $grid = $("#search_grid");
var opts = {
gridSize: gridSize
};
var grid = new GraphSearch($grid, opts, astar.search);
//Initializes the agent
$("#btnInit").click(function() {
if (!started) {
var agent = new Agent(0, 0, 100, 50, 0);
agent.initialize();
started = true;
}
});
});
//Initializes the matrix
function GraphSearch($graph, options, implementation) {
this.$graph = $graph;
this.search = implementation;
this.opts = options;
this.initialize();
}
var grid;
GraphSearch.prototype.move = function($start, $end) {
var end = this.nodeFromElement($end);
if ($end.hasClass("wall")) {
return;
}
var start = this.nodeFromElement($start);
var path = this.search(this.graph.nodes, start, end, true);
if (!path || path.length == 0) {
//this.animateNoPath();
} else {
return path;
}
};
GraphSearch.prototype.nodeFromElement = function($cell) {
return this.graph.nodes[parseInt($cell.attr("x"))][parseInt($cell.attr("y"))];
};
//Initializes the matrix
GraphSearch.prototype.initialize = function() {
this.grid = [];
var self = this,
nodes = [],
$graph = this.$graph;
$graph.empty();
var cellWidth = ($graph.width() / this.opts.gridSize) - 2,
cellHeight = ($graph.height() / this.opts.gridSize) - 2,
lineHeight = (this.opts.gridSize >= 30 ? "9.px" : ($graph.height() / this.opts.gridSize) - 10 + "px"),
fontSize = (this.opts.gridSize >= 30 ? "10px" : "20px");
$cellTemplate = $("<span />").addClass("grid_item").width(cellWidth).height(cellHeight).css("line-height", lineHeight).css("font-size", fontSize);
for (var x = 0; x < this.opts.gridSize; x++) {
var $row = $("<div class='row' />");
nodeRow = [],
gridRow = [];
for (var y = 0; y < this.opts.gridSize; y++) {
var id = "cell_" + x + "_" + y,
$cell = $cellTemplate.clone();
$cell.attr("id", id).attr("x", x).attr("y", y);
$row.append($cell);
gridRow.push($cell);
var isWall = addWall(x, y, this.opts.gridSize);
if (isWall === 1) {
$cell.addClass("wall");
nodeRow.push(1);
} else {
$cell.addClass('weight1');
nodeRow.push(0);
}
}
$graph.append($row);
this.grid.push(gridRow);
nodes.push(nodeRow);
//Fix for stackoverflow snippet
if ($(window).width() < 700) {
$("#search_grid").css("width", "320px");
$("#main").css("width", "38%");
} else {
$("#search_grid").css("width", "300px");
$("#main").css("width", "20%");
}
}
this.graph = new Graph(nodes);
this.$cells = $graph.find(".grid_item");
grid = this;
};
//Where will be wall in the matrix
addWall = function(x, y, size) {
var limitPointLeftUp = [2, 3];
var limitPointRightUp = [2, size - 4];
var limitPointLeftDown = [size - 4, 2];
var limitPointRightDown = [size - 4, size - 4];
if ((x == 2 && y == 2) || (x == 2 && y == size - 3)) {
return 1;
}
if ((x == size - 3 && y == 2) || (x == size - 3 && y == size - 3)) {
return 1;
}
if (x >= 2 && (y == 3 && x >= limitPointLeftUp[0] && x <= limitPointLeftDown[0] + 1)) {
return 1;
}
if (x >= 2 && (y == size - 4 && x >= limitPointRightUp[0] && x <= limitPointRightDown[0] + 1)) {
return 1;
}
if ((x == 1 && y == 5) || (x == 9 && y == 17) || (x == 6 && y == 0) || (x == 9 && y == 7) || (x == 15 && y == 0) || (x == 15 && y == 2) || (x == 18 && y == 15)) {
return 1;
}
}
//Initializes the agent
Agent.prototype.initialize = function() {
var agent = this;
var goToLeft = false;
var goToRight = true;
var rightLimit = gridSize - 1;
var leftLimit = 0;
var lastPos = 0;
var path = [];
var completedPath = true;
timerId = setInterval(function() {
agent.x = x;
agent.y = y;
currentCell = $("#search_grid .row .grid_item[x=" + x + "][y=" + y + "]");
currentCell.css("background-color", "#e2e2e2");
if (agent.x == gridSize - 1 && agent.y == 0) {
stopInterval(timerId);
return false;
}
if (goToRight && y == rightLimit) {
if (runsSameLine) {
goToLeft = true;
goToRight = false;
runsSameLine = false;
} else {
if (FreeCell((x + 1), y)) {
endCell = $("#search_grid .row .grid_item[x=" + (x + 1) + "][y=" + y + "]");
x++;
goToLeft = true;
goToRight = false;
} else {
endCell = FindNextFreeCell(x, y, "limDir");
goToLeft = true;
goToRight = false;
}
}
} else if (goToLeft && y == leftLimit) {
if (runsSameLine) {
goToLeft = false;
goToRight = true;
runsSameLine = false;
} else {
if (FreeCell((x + 1), y)) {
endCell = $("#search_grid .row .grid_item[x=" + (x + 1) + "][y=" + y + "]");
x++;
goToLeft = false;
goToRight = true;
} else {
endCell = FindNextFreeCell(x, y, "limEsq");
goToLeft = false;
goToRight = true;
}
}
} else if (goToRight) {
if (FreeCell(x, (y + 1))) {
endCell = $("#search_grid .row .grid_item[x=" + x + "][y=" + (y + 1) + "]");
y++;
} else {
endCell = FindNextFreeCell(x, y, "dir");
}
} else if (goToLeft) {
if (FreeCell(x, (y - 1))) {
endCell = $("#search_grid .row .grid_item[x=" + x + "][y=" + (y - 1) + "]");
y--;
} else {
endCell = FindNextFreeCell(x, y, "esq");
}
}
if (completedPath) {
path = grid.move(currentCell, endCell);
}
if (path) {
if (lastPos == path.length - 1) {
completedPath = true;
}
if (path.length > 1 && lastPos < path.length && lastPos != path.length - 1) {
x = path[lastPos].x;
y = path[lastPos].y;
lastPos++;
completedPath = false;
} else if (completedPath) {
x = path[lastPos].x;
y = path[lastPos].y;
lastPos = 0;
}
}
grid.$cells.removeClass("agent");
$("#search_grid .row .grid_item[x=" + x + "][y=" + y + "]").addClass("agent");
}, agentSpeed);
var stopInterval = function() {
clearInterval(timerId);
};
};
FindNextFreeCell = function(x, y, dir) {
if (dir == "limDir") {
if (x != gridSize) {
for (var y = y; y >= 0; y--) {
if (FreeCell((x + 1), y)) {
return getCell((x + 1), y);
}
}
}
} else if (dir == "limEsq") {
if (x != gridSize) {
for (var y = y; y <= gridSize; y++) {
if (FreeCell((x + 1), y)) {
return getCell((x + 1), y);
}
}
}
} else if (dir == "dir") {
for (var y = y; y < gridSize - 1; y++) {
if (FreeCell(x, (y + 1))) {
return getCell(x, (y + 1));
}
}
for (var x = x; x <= gridSize - 1; x++) {
if (FreeCell((x + 1), y)) {
runsSameLine = true;
return getCell((x + 1), y);
}
}
} else if (dir == "esq") {
for (var y = y; y > 0; y--) {
if (FreeCell(x, (y - 1))) {
return getCell(x, (y - 1));
}
}
for (var x = x; x <= gridSize - 1; x++) {
if (FreeCell((x + 1), y)) {
runsSameLine = true;
return getCell((x + 1), y);
}
}
}
}
EmptySqm = function(x, y) {
var bNotWall = !$("#search_grid .row .grid_item[x=" + x + "][y=" + y + "]").hasClass("wall");
return bNotWall;
}
getCell = function(x, y) {
return $("#search_grid .row .grid_item[x=" + x + "][y=" + y + "]");
}
FreeCell = function(x, y) {
var bNaoTemParede = !$("#search_grid .row .grid_item[x=" + x + "][y=" + y + "]").hasClass("wall");
var bNaoTemLixeira = !$("#search_grid .row .grid_item[x=" + x + "][y=" + y + "]").hasClass("lixeira");
var bNaoTemRecarga = !$("#search_grid .row .grid_item[x=" + x + "][y=" + y + "]").hasClass("pontoRecarga");
return bNaoTemParede && bNaoTemLixeira && bNaoTemRecarga;
}
ValidSqm = function(x, y) {
return ((x >= 0 && x < gridSize) && (y >= 0 && y < gridSize));
}
// javascript-astar
// http://github.com/bgrins/javascript-astar
// Freely distributable under the MIT License.
// Implements the astar search algorithm in javascript using a binary heap.
var astar = {
init: function(grid) {
for (var x = 0, xl = grid.length; x < xl; x++) {
for (var y = 0, yl = grid[x].length; y < yl; y++) {
var node = grid[x][y];
node.f = 0;
node.g = 0;
node.h = 0;
node.cost = node.type;
node.visited = false;
node.closed = false;
node.parent = null;
}
}
},
heap: function() {
return new BinaryHeap(function(node) {
return node.f;
});
},
search: function(grid, start, end, diagonal, heuristic) {
astar.init(grid);
heuristic = heuristic || astar.manhattan;
diagonal = !!diagonal;
var openHeap = astar.heap();
openHeap.push(start);
while (openHeap.size() > 0) {
// Grab the lowest f(x) to process next. Heap keeps this sorted for us.
var currentNode = openHeap.pop();
// End case -- result has been found, return the traced path.
if (currentNode === end) {
var curr = currentNode;
var ret = [];
while (curr.parent) {
ret.push(curr);
curr = curr.parent;
}
return ret.reverse();
}
// Normal case -- move currentNode from open to closed, process each of its neighbors.
currentNode.closed = true;
// Find all neighbors for the current node. Optionally find diagonal neighbors as well (false by default).
var neighbors = astar.neighbors(grid, currentNode, diagonal);
for (var i = 0, il = neighbors.length; i < il; i++) {
var neighbor = neighbors[i];
if (neighbor.closed || neighbor.isWall() || $("#search_grid .row .grid_item[x=" + neighbor.x + "][y=" + neighbor.y + "]").hasClass("pontoRecarga") || $("#search_grid .row .grid_item[x=" + neighbor.x + "][y=" + neighbor.y + "]").hasClass("lixeira")) {
// Not a valid node to process, skip to next neighbor.
continue;
}
// The g score is the shortest distance from start to current node.
// We need to check if the path we have arrived at this neighbor is the shortest one we have seen yet.
var gScore = currentNode.g + neighbor.cost;
var beenVisited = neighbor.visited;
if (!beenVisited || gScore < neighbor.g) {
// Found an optimal (so far) path to this node. Take score for node to see how good it is.
neighbor.visited = true;
neighbor.parent = currentNode;
neighbor.h = neighbor.h || heuristic(neighbor.pos, end.pos);
neighbor.g = gScore;
neighbor.f = neighbor.g + neighbor.h;
if (!beenVisited) {
// Pushing to heap will put it in proper place based on the 'f' value.
openHeap.push(neighbor);
} else {
// Already seen the node, but since it has been rescored we need to reorder it in the heap
openHeap.rescoreElement(neighbor);
}
}
}
}
// No result was found - empty array signifies failure to find path.
return [];
},
manhattan: function(pos0, pos1) {
// See list of heuristics: http://theory.stanford.edu/~amitp/GameProgramming/Heuristics.html
var d1 = Math.abs(pos1.x - pos0.x);
var d2 = Math.abs(pos1.y - pos0.y);
return d1 + d2;
},
neighbors: function(grid, node, diagonals) {
var ret = [];
var x = node.x;
var y = node.y;
// West
if (grid[x - 1] && grid[x - 1][y]) {
ret.push(grid[x - 1][y]);
}
// East
if (grid[x + 1] && grid[x + 1][y]) {
ret.push(grid[x + 1][y]);
}
// South
if (grid[x] && grid[x][y - 1]) {
ret.push(grid[x][y - 1]);
}
// North
if (grid[x] && grid[x][y + 1]) {
ret.push(grid[x][y + 1]);
}
if (diagonals) {
// Southwest
if (grid[x - 1] && grid[x - 1][y - 1]) {
ret.push(grid[x - 1][y - 1]);
}
// Southeast
if (grid[x + 1] && grid[x + 1][y - 1]) {
ret.push(grid[x + 1][y - 1]);
}
// Northwest
if (grid[x - 1] && grid[x - 1][y + 1]) {
ret.push(grid[x - 1][y + 1]);
}
// Northeast
if (grid[x + 1] && grid[x + 1][y + 1]) {
ret.push(grid[x + 1][y + 1]);
}
}
return ret;
}
};
// javascript-astar
// http://github.com/bgrins/javascript-astar
// Freely distributable under the MIT License.
// Includes Binary Heap (with modifications) from Marijn Haverbeke.
// http://eloquentjavascript.net/appendix2.html
var GraphNodeType = {
OPEN: 0,
WALL: 1
};
// Creates a Graph class used in the astar search algorithm.
function Graph(grid) {
var nodes = [];
for (var x = 0; x < grid.length; x++) {
nodes[x] = [];
for (var y = 0, row = grid[x]; y < row.length; y++) {
nodes[x][y] = new GraphNode(x, y, row[y]);
}
}
this.input = grid;
this.nodes = nodes;
}
Graph.prototype.toString = function() {
var graphString = "\n";
var nodes = this.nodes;
var rowDebug, row, y, l;
for (var x = 0, len = nodes.length; x < len; x++) {
rowDebug = "";
row = nodes[x];
for (y = 0, l = row.length; y < l; y++) {
rowDebug += row[y].type + " ";
}
graphString = graphString + rowDebug + "\n";
}
return graphString;
};
function GraphNode(x, y, type) {
this.data = {};
this.x = x;
this.y = y;
this.pos = {
x: x,
y: y
};
this.type = type;
}
GraphNode.prototype.toString = function() {
return "[" + this.x + " " + this.y + "]";
};
GraphNode.prototype.isWall = function() {
return this.type === GraphNodeType.WALL;
};
function BinaryHeap(scoreFunction) {
this.content = [];
this.scoreFunction = scoreFunction;
}
BinaryHeap.prototype = {
push: function(element) {
// Add the new element to the end of the array.
this.content.push(element);
// Allow it to sink down.
this.sinkDown(this.content.length - 1);
},
pop: function() {
// Store the first element so we can return it later.
var result = this.content[0];
// Get the element at the end of the array.
var end = this.content.pop();
// If there are any elements left, put the end element at the
// start, and let it bubble up.
if (this.content.length > 0) {
this.content[0] = end;
this.bubbleUp(0);
}
return result;
},
remove: function(node) {
var i = this.content.indexOf(node);
// When it is found, the process seen in 'pop' is repeated
// to fill up the hole.
var end = this.content.pop();
if (i !== this.content.length - 1) {
this.content[i] = end;
if (this.scoreFunction(end) < this.scoreFunction(node)) {
this.sinkDown(i);
} else {
this.bubbleUp(i);
}
}
},
size: function() {
return this.content.length;
},
rescoreElement: function(node) {
this.sinkDown(this.content.indexOf(node));
},
sinkDown: function(n) {
// Fetch the element that has to be sunk.
var element = this.content[n];
// When at 0, an element can not sink any further.
while (n > 0) {
// Compute the parent element's index, and fetch it.
var parentN = ((n + 1) >> 1) - 1,
parent = this.content[parentN];
// Swap the elements if the parent is greater.
if (this.scoreFunction(element) < this.scoreFunction(parent)) {
this.content[parentN] = element;
this.content[n] = parent;
// Update 'n' to continue at the new position.
n = parentN;
}
// Found a parent that is less, no need to sink any further.
else {
break;
}
}
},
bubbleUp: function(n) {
// Look up the target element and its score.
var length = this.content.length,
element = this.content[n],
elemScore = this.scoreFunction(element);
while (true) {
// Compute the indices of the child elements.
var child2N = (n + 1) << 1,
child1N = child2N - 1;
// This is used to store the new position of the element,
// if any.
var swap = null;
var child1Score;
// If the first child exists (is inside the array)...
if (child1N < length) {
// Look it up and compute its score.
var child1 = this.content[child1N];
child1Score = this.scoreFunction(child1);
// If the score is less than our element's, we need to swap.
if (child1Score < elemScore) {
swap = child1N;
}
}
// Do the same checks for the other child.
if (child2N < length) {
var child2 = this.content[child2N],
child2Score = this.scoreFunction(child2);
if (child2Score < (swap === null ? elemScore : child1Score)) {
swap = child2N;
}
}
// If the element needs to be moved, swap it, and continue.
if (swap !== null) {
this.content[n] = this.content[swap];
this.content[swap] = element;
n = swap;
}
// Otherwise, we are done.
else {
break;
}
}
}
};
html,
body {
height: 100%;
margin: 0;
}
.buttons {
float: right;
position: relative;
right: 10px;
top: 10px;
}
.buttons a {
text-decoration: none;
}
#content {
margin: 0 auto;
width: 98%;
text-align: center;
}
#controls {
text-align: center;
margin-bottom: 25px;
padding: 5px;
}
#search_grid {
width: 300px;
height: 300px;
position: relative;
}
#main {
margin: auto;
width: 20%;
}
.grid_item {
display: block;
border: 1px solid #bbb;
float: left;
line-height: 12px;
font-size: 10px;
}
.grid_item.wall {
background-color: #000000;
}
.grid_item.weight1 {
background-color: #ffffff;
}
.agent {
text-align: center;
color: grey;
font-size: 20px;
background-color: red !important;
color: blue;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="content">
<input type="button" id="btnInit" value="Start" /><br><br>
<div id="main">
<div id="search_grid">Loading...</div>
</div>
</div>
<div id="footer"></div>
</body>

Reset jQuery animation after button click

I have an animation setup where after you click "open" button an animation is triggered. What I want to do is have it so that when you click "close" the animation is reset so that I can go and click "open" again to trigger animation again.
$('#open').click(function() {
//front page
$('#first').css({
transformOrigin: '0px 0px',
backfaceVisibility: 'hidden'
}).transition({
transform: 'rotateY(180deg)'
}, '2000');
//back of front page
$('#third').css({
transformOrigin: '0px 0px',
}).transition({
transform: 'rotateY(180deg)'
}, '2000', function() {
//group hide
$('#group').hide();
$('#fourth').show(0, function() {
$(this).css({
transformOrigin: '0px 0px',
backfaceVisibility: 'hidden'
}).transition({
transform: 'rotateX(180deg)'
}, '2000');
});
$('#sixth').show(0, function() {
$(this).css({
transformOrigin: '0px 0px',
}).transition({
transform: 'rotateX(180deg)'
}, '2000');
});
$('#fifth').show();
});
});
$('#close').click(function() {
//not sure what to put to reset
});
(function(t, e) {
if (typeof define === "function" && define.amd) {
define(["jquery"], e)
} else if (typeof exports === "object") {
module.exports = e(require("jquery"))
} else {
e(t.jQuery)
}
})(this, function(t) {
t.transit = {
version: "0.9.12",
propertyMap: {
marginLeft: "margin",
marginRight: "margin",
marginBottom: "margin",
marginTop: "margin",
paddingLeft: "padding",
paddingRight: "padding",
paddingBottom: "padding",
paddingTop: "padding"
},
enabled: true,
useTransitionEnd: false
};
var e = document.createElement("div");
var n = {};
function i(t) {
if (t in e.style) return t;
var n = ["Moz", "Webkit", "O", "ms"];
var i = t.charAt(0).toUpperCase() + t.substr(1);
for (var r = 0; r < n.length; ++r) {
var s = n[r] + i;
if (s in e.style) {
return s
}
}
}
function r() {
e.style[n.transform] = "";
e.style[n.transform] = "rotateY(90deg)";
return e.style[n.transform] !== ""
}
var s = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
n.transition = i("transition");
n.transitionDelay = i("transitionDelay");
n.transform = i("transform");
n.transformOrigin = i("transformOrigin");
n.filter = i("Filter");
n.transform3d = r();
var a = {
transition: "transitionend",
MozTransition: "transitionend",
OTransition: "oTransitionEnd",
WebkitTransition: "webkitTransitionEnd",
msTransition: "MSTransitionEnd"
};
var o = n.transitionEnd = a[n.transition] || null;
for (var u in n) {
if (n.hasOwnProperty(u) && typeof t.support[u] === "undefined") {
t.support[u] = n[u]
}
}
e = null;
t.cssEase = {
_default: "ease",
"in": "ease-in",
out: "ease-out",
"in-out": "ease-in-out",
snap: "cubic-bezier(0,1,.5,1)",
easeInCubic: "cubic-bezier(.550,.055,.675,.190)",
easeOutCubic: "cubic-bezier(.215,.61,.355,1)",
easeInOutCubic: "cubic-bezier(.645,.045,.355,1)",
easeInCirc: "cubic-bezier(.6,.04,.98,.335)",
easeOutCirc: "cubic-bezier(.075,.82,.165,1)",
easeInOutCirc: "cubic-bezier(.785,.135,.15,.86)",
easeInExpo: "cubic-bezier(.95,.05,.795,.035)",
easeOutExpo: "cubic-bezier(.19,1,.22,1)",
easeInOutExpo: "cubic-bezier(1,0,0,1)",
easeInQuad: "cubic-bezier(.55,.085,.68,.53)",
easeOutQuad: "cubic-bezier(.25,.46,.45,.94)",
easeInOutQuad: "cubic-bezier(.455,.03,.515,.955)",
easeInQuart: "cubic-bezier(.895,.03,.685,.22)",
easeOutQuart: "cubic-bezier(.165,.84,.44,1)",
easeInOutQuart: "cubic-bezier(.77,0,.175,1)",
easeInQuint: "cubic-bezier(.755,.05,.855,.06)",
easeOutQuint: "cubic-bezier(.23,1,.32,1)",
easeInOutQuint: "cubic-bezier(.86,0,.07,1)",
easeInSine: "cubic-bezier(.47,0,.745,.715)",
easeOutSine: "cubic-bezier(.39,.575,.565,1)",
easeInOutSine: "cubic-bezier(.445,.05,.55,.95)",
easeInBack: "cubic-bezier(.6,-.28,.735,.045)",
easeOutBack: "cubic-bezier(.175, .885,.32,1.275)",
easeInOutBack: "cubic-bezier(.68,-.55,.265,1.55)"
};
t.cssHooks["transit:transform"] = {
get: function(e) {
return t(e).data("transform") || new f
},
set: function(e, i) {
var r = i;
if (!(r instanceof f)) {
r = new f(r)
}
if (n.transform === "WebkitTransform" && !s) {
e.style[n.transform] = r.toString(true)
} else {
e.style[n.transform] = r.toString()
}
t(e).data("transform", r)
}
};
t.cssHooks.transform = {
set: t.cssHooks["transit:transform"].set
};
t.cssHooks.filter = {
get: function(t) {
return t.style[n.filter]
},
set: function(t, e) {
t.style[n.filter] = e
}
};
if (t.fn.jquery < "1.8") {
t.cssHooks.transformOrigin = {
get: function(t) {
return t.style[n.transformOrigin]
},
set: function(t, e) {
t.style[n.transformOrigin] = e
}
};
t.cssHooks.transition = {
get: function(t) {
return t.style[n.transition]
},
set: function(t, e) {
t.style[n.transition] = e
}
}
}
p("scale");
p("scaleX");
p("scaleY");
p("translate");
p("rotate");
p("rotateX");
p("rotateY");
p("rotate3d");
p("perspective");
p("skewX");
p("skewY");
p("x", true);
p("y", true);
function f(t) {
if (typeof t === "string") {
this.parse(t)
}
return this
}
f.prototype = {
setFromString: function(t, e) {
var n = typeof e === "string" ? e.split(",") : e.constructor === Array ? e : [e];
n.unshift(t);
f.prototype.set.apply(this, n)
},
set: function(t) {
var e = Array.prototype.slice.apply(arguments, [1]);
if (this.setter[t]) {
this.setter[t].apply(this, e)
} else {
this[t] = e.join(",")
}
},
get: function(t) {
if (this.getter[t]) {
return this.getter[t].apply(this)
} else {
return this[t] || 0
}
},
setter: {
rotate: function(t) {
this.rotate = b(t, "deg")
},
rotateX: function(t) {
this.rotateX = b(t, "deg")
},
rotateY: function(t) {
this.rotateY = b(t, "deg")
},
scale: function(t, e) {
if (e === undefined) {
e = t
}
this.scale = t + "," + e
},
skewX: function(t) {
this.skewX = b(t, "deg")
},
skewY: function(t) {
this.skewY = b(t, "deg")
},
perspective: function(t) {
this.perspective = b(t, "px")
},
x: function(t) {
this.set("translate", t, null)
},
y: function(t) {
this.set("translate", null, t)
},
translate: function(t, e) {
if (this._translateX === undefined) {
this._translateX = 0
}
if (this._translateY === undefined) {
this._translateY = 0
}
if (t !== null && t !== undefined) {
this._translateX = b(t, "px")
}
if (e !== null && e !== undefined) {
this._translateY = b(e, "px")
}
this.translate = this._translateX + "," + this._translateY
}
},
getter: {
x: function() {
return this._translateX || 0
},
y: function() {
return this._translateY || 0
},
scale: function() {
var t = (this.scale || "1,1").split(",");
if (t[0]) {
t[0] = parseFloat(t[0])
}
if (t[1]) {
t[1] = parseFloat(t[1])
}
return t[0] === t[1] ? t[0] : t
},
rotate3d: function() {
var t = (this.rotate3d || "0,0,0,0deg").split(",");
for (var e = 0; e <= 3; ++e) {
if (t[e]) {
t[e] = parseFloat(t[e])
}
}
if (t[3]) {
t[3] = b(t[3], "deg")
}
return t
}
},
parse: function(t) {
var e = this;
t.replace(/([a-zA-Z0-9]+)\((.*?)\)/g, function(t, n, i) {
e.setFromString(n, i)
})
},
toString: function(t) {
var e = [];
for (var i in this) {
if (this.hasOwnProperty(i)) {
if (!n.transform3d && (i === "rotateX" || i === "rotateY" || i === "perspective" || i === "transformOrigin")) {
continue
}
if (i[0] !== "_") {
if (t && i === "scale") {
e.push(i + "3d(" + this[i] + ",1)")
} else if (t && i === "translate") {
e.push(i + "3d(" + this[i] + ",0)")
} else {
e.push(i + "(" + this[i] + ")")
}
}
}
}
return e.join(" ")
}
};
function c(t, e, n) {
if (e === true) {
t.queue(n)
} else if (e) {
t.queue(e, n)
} else {
t.each(function() {
n.call(this)
})
}
}
function l(e) {
var i = [];
t.each(e, function(e) {
e = t.camelCase(e);
e = t.transit.propertyMap[e] || t.cssProps[e] || e;
e = h(e);
if (n[e]) e = h(n[e]);
if (t.inArray(e, i) === -1) {
i.push(e)
}
});
return i
}
function d(e, n, i, r) {
var s = l(e);
if (t.cssEase[i]) {
i = t.cssEase[i]
}
var a = "" + y(n) + " " + i;
if (parseInt(r, 10) > 0) {
a += " " + y(r)
}
var o = [];
t.each(s, function(t, e) {
o.push(e + " " + a)
});
return o.join(", ")
}
t.fn.transition = t.fn.transit = function(e, i, r, s) {
var a = this;
var u = 0;
var f = true;
var l = t.extend(true, {}, e);
if (typeof i === "function") {
s = i;
i = undefined
}
if (typeof i === "object") {
r = i.easing;
u = i.delay || 0;
f = typeof i.queue === "undefined" ? true : i.queue;
s = i.complete;
i = i.duration
}
if (typeof r === "function") {
s = r;
r = undefined
}
if (typeof l.easing !== "undefined") {
r = l.easing;
delete l.easing
}
if (typeof l.duration !== "undefined") {
i = l.duration;
delete l.duration
}
if (typeof l.complete !== "undefined") {
s = l.complete;
delete l.complete
}
if (typeof l.queue !== "undefined") {
f = l.queue;
delete l.queue
}
if (typeof l.delay !== "undefined") {
u = l.delay;
delete l.delay
}
if (typeof i === "undefined") {
i = t.fx.speeds._default
}
if (typeof r === "undefined") {
r = t.cssEase._default
}
i = y(i);
var p = d(l, i, r, u);
var h = t.transit.enabled && n.transition;
var b = h ? parseInt(i, 10) + parseInt(u, 10) : 0;
if (b === 0) {
var g = function(t) {
a.css(l);
if (s) {
s.apply(a)
}
if (t) {
t()
}
};
c(a, f, g);
return a
}
var m = {};
var v = function(e) {
var i = false;
var r = function() {
if (i) {
a.unbind(o, r)
}
if (b > 0) {
a.each(function() {
this.style[n.transition] = m[this] || null
})
}
if (typeof s === "function") {
s.apply(a)
}
if (typeof e === "function") {
e()
}
};
if (b > 0 && o && t.transit.useTransitionEnd) {
i = true;
a.bind(o, r)
} else {
window.setTimeout(r, b)
}
a.each(function() {
if (b > 0) {
this.style[n.transition] = p
}
t(this).css(l)
})
};
var z = function(t) {
this.offsetWidth;
v(t)
};
c(a, f, z);
return this
};
function p(e, i) {
if (!i) {
t.cssNumber[e] = true
}
t.transit.propertyMap[e] = n.transform;
t.cssHooks[e] = {
get: function(n) {
var i = t(n).css("transit:transform");
return i.get(e)
},
set: function(n, i) {
var r = t(n).css("transit:transform");
r.setFromString(e, i);
t(n).css({
"transit:transform": r
})
}
}
}
function h(t) {
return t.replace(/([A-Z])/g, function(t) {
return "-" + t.toLowerCase()
})
}
function b(t, e) {
if (typeof t === "string" && !t.match(/^[\-0-9\.]+$/)) {
return t
} else {
return "" + t + e
}
}
function y(e) {
var n = e;
if (typeof n === "string" && !n.match(/^[\-0-9\.]+/)) {
n = t.fx.speeds[n] || t.fx.speeds._default
}
return b(n, "ms")
}
t.transit.getTransitionValue = d;
return t
});
.container {
max-width: 1170px;
margin: auto;
}
.img-container {
margin-top:100px;
margin-left: 500px;
position: relative;
}
.absolute {
position: absolute;
}
.none {
display: none;
}
#first {
z-index: 6;
}
#fourth {
z-index: 5;
left:-100px;
}
#fifth {
z-index: 4;
left:-100px;
}
#sixth {
z-index: 4;
left:-100px;
}
#second {
z-index: 5;
}
<body>
<div class="container">
<button id="open">open</button>
<button id="close">close</button>
<div class="img-container">
<img id="first" class="border absolute" src="http://placehold.it/100x100.jpg" alt="" />
<div id="group">
<img id="second" class="border absolute" src="http://placehold.it/100x100.jpg" alt="" />
<img id="third" class="border absolute " src="http://placehold.it/100x100.jpg" alt="" />
</div>
<img id="fourth" class="border absolute none" src="http://placehold.it/200x100.jpg" alt="" />
<img id="fifth" class="border absolute none" src="http://placehold.it/200x100.jpg" alt="" />
<img id="sixth" class="border absolute none" src="http://placehold.it/200x100.jpg" alt="" /></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="transit.js"></script>
<script src="custom.js"></script>
</body>

You need to add the following in your code to reset to the original small square.
$('#close').click(function() {
$('#fifth').css({
display:'none'
});
$('#sixth').css({
display:'none'
});
$('#first').removeAttr('style');
});

$('#close').click(function() {
$('#first').removeAttr('style');
$('#second').removeAttr('style');
$('#third').removeAttr('style');
$('#group').removeAttr('style');
$('#fourth').removeAttr('style');
$('#fifth').removeAttr('style');
$('#sixth').removeAttr('style');
});
seems to fix the issue

adding autoplay to jquery.roundabout

I have a site I am working on that uses the roundabout from fredhq.com and I would like to make it so it auto plays, I have had a look on their website and can not work out where I need to add the relevant auto play code!
Here is the jquery.roundabout.js code:
// creates a default shape to be used for pathing
jQuery.extend({
roundabout_shape: {
def: 'lazySusan',
lazySusan: function(r, a, t) {
return {
x: Math.sin(r + a),
y: (Math.sin(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
}
}
});
jQuery.fn.roundabout = function() {
var options = (typeof arguments[0] != 'object') ? {} : arguments[0];
// set options and fill in defaults
options = {
bearing: (typeof options.bearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.bearing % 360.0),
tilt: (typeof options.tilt == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.tilt),
minZ: (typeof options.minZ == 'undefined') ? 100 : parseInt(options.minZ, 10),
maxZ: (typeof options.maxZ == 'undefined') ? 400 : parseInt(options.maxZ, 10),
minOpacity: (typeof options.minOpacity == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minOpacity),
maxOpacity: (typeof options.maxOpacity == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxOpacity),
minScale: (typeof options.minScale == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minScale),
maxScale: (typeof options.maxScale == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxScale),
duration: (typeof options.duration == 'undefined') ? 600 : parseInt(options.duration, 10),
btnNext: options.btnNext || null,
btnPrev: options.btnPrev || null,
easing: options.easing || 'swing',
clickToFocus: (options.clickToFocus !== false),
focusBearing: (typeof options.focusBearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.focusBearing % 360.0),
shape: options.shape || 'lazySusan',
debug: options.debug || false,
childSelector: options.childSelector || 'li',
startingChild: (typeof options.startingChild == 'undefined') ? null : parseInt(options.startingChild, 10),
reflect: (typeof options.reflect == 'undefined' || options.reflect === false) ? false : true
};
// assign things
this.each(function(i) {
var ref = jQuery(this);
var period = jQuery.roundabout_toFloat(360.0 / ref.children(options.childSelector).length);
var startingBearing = (options.startingChild === null) ? options.bearing : options.startingChild * period;
// set starting styles
ref
.addClass('roundabout-holder')
.css('padding', 0)
.css('position', 'relative')
.css('z-index', options.minZ);
// set starting options
ref.data('roundabout', {
'bearing': startingBearing,
'tilt': options.tilt,
'minZ': options.minZ,
'maxZ': options.maxZ,
'minOpacity': options.minOpacity,
'maxOpacity': options.maxOpacity,
'minScale': options.minScale,
'maxScale': options.maxScale,
'duration': options.duration,
'easing': options.easing,
'clickToFocus': options.clickToFocus,
'focusBearing': options.focusBearing,
'animating': 0,
'childInFocus': -1,
'shape': options.shape,
'period': period,
'debug': options.debug,
'childSelector': options.childSelector,
'reflect': options.reflect
});
// bind click events
if (options.clickToFocus === true) {
ref.children(options.childSelector).each(function(i) {
jQuery(this).click(function(e) {
var degrees = (options.reflect === true) ? 360.0 - (period * i) : period * i;
degrees = jQuery.roundabout_toFloat(degrees);
if (!jQuery.roundabout_isInFocus(ref, degrees)) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateAngleToFocus(degrees);
}
return false;
}
});
});
}
// bind next buttons
if (options.btnNext) {
jQuery(options.btnNext).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToNextChild();
}
return false;
});
}
// bind previous buttons
if (options.btnPrev) {
jQuery(options.btnPrev).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToPreviousChild();
}
return false;
});
}
});
// start children
this.roundabout_startChildren();
// callback once ready
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_startChildren = function() {
this.each(function(i) {
var ref = jQuery(this);
var data = ref.data('roundabout');
var children = ref.children(data.childSelector);
children.each(function(i) {
var degrees = (data.reflect === true) ? 360.0 - (data.period * i) : data.period * i;
// apply classes and css first
jQuery(this)
.addClass('roundabout-moveable-item')
.css('position', 'absolute');
// then measure
jQuery(this).data('roundabout', {
'startWidth': jQuery(this).width(),
'startHeight': jQuery(this).height(),
'startFontSize': parseInt(jQuery(this).css('font-size'), 10),
'degrees': degrees
});
});
ref.roundabout_updateChildPositions();
});
return this;
};
jQuery.fn.roundabout_setTilt = function(newTilt) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = newTilt;
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_setBearing = function(newBearing) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_toFloat(newBearing % 360, 2);
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustBearing = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_getBearing(jQuery(this)) + delta;
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustTilt = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = jQuery.roundabout_toFloat(jQuery(this).roundabout_get('tilt') + delta);
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_animateToBearing = function(bearing) {
bearing = jQuery.roundabout_toFloat(bearing);
var currentTime = new Date();
var duration = (typeof arguments[1] == 'undefined') ? null : arguments[1];
var easingType = (typeof arguments[2] == 'undefined') ? null : arguments[2];
var passedData = (typeof arguments[3] !== 'object') ? null : arguments[3];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout'), timer, easingFn, newBearing;
var thisDuration = (duration === null) ? data.duration : duration;
var thisEasingType = (easingType !== null) ? easingType : data.easing || 'swing';
if (passedData === null) {
passedData = {
timerStart: currentTime,
start: jQuery.roundabout_getBearing(ref),
totalTime: thisDuration
};
}
timer = currentTime - passedData.timerStart;
if (timer < thisDuration) {
data.animating = 1;
if (typeof jQuery.easing.def == 'string') {
easingFn = jQuery.easing[thisEasingType] || jQuery.easing[jQuery.easing.def];
newBearing = easingFn(null, timer, passedData.start, bearing - passedData.start, passedData.totalTime);
} else {
newBearing = jQuery.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing - passedData.start, passedData.totalTime);
}
ref.roundabout_setBearing(newBearing, function() { ref.roundabout_animateToBearing(bearing, thisDuration, thisEasingType, passedData); });
} else {
bearing = (bearing < 0) ? bearing + 360 : bearing % 360;
data.animating = 0;
ref.roundabout_setBearing(bearing);
}
});
return this;
};
jQuery.fn.roundabout_animateToDelta = function(delta) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
delta = jQuery.roundabout_getBearing(jQuery(this)) + jQuery.roundabout_toFloat(delta);
jQuery(this).roundabout_animateToBearing(delta, duration, easing);
});
return this;
};
jQuery.fn.roundabout_animateToChild = function(childPos) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
if (data.childInFocus !== childPos && data.animating === 0) {
var child = jQuery(ref.children(data.childSelector)[childPos]);
ref.roundabout_animateAngleToFocus(child.data('roundabout').degrees, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_animateToNearbyChild = function(passedArgs, which) {
var duration = passedArgs[0], easing = passedArgs[1];
this.each(function(i) {
var data = jQuery(this).data('roundabout');
var bearing = jQuery.roundabout_toFloat(360.0 - jQuery.roundabout_getBearing(jQuery(this)));
var period = data.period, j = 0, range;
var reflect = data.reflect;
var length = jQuery(this).children(data.childSelector).length;
bearing = (reflect === true) ? bearing % 360.0 : bearing;
if (data.animating === 0) {
// if we're not reflecting and we're moving to next or
// we are reflecting and we're moving previous
if ((reflect === false && which === 'next') || (reflect === true && which !== 'next')) {
bearing = (bearing === 0) ? 360 : bearing;
// counterclockwise
while (true && j < length) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing <= range.upper && bearing > range.lower) {
jQuery(this).roundabout_animateToDelta(bearing - range.lower, duration, easing);
break;
}
j++;
}
} else {
// clockwise
while (true) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing >= range.lower && bearing < range.upper) {
jQuery(this).roundabout_animateToDelta(bearing - range.upper, duration, easing);
break;
}
j++;
}
}
}
});
return this;
};
jQuery.fn.roundabout_animateToNextChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'next');
};
jQuery.fn.roundabout_animateToPreviousChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'previous');
};
// moves a given angle to the focus by the shortest means possible
jQuery.fn.roundabout_animateAngleToFocus = function(target) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var delta = jQuery.roundabout_getBearing(jQuery(this)) - target;
delta = (Math.abs(360.0 - delta) < Math.abs(0.0 - delta)) ? 360.0 - delta : 0.0 - delta;
delta = (delta > 180) ? -(360.0 - delta) : delta;
if (delta !== 0) {
jQuery(this).roundabout_animateToDelta(delta, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_updateChildPositions = function() {
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
var inFocus = -1;
var info = {
bearing: jQuery.roundabout_getBearing(ref),
tilt: data.tilt,
stage: { width: Math.floor(ref.width() * 0.9), height: Math.floor(ref.height() * 0.9) },
animating: data.animating,
inFocus: data.childInFocus,
focusBearingRad: jQuery.roundabout_degToRad(data.focusBearing),
shape: jQuery.roundabout_shape[data.shape] || jQuery.roundabout_shape[jQuery.roundabout_shape.def]
};
info.midStage = { width: info.stage.width / 2, height: info.stage.height / 2 };
info.nudge = { width: info.midStage.width + info.stage.width * 0.05, height: info.midStage.height + info.stage.height * 0.05 };
info.zValues = { min: data.minZ, max: data.maxZ, diff: data.maxZ - data.minZ };
info.opacity = { min: data.minOpacity, max: data.maxOpacity, diff: data.maxOpacity - data.minOpacity };
info.scale = { min: data.minScale, max: data.maxScale, diff: data.maxScale - data.minScale };
// update child positions
ref.children(data.childSelector).each(function(i) {
if (jQuery.roundabout_updateChildPosition(jQuery(this), ref, info, i) && info.animating === 0) {
inFocus = i;
jQuery(this).addClass('roundabout-in-focus');
} else {
jQuery(this).removeClass('roundabout-in-focus');
}
});
// update status of who is in focus
if (inFocus !== info.inFocus) {
jQuery.roundabout_triggerEvent(ref, info.inFocus, 'blur');
if (inFocus !== -1) {
jQuery.roundabout_triggerEvent(ref, inFocus, 'focus');
}
data.childInFocus = inFocus;
}
});
return this;
};
//----------------
jQuery.roundabout_getBearing = function(el) {
return jQuery.roundabout_toFloat(el.data('roundabout').bearing) % 360;
};
jQuery.roundabout_degToRad = function(degrees) {
return (degrees % 360.0) * Math.PI / 180.0;
};
jQuery.roundabout_isInFocus = function(el, target) {
return (jQuery.roundabout_getBearing(el) % 360 === (target % 360));
};
jQuery.roundabout_triggerEvent = function(el, child, eventType) {
return (child < 0) ? this : jQuery(el.children(el.data('roundabout').childSelector)[child]).trigger(eventType);
};
jQuery.roundabout_toFloat = function(number) {
number = Math.round(parseFloat(number) * 1000) / 1000;
return parseFloat(number.toFixed(2));
};
jQuery.roundabout_updateChildPosition = function(child, container, info, childPos) {
var ref = jQuery(child), data = ref.data('roundabout'), out = [];
var rad = jQuery.roundabout_degToRad((360.0 - ref.data('roundabout').degrees) + info.bearing);
// adjust radians to be between 0 and Math.PI * 2
while (rad < 0) {
rad = rad + Math.PI * 2;
}
while (rad > Math.PI * 2) {
rad = rad - Math.PI * 2;
}
var factors = info.shape(rad, info.focusBearingRad, info.tilt); // obj with x, y, z, and scale values
// correct
factors.scale = (factors.scale > 1) ? 1 : factors.scale;
factors.adjustedScale = (info.scale.min + (info.scale.diff * factors.scale)).toFixed(4);
factors.width = (factors.adjustedScale * data.startWidth).toFixed(4);
factors.height = (factors.adjustedScale * data.startHeight).toFixed(4);
// alter item
ref
.css('left', ((factors.x * info.midStage.width + info.nudge.width) - factors.width / 2.0).toFixed(1) + 'px')
.css('top', ((factors.y * info.midStage.height + info.nudge.height) - factors.height / 2.0).toFixed(1) + 'px')
.css('width', factors.width + 'px')
.css('height', factors.height + 'px')
.css('opacity', (info.opacity.min + (info.opacity.diff * factors.scale)).toFixed(2))
.css('z-index', Math.round(info.zValues.min + (info.zValues.diff * factors.z)))
.css('font-size', (factors.adjustedScale * data.startFontSize).toFixed(2) + 'px')
.attr('current-scale', factors.adjustedScale);
if (container.data('roundabout').debug === true) {
out.push('<div style="font-weight: normal; font-size: 10px; padding: 2px; width: ' + ref.css('width') + '; background-color: #ffc;">');
out.push('<strong style="font-size: 12px; white-space: nowrap;">Child ' + childPos + '</strong><br />');
out.push('<strong>left:</strong> ' + ref.css('left') + '<br /><strong>top:</strong> ' + ref.css('top') + '<br />');
out.push('<strong>width:</strong> ' + ref.css('width') + '<br /><strong>opacity:</strong> ' + ref.css('opacity') + '<br />');
out.push('<strong>z-index:</strong> ' + ref.css('z-index') + '<br /><strong>font-size:</strong> ' + ref.css('font-size') + '<br />');
out.push('<strong>scale:</strong> ' + ref.attr('current-scale'));
out.push('</div>');
ref.html(out.join(''));
}
return jQuery.roundabout_isInFocus(container, ref.data('roundabout').degrees);
};
Many thanks in advance for any help and advice.
Phil

The source you posted doesn't seem to be the latest version of Roundabout.
I just tried with the latest version, and it works perfectly:
$(document).ready(function() {
$('ul').roundabout({
autoplay: true,
autoplayDuration: 1000,
autoplayPauseOnHover: true
});
});
See http://jsfiddle.net/SfAuF/ for an example.
Download the latest version from GitHub.