Develop Reference

the search bar does not display result

in the home page the search bar doesn't work by entering a keyword it goes into a loop and we don't display the list of search results from the console we display these errors advice to solve the problem, below is the code where we find the error if it helps
we think this is the code related to the problem, we await feedback and suggestions to solve the problem
try {
r.send(i.hasContent && i.data || null)
} catch (e) {
if (o) throw e
}
}, abort: function() {
o && o()
}
}
}), S.ajaxPrefilter(function(e) {
e.crossDomain && (e.contents.script = !1)
}), S.ajaxSetup({
accepts: {
script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
},
contents: {
script: /\b(?:java|ecma)script\b/
},
converters: {
"text script": function(e) {
return S.globalEval(e), e
}
}
}), S.ajaxPrefilter("script", function(e) {
void 0 === e.cache && (e.cache = !1), e.crossDomain && (e.type = "GET")
}), S.ajaxTransport("script", function(n) {
var r, i;
if (n.crossDomain || n.scriptAttrs) return {
send: function(e, t) {
r = S("<script>").attr(n.scriptAttrs || {}).prop({
charset: n.scriptCharset,
src: n.url
}).on("load error", i = function(e) {
r.remove(), i = null, e && t("error" === e.type ? 404 : 200, e.type)
}), E.head.appendChild(r[0])
},
abort: function() {
i && i()
}
}
});
var Ut, Xt = [],
Vt = /(=)\?(?=&|$)|\?\?/;
S.ajaxSetup({
jsonp: "callback",
jsonpCallback: function() {
var e = Xt.pop() || S.expando + "_" + Ct.guid++;
return this[e] = !0, e
}
}), S.ajaxPrefilter("json jsonp", function(e, t, n) {
var r, i, o, a = !1 !== e.jsonp && (Vt.test(e.url) ? "url" : "string" == typeof e.data && 0 === (e.contentType || "").indexOf("application/x-www-form-urlencoded") && Vt.test(e.data) && "data");
if (a || "jsonp" === e.dataTypes[0]) return r = e.jsonpCallback = m(e.jsonpCallback) ? e.jsonpCallback() : e.jsonpCallback, a ? e[a] = e[a].replace(Vt, "$1" + r) : !1 !== e.jsonp && (e.url += (Et.test(e.url) ? "&" : "?") + e.jsonp + "=" + r), e.converters["script json"] = function() {
return o || S.error(r + " was not called"), o[0]
}, e.dataTypes[0] = "json", i = C[r], C[r] = function() {
o = arguments
}, n.always(function() {
void 0 === i ? S(C).removeProp(r) : C[r] = i, e[r] && (e.jsonpCallback = t.jsonpCallback, Xt.push(r)), o && m(i) && i(o[0]), o = i = void 0
}), "script"
}), v.createHTMLDocument = ((Ut = E.implementation.createHTMLDocument("").body).innerHTML = "<form></form><form></form>", 2 === Ut.childNodes.length), S.parseHTML = function(e, t, n) {
return "string" != typeof e ? [] : ("boolean" == typeof t && (n = t, t = !1), t || (v.createHTMLDocument ? ((r = (t = E.implementation.createHTMLDocument("")).createElement("base")).href = E.location.href, t.head.appendChild(r)) : t = E), o = !n && [], (i = N.exec(e)) ? [t.createElement(i[1])] : (i = xe([e], t, o), o && o.length && S(o).remove(), S.merge([], i.childNodes)));
var r, i, o
}, S.fn.load = function(e, t, n) {
var r, i, o, a = this,
s = e.indexOf(" ");
return -1 < s && (r = yt(e.slice(s)), e = e.slice(0, s)), m(t) ? (n = t, t = void 0) : t && "object" == typeof t && (i = "POST"), 0 < a.length && S.ajax({
url: e,
type: i || "GET",
dataType: "html",
data: t
}).done(function(e) {
o = arguments, a.html(r ? S("<div>").append(S.parseHTML(e)).find(r) : e)
}).always(n && function(e, t) {
a.each(function() {
n.apply(this, o || [e.responseText, t, e])
})
}), this
}, S.expr.pseudos.animated = function(t) {
return S.grep(S.timers, function(e) {
return t === e.elem
}).length
}, S.offset = {
setOffset: function(e, t, n) {
var r, i, o, a, s, u, l = S.css(e, "position"),
c = S(e),
f = {};
"static" === l && (e.style.position = "relative"), s = c.offset(), o = S.css(e, "top"), u = S.css(e, "left"), ("absolute" === l || "fixed" === l) && -1 < (o + u).indexOf("auto") ? (a = (r = c.position()).top, i = r.left) : (a = parseFloat(o) || 0, i = parseFloat(u) || 0), m(t) && (t = t.call(e, n, S.extend({}, s))), null != t.top && (f.top = t.top - s.top + a), null != t.left && (f.left = t.left - s.left + i), "using" in t ? t.using.call(e, f) : c.css(f)
}
}, S.fn.extend({
offset: function(t) {
if (arguments.length) return void 0 === t ? this : this.each(function(e) {
S.offset.setOffset(this, t, e)
});
var e, n, r = this[0];
return r ? r.getClientRects().length ? (e = r.getBoundingClientRect(), n = r.ownerDocument.defaultView, {
top: e.top + n.pageYOffset,
left: e.left + n.pageXOffset
}) : {
top: 0,
left: 0
} : void 0
},
position: function() {
if (this[0]) {
var e, t, n, r = this[0],
i = {
top: 0,
left: 0
};
if ("fixed" === S.css(r, "position")) t = r.getBoundingClientRect();
else {
t = this.offset(), n = r.ownerDocument, e = r.offsetParent || n.documentElement;
while (e && (e === n.body || e === n.documentElement) && "static" === S.css(e, "position")) e = e.parentNode;
e && e !== r && 1 === e.nodeType && ((i = S(e).offset()).top += S.css(e, "borderTopWidth", !0), i.left += S.css(e, "borderLeftWidth", !0))
}
return {
top: t.top - i.top - S.css(r, "marginTop", !0),
left: t.left - i.left - S.css(r, "marginLeft", !0)
}
}
},
offsetParent: function() {
return this.map(function() {
var e = this.offsetParent;
while (e && "static" === S.css(e, "position")) e = e.offsetParent;
return e || re
})
}
}), S.each({
scrollLeft: "pageXOffset",
scrollTop: "pageYOffset"
}, function(t, i) {
var o = "pageYOffset" === i;
S.fn[t] = function(e) {
return B(this, function(e, t, n) {
var r;
if (x(e) ? r = e : 9 === e.nodeType && (r = e.defaultView), void 0 === n) return r ? r[i] : e[t];
r ? r.scrollTo(o ? r.pageXOffset : n, o ? n : r.pageYOffset) : e[t] = n
}, t, e, arguments.length)
}
}), S.each(["top", "left"], function(e, n) {
S.cssHooks[n] = _e(v.pixelPosition, function(e, t) {
if (t) return t = Be(e, n), Pe.test(t) ? S(e).position()[n] + "px" : t
})
}), S.each({
Height: "height",
Width: "width"
}, function(a, s) {
S.each({
padding: "inner" + a,
content: s,
"": "outer" + a
}, function(r, o) {
S.fn[o] = function(e, t) {
var n = arguments.length && (r || "boolean" != typeof e),
i = r || (!0 === e || !0 === t ? "margin" : "border");
return B(this, function(e, t, n) {
var r;
return x(e) ? 0 === o.indexOf("outer") ? e["inner" + a] : e.document.documentElement["client" + a] : 9 === e.nodeType ? (r = e.documentElement, Math.max(e.body["scroll" + a], r["scroll" + a], e.body["offset" + a], r["offset" + a], r["client" + a])) : void 0 === n ? S.css(e, t, i) : S.style(e, t, n, i)
}, s, n ? e : void 0, n)
}
})
}), S.each(["ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend"], function(e, t) {
S.fn[t] = function(e) {
return this.on(t, e)
}
}), S.fn.extend({
bind: function(e, t, n) {
return this.on(e, null, t, n)
},
unbind: function(e, t) {
return this.off(e, null, t)
},
delegate: function(e, t, n, r) {
return this.on(t, e, n, r)
},
undelegate: function(e, t, n) {
return 1 === arguments.length ? this.off(e, "**") : this.off(t, e || "**", n)
},
hover: function(e, t) {
return this.mouseenter(e).mouseleave(t || e)
}
}), S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "), function(e, n) {
S.fn[n] = function(e, t) {
return 0 < arguments.length ? this.on(n, null, e, t) : this.trigger(n)
}
});
var Gt = /^[\s\uFEFF\xA0]+|([^\s\uFEFF\xA0])[\s\uFEFF\xA0]+$/g;
S.proxy = function(e, t) {
var n, r, i;
if ("string" == typeof t && (n = e[t], t = e, e = n), m(e)) return r = s.call(arguments, 2), (i = function() {
return e.apply(t || this, r.concat(s.call(arguments)))
}).guid = e.guid = e.guid || S.guid++, i
}, S.holdReady = function(e) {
e ? S.readyWait++ : S.ready(!0)
}, S.isArray = Array.isArray, S.parseJSON = JSON.parse, S.nodeName = A, S.isFunction = m, S.isWindow = x, S.camelCase = X, S.type = w, S.now = Date.now, S.isNumeric = function(e) {
var t = S.type(e);
return ("number" === t || "string" === t) && !isNaN(e - parseFloat(e))
}, S.trim = function(e) {
return null == e ? "" : (e + "").replace(Gt, "$1")
}, "function" == typeof define && define.amd && define("jquery", [], function() {
return S
});
var Yt = C.jQuery,
Qt = C.$;
return S.noConflict = function(e) {
return C.$ === S && (C.$ = Qt), e && C.jQuery === S && (C.jQuery = Yt), S
}, "undefined" == typeof e && (C.jQuery = C.$ = S), S
});
jQuery.noConflict();

Why my external jQuery file cannot be applied to className in ReactJs?

I am trying to create a navigation menu of the mobile view of my website with jQuery, but when I call it inside the className of my reactjs application, it does not work. I have placed the jQuery file inside my public folder of the react application and called it from the index.html file
Here is the sample jQuery code from the public folder:
! function($) {
"use strict";
$.fn.meanmenu = function(e) {
var n = {
meanMenuTarget: jQuery(this),
meanMenuContainer: ".mobile-nav",
meanMenuClose: "X",
meanMenuCloseSize: "18px",
meanMenuOpen: "<span /><span /><span />",
meanRevealPosition: "right",
meanRevealPositionDistance: "0",
meanRevealColour: "",
meanScreenWidth: "480",
meanNavPush: "",
meanShowChildren: !0,
meanExpandableChildren: !0,
meanExpand: "+",
meanContract: "-",
meanRemoveAttrs: !1,
onePage: !1,
meanDisplay: "block",
removeElements: ""
};
e = $.extend(n, e);
var a = window.innerWidth || document.documentElement.clientWidth;
return this.each(function() {
var n = e.meanMenuTarget,
t = e.meanMenuContainer,
r = e.meanMenuClose,
i = e.meanMenuCloseSize,
s = e.meanMenuOpen,
u = e.meanRevealPosition,
m = e.meanRevealPositionDistance,
l = e.meanRevealColour,
o = e.meanScreenWidth,
c = e.meanNavPush,
v = ".meanmenu-reveal",
h = e.meanShowChildren,
d = e.meanExpandableChildren,
y = e.meanExpand,
j = e.meanContract,
Q = e.meanRemoveAttrs,
f = e.onePage,
g = e.meanDisplay,
p = e.removeElements,
C = !1;
(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/Blackberry/i) || navigator.userAgent.match(/Windows Phone/i)) && (C = !0), (navigator.userAgent.match(/MSIE 8/i) || navigator.userAgent.match(/MSIE 7/i)) && jQuery("html").css("overflow-y", "scroll");
var w = "",
x = function() {
if ("center" === u) {
var e = window.innerWidth || document.documentElement.clientWidth,
n = e / 2 - 22 + "px";
w = "left:" + n + ";right:auto;", C ? jQuery(".meanmenu-reveal").animate({
left: n
}) : jQuery(".meanmenu-reveal").css("left", n)
}
},
A = !1,
E = !1;
"right" === u && (w = "right:" + m + ";left:auto;"), "left" === u && (w = "left:" + m + ";right:auto;"), x();
var M = "",
P = function() {
M.html(jQuery(M).is(".meanmenu-reveal.meanclose") ? r : s)
},
W = function() {
jQuery(".mean-bar,.mean-push").remove(), jQuery(t).removeClass("mean-container"), jQuery(n).css("display", g), A = !1, E = !1, jQuery(p).removeClass("mean-remove")
},
b = function() {
var e = "background:" + l + ";color:" + l + ";" + w;
if (o >= a) {
jQuery(p).addClass("mean-remove"), E = !0, jQuery(t).addClass("mean-container"), jQuery(".mean-container").prepend('<div class="mean-bar">Show Navigation<nav class="mean-nav"></nav></div>');
var r = jQuery(n).html();
jQuery(".mean-nav").html(r), Q && jQuery("nav.mean-nav ul, nav.mean-nav ul *").each(function() {
jQuery(this).is(".mean-remove") ? jQuery(this).attr("class", "mean-remove") : jQuery(this).removeAttr("class"), jQuery(this).removeAttr("id")
}), jQuery(n).before('<div class="mean-push" />'), jQuery(".mean-push").css("margin-top", c), jQuery(n).hide(), jQuery(".meanmenu-reveal").show(), jQuery(v).html(s), M = jQuery(v), jQuery(".mean-nav ul").hide(), h ? d ? (jQuery(".mean-nav ul ul").each(function() {
jQuery(this).children().length && jQuery(this, "li:first").parent().append('<a class="mean-expand" href="#" style="font-size: ' + i + '">' + y + "</a>")
}), jQuery(".mean-expand").on("click", function(e) {
e.preventDefault(), jQuery(this).hasClass("mean-clicked") ? (jQuery(this).text(y), jQuery(this).prev("ul").slideUp(300, function() {})) : (jQuery(this).text(j), jQuery(this).prev("ul").slideDown(300, function() {})), jQuery(this).toggleClass("mean-clicked")
})) : jQuery(".mean-nav ul ul").show() : jQuery(".mean-nav ul ul").hide(), jQuery(".mean-nav ul li").last().addClass("mean-last"), M.removeClass("meanclose"), jQuery(M).click(function(e) {
e.preventDefault(), A === !1 ? (M.css("text-align", "center"), M.css("text-indent", "0"), M.css("font-size", i), jQuery(".mean-nav ul:first").slideDown(), A = !0) : (jQuery(".mean-nav ul:first").slideUp(), A = !1), M.toggleClass("meanclose"), P(), jQuery(p).addClass("mean-remove")
}), f && jQuery(".mean-nav ul > li > a:first-child").on("click", function() {
jQuery(".mean-nav ul:first").slideUp(), A = !1, jQuery(M).toggleClass("meanclose").html(s)
})
} else W()
};
C || jQuery(window).resize(function() {
a = window.innerWidth || document.documentElement.clientWidth, a > o, W(), o >= a ? (b(), x()) : W()
}), jQuery(window).resize(function() {
a = window.innerWidth || document.documentElement.clientWidth, C ? (x(), o >= a ? E === !1 && b() : W()) : (W(), o >= a && (b(), x()))
}), b()
})
}
}(jQuery);
And this is how I am using it in the reactJs Navbar.js:
<div className="mobile-nav">
<a href="index.html" className="logo">
<img src="assets/img/logo.png" alt="Logo">
</a>
</div>

useEffect more detail see https://reactjs.org/docs/hooks-reference.html#useeffect
function Menu(){
React.useEffect(()=> {
$('.mobile-nav').meanmenu()
}, [])
return (
<div className="mobile-nav">
<a href="index.html" className="logo">
<img src="assets/img/logo.png" alt="Logo">
</a>
</div>
)
}

JavaScript errors after changing HTML file directory

Having javascript errors after changing the directories of html files. In inspect mode each time when I scroll the page javascript errors keep increasing kindly help me out with this issue. Also have changed the javascript files directory. I am sharing an image of errors.
Directory of files
Here is the part which is having errors in Total.min.js
function e(y) {
var b, w, x, $ = !1;
function S(t, e) {
if (C.getComputedStyle || -1 === e.indexOf("%")) return e;
var i = t.style,
s = i.left,
n = t.runtimeStyle,
o = n && n.left;
return o && (n.left = t.currentStyle.left), i.left = e, e = i.pixelLeft, i.left = s, o && (n.left = o), e
}
return function(t) {
if (function() {
if (!$) {
$ = !0;
var i, e = C.getComputedStyle;
if (i = e ? function(t) {
return e(t, null)
} : function(t) {
return t.currentStyle
}, b = function(t) {
var e = i(t);
return e || T("Style returned " + e + "."), e
}, w = y("boxSizing")) {
var t = document.createElement("div");
t.style.width = "200px", t.style.padding = "1px 2px 3px 4px", t.style.borderStyle = "solid", t.style.borderWidth = "1px 2px 3px 4px", t.style[w] = "border-box";
var s = document.body || document.documentElement;
s.appendChild(t);
var n = b(t);
x = 200 === _(n.width), s.removeChild(t)
}
}
}(), "string" == typeof t && (t = document.querySelector(t)), t && "object" == typeof t && t.nodeType) {
var e = b(t);
if ("none" === e.display) return function() {
for (var t = {
width: 0,
height: 0,
innerWidth: 0,
innerHeight: 0,
outerWidth: 0,
outerHeight: 0
}, e = 0, i = I.length; e < i; e++) t[I[e]] = 0;
return t
}();
var i = {};
i.width = t.offsetWidth, i.height = t.offsetHeight;
for (var s = i.isBorderBox = !(!w || !e[w] || "border-box" !== e[w]), n = 0, o = I.length; n < o; n++) {
var a = I[n],
r = e[a];
r = S(t, r);
var l = parseFloat(r);
i[a] = isNaN(l) ? 0 : l
}
var h = i.paddingLeft + i.paddingRight,
c = i.paddingTop + i.paddingBottom,
d = i.marginLeft + i.marginRight,
u = i.marginTop + i.marginBottom,
p = i.borderLeftWidth + i.borderRightWidth,
f = i.borderTopWidth + i.borderBottomWidth,
m = s && x,
g = _(e.width);
!1 !== g && (i.width = g + (m ? 0 : h + p));
var v = _(e.height);
return !1 !== v && (i.height = v + (m ? 0 : c + f)), i.innerWidth = i.width - (h + p), i.innerHeight = i.height - (c + f), i.outerWidth = i.width + d, i.outerHeight = i.height + u, i
}
}
}
"function" == typeof define && define.amd ? define("get-size/get-size", ["get-style-property/get-style-property"], e) : "object" == typeof exports ? module.exports = e(require("desandro-get-style-property")) : C.getSize = e(C.getStyleProperty)
}(window),
function(e) {
var i = e.document,
s = [];
function n(t) {
"function" == typeof t && (n.isReady ? t() : s.push(t))
}
function o(t) {
var e = "readystatechange" === t.type && "complete" !== i.readyState;
n.isReady || e || a()
}
function a() {
n.isReady = !0;
for (var t = 0, e = s.length; t < e; t++) {
(0, s[t])()
}
}
function t(t) {
return "complete" === i.readyState ? a() : (t.bind(i, "DOMContentLoaded", o), t.bind(i, "readystatechange", o), t.bind(e, "load", o)), n
}
n.isReady = !1, "function" == typeof define && define.amd ? define("doc-ready/doc-ready", ["eventie/eventie"], t) : "object" == typeof exports ? module.exports = t(require("eventie")) : e.docReady = t(e.eventie)
}(window),
function(n) {
"use strict";
var t, i = function() {
if (n.matches) return "matches";
if (n.matchesSelector) return "matchesSelector";
for (var t = ["webkit", "moz", "ms", "o"], e = 0, i = t.length; e < i; e++) {
var s = t[e] + "MatchesSelector";
if (n[s]) return s
}
}();
Errors during inspecting site in console

timer library using JavaScript

I have a timer library from EasyTimer.
Every time, i start my timer, it will start from 00:00:00
How do i make my timer to start timer from <?php echo $timer; ?>
For example start timer from 00:00.30.
$timer value comes from DB.
source code: https://albert-gonzalez.github.io/easytimer.js/#chronoHtml
PHP:
<!--Timer.Start-->
Timer:
<div id="chronoExample" class="input-group ng-isolate-scope ng-valid ng-dirty ng-valid-parse">
<?php if ($update == true): ?>
<div id="timer1" class="values form-control ng-valid ng-isolate-scope ng-dirty ng-touched"><?php echo $timer; ?></div>
<?php else: ?>
<div id="timer1" class="values form-control ng-valid ng-isolate-scope ng-dirty ng-touched">00:00:00</div>
<?php endif ?>
<div class="input-group-btn">
<button type="button" class="startButton btn btn-default">Start</button>
<button type="button" class="pauseButton btn btn-default">Pause</button>
<button type="button" class="resetButton btn btn-default">Reset</button>
</div>
</div>
<script src="javascript/easytimer.min.js"></script>
<script>
var timerInstance = new Timer();
</script>
<script src="javascript/easytimer.js"></script>
<input type="hidden" id="timerdata" name="timer">
<script>
function change() {
document.getElementById('timerdata').value = document.getElementById('timer1').textContent;
}
</script>
<!--Timer.End-->
Easytimer.js:
var timer = new Timer();
$('#chronoExample .startButton').click(function () {
timer.start();
});
$('#chronoExample .pauseButton').click(function () {
timer.pause();
});
$('#chronoExample .stopButton').click(function () {
timer.stop();
});
$('#chronoExample .resetButton').click(function () {
timer.reset();
});
timer.addEventListener('secondsUpdated', function (e) {
$('#chronoExample .values').html(timer.getTimeValues().toString());
});
timer.addEventListener('started', function (e) {
$('#chronoExample .values').html(timer.getTimeValues().toString());
});
timer.addEventListener('reset', function (e) {
$('#chronoExample .values').html(timer.getTimeValues().toString());
});
Easytimer.min.js:
!function (t, n) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define && define.amd ? define(n) : t.Timer = n()
}(this, function () {
"use strict";
function s(t, n, e) {
var o = void 0, i = "";
if (t.length > n) return t;
for (o = 0; o < n; o += 1) i += String(e);
return (i + t).slice(-i.length)
}
function P() {
this.secondTenths = 0, this.seconds = 0, this.minutes = 0, this.hours = 0, this.days = 0, this.toString = function (t, n, e) {
t = t || ["hours", "minutes", "seconds"], n = n || ":", e = e || 2;
var o = [], i = void 0;
for (i = 0; i < t.length; i += 1) void 0 !== this[t[i]] && ("secondTenths" === t[i] ? o.push(this[t[i]]) : o.push(s(this[t[i]], e, "0")));
return o.join(n)
}
}
var t = "undefined" != typeof window ? window.CustomEvent : void 0;
"undefined" != typeof window && "function" != typeof t && ((t = function (t, n) {
n = n || {bubbles: !1, cancelable: !1, detail: void 0};
var e = document.createEvent("CustomEvent");
return e.initCustomEvent(t, n.bubbles, n.cancelable, n.detail), e
}).prototype = window.Event.prototype, window.CustomEvent = t);
var q = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
return typeof t
} : function (t) {
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
}, I = "secondTenths", O = "seconds", z = "minutes", R = "hours", B = "days",
F = {secondTenths: 100, seconds: 1e3, minutes: 6e4, hours: 36e5, days: 864e5},
G = {secondTenths: 10, seconds: 60, minutes: 60, hours: 24},
H = "undefined" != typeof module && module.exports && "function" == typeof require ? require("events") : void 0;
function J() {
return "undefined" != typeof document
}
function K() {
return H
}
function N(t, n) {
return (t % n + n) % n
}
return function () {
var s = new P, r = new P, i = void 0,
e = J() ? document.createElement("span") : K() ? new H.EventEmitter : void 0, u = !1, d = !1, c = void 0,
a = void 0, f = void 0, v = {}, h = void 0, l = void 0, p = void 0, m = void 0, y = void 0, o = void 0,
b = {detail: {timer: this}};
function w(t, n) {
var e, o, i = r[n];
return o = U(t, F[e = n]), r[e] = o, s[e] = e === B ? o : 0 <= o ? N(o, G[e]) : G[e] - N(o, G[e]), r[n] !== i
}
function t() {
n(), function () {
for (var t in s) s.hasOwnProperty(t) && "number" == typeof s[t] && (s[t] = 0);
for (var n in r) r.hasOwnProperty(n) && "number" == typeof r[n] && (r[n] = 0)
}()
}
function n() {
clearInterval(i), i = void 0, d = u = !1
}
function g(t) {
var n, e, o;
M() ? (y = E(), l = V(h.target)) : (c = "string" == typeof(e = (e = t) || {}).precision ? e.precision : O, f = "function" == typeof e.callback ? e.callback : function () {
}, m = !0 === e.countdown, a = !0 === m ? -1 : 1, "object" === q(e.startValues) ? (o = e.startValues, p = L(o), s.secondTenths = p[0], s.seconds = p[1], s.minutes = p[2], s.hours = p[3], s.days = p[4], r = A(p, r)) : p = null, y = E(), S(), "object" === q(e.target) ? l = V(e.target) : m ? (e.target = {seconds: 0}, l = V(e.target)) : l = null, v = {
precision: c,
callback: f,
countdown: "object" === (void 0 === e ? "undefined" : q(e)) && !0 === e.countdown,
target: l,
startValues: p
}, h = e), n = F[c], C(j(Date.now())) || (i = setInterval(T, n), d = !(u = !0))
}
function E() {
return j(Date.now()) - r.secondTenths * F[I] * a
}
function T() {
var t, n = j(Date.now());
(t = S())[I] && k("secondTenthsUpdated", b), t[O] && k("secondsUpdated", b), t[z] && k("minutesUpdated", b), t[R] && k("hoursUpdated", b), t[B] && k("daysUpdated", b), f(b.detail.timer), C(n) && (D(), k("targetAchieved", b))
}
function S() {
var t = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : j(Date.now()),
n = 0 < a ? t - y : y - t, e = {};
return e[I] = w(n, I), e[O] = w(n, O), e[z] = w(n, z), e[R] = w(n, R), e[B] = w(n, B), e
}
function j(t) {
return Math.floor(t / F[c]) * F[c]
}
function C(t) {
return l instanceof Array && o <= t
}
function L(t) {
var n, e, o, i, s, r = void 0;
if ("object" === (void 0 === t ? "undefined" : q(t))) if (t instanceof Array) {
if (5 !== t.length) throw new Error("Array size not valid");
r = t
} else r = [t.secondTenths || 0, t.seconds || 0, t.minutes || 0, t.hours || 0, t.days || 0];
return n = r[0], e = r[1] + U(n, 10), o = r[2] + U(e, 60), i = r[3] + U(o, 60), s = r[4] + U(i, 24), r[0] = n % 10, r[1] = e % 60, r[2] = o % 60, r[3] = i % 24, r[4] = s, r
}
function U(t, n) {
var e = t / n;
return e < 0 ? Math.ceil(e) : Math.floor(e)
}
function V(t) {
if (t) {
var n = A(l = L(t));
return o = y + n.secondTenths * F[I] * a, l
}
}
function A(t, n) {
var e = n || {};
return e.days = t[4], e.hours = 24 * e.days + t[3], e.minutes = 60 * e.hours + t[2], e.seconds = 60 * e.minutes + t[1], e.secondTenths = 10 * e.seconds + t[[0]], e
}
function D() {
t(), k("stopped", b)
}
function k(t, n) {
J() ? e.dispatchEvent(new CustomEvent(t, n)) : K() && e.emit(t, n)
}
function x() {
return u
}
function M() {
return d
}
void 0 !== this && (this.start = function (t) {
x() || (g(t), k("started", b))
}, this.pause = function () {
n(), d = !0, k("paused", b)
}, this.stop = D, this.reset = function () {
t(), g(h), k("reset", b)
}, this.isRunning = x, this.isPaused = M, this.getTimeValues = function () {
return s
}, this.getTotalTimeValues = function () {
return r
}, this.getConfig = function () {
return v
}, this.addEventListener = function (t, n) {
J() ? e.addEventListener(t, n) : K() && e.on(t, n)
}, this.removeEventListener = function (t, n) {
J() ? e.removeEventListener(t, n) : K() && e.removeListener(t, n)
})
}
});

The EasyTimer.js Docs has an example of setting the start time.
Essentially, you just need to pass the start time to the timer object
<script>
var timerInstance = new Timer();
<?php if ($update == true): ?>
timerInstance.start({precision: 'seconds', startValues: <?php echo $timer; ?>});
<?php endif ?>
</script>
But you may have to change the way you store or echo the $timer in the <script> tag.

This is my final code, if someone need it.
Timer:
<div id="chronoExample" class="input-group ng-isolate-scope ng-valid ng-dirty ng-valid-parse">
<div class="days input-group-addon" id="id_days"><?php if ($update == true): ?><?php echo $days; ?><?php else: ?>0<?php endif ?></div>
<div class="hours input-group-addon" id="id_hours"><?php if ($update == true): ?><?php echo $hours; ?><?php else: ?>0<?php endif ?></div>
<div class="minutes input-group-addon" id="id_minutes"><?php if ($update == true): ?><?php echo $minutes; ?><?php else: ?>0<?php endif ?></div>
<div class="seconds input-group-addon" id="id_seconds"><?php if ($update == true): ?><?php echo $seconds; ?><?php else: ?>0<?php endif ?></div>
<div class="input-group-btn">
<button type="button" class="startButton btn btn-default">Start</button>
<button type="button" class="pauseButton btn btn-default">Pause</button>
<button type="button" class="resetButton btn btn-default">Reset</button>
</div>
</div>
<script src="javascript/easytimer.min.js"></script>
<script>
var timer = new Timer();
$('#chronoExample .startButton').click(function () {
timer.start({
precision: "seconds",
startValues: {seconds: <?php if ($update == true): ?><?php echo $total_seconds; ?><?php else: ?>0<?php endif ?>}
});
});
$('#chronoExample .pauseButton').click(function () {
timer.pause();
});
$('#chronoExample .stopButton').click(function () {
timer.stop();
});
$('#chronoExample .resetButton').click(function () {
timer.reset();
});
timer.addEventListener('secondsUpdated', function (e) {
$('#chronoExample .values').html(timer.getTimeValues().toString());
});
timer.addEventListener('started', function (e) {
$('#chronoExample .values').html(timer.getTimeValues().toString());
});
timer.addEventListener('reset', function (e) {
$('#chronoExample .values').html(timer.getTimeValues().toString());
});
timer.addEventListener('secondsUpdated', function (e) {
$('#chronoExample .days').html(timer.getTimeValues().days);
$('#chronoExample .hours').html(timer.getTimeValues().hours);
$('#chronoExample .minutes').html(timer.getTimeValues().minutes);
$('#chronoExample .seconds').html(timer.getTimeValues().seconds);
<!--Total Seconds -->
$('#gettingTotalValues .seconds').html(timer.getTotalTimeValues().seconds);
});
</script>

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