We Keep Coding

HTML file would not compile

I want to make a typewriter affect using JavaScript\ for my personal website. I found a template of this online and used the exact template to make some changes and edit it. However, it would not compile on another ide for example repl.it. I believe there is something wrong with the html file code, and I am not able to figure out what's wrong since I am new to html.
Here on this IDE, it works:
HTML FILE:
body /*What do I put here to make this html code run properly?*/
p.typeIt
CSS FILE:
body {
height: 100%;
background: seagreen;
}
body p {
color: bisque;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
text-align: center;
font-family: opens sans, helvetica;
font-size: 50px;
font-weight: 600;
}
JS FILE:
!(function (t, e) {
"use strict";
var i = t(document);
(t.fn.typeIt = function (i) {
return this.each(function () {
var s = t(this),
h = s.data("typeit");
h !== e &&
(clearTimeout(h.tTO), clearTimeout(h.dTO), s.removeData("typeit")),
s.data("typeit", new t.typeIt(s, i));
});
}),
(t.typeIt = function (i, s) {
(this.d = {
strings: [],
speed: 100,
deleteSpeed: e,
lifeLike: !0,
cursor: !0,
cursorSpeed: 1e3,
breakLines: !0,
breakDelay: 750,
deleteDelay: 750,
startDelay: 250,
startDelete: !1,
loop: !1,
loopDelay: 750,
html: !0,
autoStart: !0,
callback: function () { }
}),
(this.queue = []),
(this.queueIndex = 0),
(this.hasStarted = !1),
(this.inTag = !1),
(this.stringsToDelete = ""),
(this.style =
'style="display:inline;position:relative;font:inherit;color:inherit;"'),
(this.s = t.extend({}, this.d, s)),
(this.el = i),
this._init();
}),
(t.typeIt.prototype = {
_init: function () {
this.el.find(".ti-container, .ti-cursor, .ti-placeholder").remove(),
this._elCheck(),
(this.s.strings = this._toArray(this.s.strings)),
this.el.html(
'<i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i><span ' +
this.style +
' class="ti-container"></span>'
),
(this.tel = this.el.find("span")),
(this.insert = function (t) {
this.tel.append(t);
}),
this.s.startDelete &&
(this.tel.html(this.stringsToDelete),
this.queue.push([this["delete"]])),
this._generateQueue(),
this._kickoff();
},
_kickoff: function () {
this._cursor(),
this.s.autoStart
? this._startQueue()
: this._isVisible()
? ((this.hasStarted = !0), this._startQueue())
: i.on(
"scroll",
function () {
this._isVisible() &&
!this.hasStarted &&
((this.hasStarted = !0), this._startQueue());
}.bind(this)
);
},
_generateQueue: function () {
for (var t = 0; t < this.s.strings.length; t++)
if (
(this.queue.push([this.type, this.s.strings[t]]),
t < this.s.strings.length - 1)
) {
var e = this.queue.length,
i = this.s.breakLines ? this.s.breakDelay : this.s.deleteDelay;
this.queue.push([
this.s.breakLines ? this["break"] : this["delete"]
]),
this.queue.splice(e, 0, [this.pause, i / 2]),
this.queue.splice(e + 2, 0, [this.pause, i / 2]);
}
},
_startQueue: function () {
this._to(
function () {
this._executeQueue();
}.bind(this),
this.s.startDelay
);
},
type: function (t, e) {
(e = "undefined" == typeof e || e),
(t = this._toArray(t)),
e && ((t = this._rake(t)), (t = t[0])),
(this.tTO = setTimeout(
function () {
if (
(this._setPace(this),
this.s.html &&
t[0].indexOf("<") !== -1 &&
t[0].indexOf("</") === -1 &&
!this.inTag)
) {
for (var e = t.length - 1; e >= 0; e--)
t[e].indexOf("</") !== -1 &&
((this.tagCount = 1), (this.tagDuration = e));
this._makeNode(t[0]);
} else this._print(t[0]);
t.splice(0, 1),
t.length ? this.type(t, !1) : this._executeQueue();
}.bind(this),
this.typePace
));
},
pause: function (t) {
(t = t === e ? this.s.breakDelay : t),
this._to(
function () {
this._executeQueue();
}.bind(this),
t
);
},
break: function () {
this.insert("<br>"), this._executeQueue();
},
mergeSet: function (e) {
(this.s = t.extend({}, this.s, e)), this._executeQueue();
},
_print: function (e) {
this.inTag
? (t(this.tag, this.el).last().append(e),
this.tagCount < this.tagDuration
? this.tagCount++
: (this.inTag = !1))
: this.insert(e);
},
delete: function (t) {
this.deleteTimeout = setTimeout(
function () {
this._setPace();
for (
var i = this.tel.html().split(""),
s = t === e || null === t ? i.length - 1 : t + 1,
h = i.length - 1;
h > -1;
h--
) {
if ((">" !== i[h] && ";" !== i[h]) || !this.s.html) {
i.pop();
break;
}
for (var n = h; n > -1; n--) {
if ("<br>" === i.slice(n - 3, n + 1).join("")) {
i.splice(n - 3, 4);
break;
}
if ("&" === i[n]) {
i.splice(n, h - n + 1);
break;
}
if ("<" === i[n] && ">" !== i[n - 1]) {
if (";" === i[n - 1])
for (var r = n - 1; r > -1; r--)
if ("&" === i[r]) {
i.splice(r, n - r);
break;
}
i.splice(n - 1, 1);
break;
}
}
break;
}
if (this.tel.html().indexOf("></") > -1)
for (var a = this.tel.html().indexOf("></") - 2; a >= 0; a--)
if ("<" === i[a]) {
i.splice(a, i.length - a);
break;
}
this.tel.html(i.join("")),
s > (t === e ? 0 : 2)
? this["delete"](t === e ? e : t - 1)
: this._executeQueue();
}.bind(this),
this.deletePace
);
},
_isVisible: function () {
var e = t(window),
i = { top: e.scrollTop(), left: e.scrollLeft() };
(i.right = i.left + e.width()), (i.bottom = i.top + e.height());
var s = this.el.outerHeight(),
h = this.el.outerWidth();
if (!h || !s) return !1;
var n = this.el.offset();
(n.right = n.left + h), (n.bottom = n.top + s);
var r = !(
i.right < n.left ||
i.left > n.right ||
i.bottom < n.top ||
i.top > n.bottom
);
if (!r) return !1;
var a = {
top: Math.min(1, (n.bottom - i.top) / s),
bottom: Math.min(1, (i.bottom - n.top) / s),
left: Math.min(1, (n.right - i.left) / h),
right: Math.min(1, (i.right - n.left) / h)
};
return a.left * a.right >= 1 && a.top * a.bottom >= 1;
},
_executeQueue: function () {
if (this.queueIndex < this.queue.length) {
var t = this.queue[this.queueIndex];
this.queueIndex++ ,
this.isLooping && 1 === this.queueIndex
? this._to(
function () {
t[0].bind(this)(t[1]);
}.bind(this),
this.s.loopDelay / 2
)
: t[0].bind(this)(t[1]);
} else
this.s.loop
? ((this.queueIndex = 0),
(this.isLooping = !0),
this._to(
function () {
this["delete"]();
}.bind(this),
this.s.loopDelay / 2
))
: this.s.callback();
},
_to: function (t, e) {
setTimeout(
function () {
t();
}.bind(this),
e
);
},
_elCheck: function () {
!this.s.startDelete &&
this.el.html().replace(/(\r\n|\n|\r)/gm, "").length > 0
? (this.s.strings = this.el.html().trim())
: this.s.startDelete && (this.stringsToDelete = this.el.html());
},
_toArray: function (t) {
return t.constructor === Array ? t.slice(0) : t.split("<br>");
},
_cursor: function () {
if (this.s.cursor) {
this.el.append("<span " + this.style + 'class="ti-cursor">|</span>');
var t = this.s.cursorSpeed,
e = this;
!(function i() {
e.el
.find(".ti-cursor")
.fadeTo(t / 2, 0)
.fadeTo(t / 2, 1),
e._to(i, t);
})();
}
},
_setPace: function () {
var t = this.s.speed,
i = this.s.deleteSpeed !== e ? this.s.deleteSpeed : this.s.speed / 3,
s = t / 2,
h = i / 2;
(this.typePace = this.s.lifeLike ? this._randomInRange(t, s) : t),
(this.deletePace = this.s.lifeLike ? this._randomInRange(i, h) : i);
},
_randomInRange: function (t, e) {
return Math.abs(Math.random() * (t + e - (t - e)) + (t - e));
},
_rake: function (t) {
for (var e = 0; e < t.length; e++)
if (((t[e] = t[e].split("")), this.s.html)) {
this.tPos = [];
for (var i, s = this.tPos, h = !1, n = 0; n < t[e].length; n++)
("<" !== t[e][n] && "&" !== t[e][n]) ||
((s[0] = n), (h = "&" === t[e][n])),
(">" === t[e][n] || (";" === t[e][n] && h)) &&
((s[1] = n),
(n = 0),
(i = t[e].slice(s[0], s[1] + 1).join("")),
t[e].splice(s[0], s[1] - s[0] + 1, i),
(h = !1));
}
return t;
},
_makeNode: function (e) {
(this.tag = t(t.parseHTML(e))),
this._print(this.tag),
(this.inTag = !0);
}
}),
(t.fn.tiType = function (s) {
var h = t(this).data("typeit");
return h === e ? i : (h.queue.push([h.type, s]), this);
}),
(t.fn.tiDelete = function (s) {
var h = t(this).data("typeit");
return h === e ? i : (h.queue.push([h["delete"], s]), this);
}),
(t.fn.tiPause = function (s) {
var h = t(this).data("typeit");
return h === e ? i : (h.queue.push([h.pause, s]), this);
}),
(t.fn.tiBreak = function () {
var s = t(this).data("typeit");
return s === e ? i : (s.queue.push([s["break"]]), this);
}),
(t.fn.tiSettings = function (s) {
var h = t(this).data("typeit");
return h === e ? i : (h.queue.push([h.mergeSet, s]), this);
});
})(jQuery);
$(".typeIt")
.typeIt({
speed: 100,
autoStart: false
})
.tiType("Hi,")
.tiPause(600)
.tiType(" My name is Gazi Taufiq.")
.tiBreak()
.tiPause(1000)
.tiSettings({ speed: 300 })
.tiType("I am a")
.tiSettings({ speed: 75 })
.tiType(" Web Developer")
.tiPause(800)
.tiDelete(15)
.tiType("an Artist")
.tiPause(1200)
.tiDelete(8)
.tiType(" Coder.")
.tiPause(2000)
.tiDelete()
.tiType("Feel free to contact me")
.tiPause(600)
.tiType(" and we may work together. ")
.tiPause(600)
.tiType(":)");
What can I try to resolve this?

You put arrows around body, put an opening and closing parenthesis at the end of p.typeIt, and put a <script> tag above (or below too, but you need a slash (/) character before the script tag on the bottom) p.typeIt().
I think almost all HTML tags have arrows behind and in front of them.

Make a Section take up full screen

in my html code, i have the following:
<section id="cta">
.......
</section>
<!-- Footer -->
<footer id="footer">
......
</footer>
How do i actually make my section take up the whole screen when the page loads, whereas the footer actually goes down to a scrollbar. Note that this has to be dynamic since different computers have different screen sizes, i know of the height 100% trick, but in my case there are multiple elements, and is it possible to make a specific one take up the whole screen whereas the other one can be accessed via scroll?
Thanks!
I actually tried removing a js script, and it worked, so i suspect its some css defined inside the js script, but i cant seem to find which is the conflicting css, i tried to add !important to my current css, but it does not overide the one in the js script.
Here is the JS script:
/* skel-layers.js v1.0.4 | (c) n33 | getskel.com | MIT licensed */
(function(e) {
typeof define == "function" && define.amd ? define(["jquery", "skel"], e) : e(jQuery, skel)
})(function(e, t) {
...
...
}
var t;
return typeof e == gt ? H : (e.fn[p] = function() {
var t, n;
if (this[z] > 1) {
for (t = 0; t < this[z]; t++) e(this[t])[p]();
return e(this)
}
return n = e(this), n[S](it, n.data(A)).data(A, ""), n
}, e.fn[Ct] = function() {
var t = e(this),
n = t.parent(),
r = 12;
n[M]().each(function() {
var t = e(this),
n = t[Lt]("class");
n && n.match(/(\s+|^)([0-9]+)u(\s+|$)/) && (r -= parseInt(RegExp.$2))
}), r > 0 && (t[ct](), t[S](E, (t.data(Jt) + r) / 12 * 100 + "%"))
}, e.fn[Ot] = function() {
return e(this).parents()[z] > 0
}, e.fn[ct] = function() {
var t = e(this);
t[Lt]("class").match(/(\s+|^)([0-9]+)u(\s+|$)/) && t.data(Jt, parseInt(RegExp.$2))
}, e.fn[c] = function(r) {
var i, s, o;
if (this[z] > 1) {
for (i = 0; i < this[z]; i++) e(this[i])[c](r);
return e(this)
}
return s = e(this), isNaN(o = parseInt(s.data(ot))) && (o = 0), s.data(A, s[S](it))[S](it, t[n].baseZIndex + o + (r ? r : 1)), s
}, e.fn[u] = function() {
var t = e(this);
return e(this)[At]("form").each(function() {
this.reset()
}), t
}, e.fn[qt] = function(t, n) {
return e(this)[S](t, n)[S](Tt + t, Tt + n)[S](K + t, K + n)[S](Rt + t, Rt + n)[S](Dt + t, Dt + n)
}, e.fn._skel_layers_xcssProperty = function(t, n) {
return e(this)[S](t, n)[S](Tt + t, n)[S](K + t, n)[S](Rt + t, n)[S](Dt + t, n)
}, e.fn._skel_layers_xcssValue = function(t, n) {
return e(this)[S](t, n)[S](t, Tt + n)[S](t, K + n)[S](t, Rt + n)[S](t, Dt + n)
}, Nn[C][lt] = {
none: {
show: function(e) {
var t = e[n],
r = e[h];
r[B](0)[c](t.zIndex)[nn](), t[$] && r[u](), e[d]()
},
hide: function(e) {
var t = e[n],
r = e[h];
r[It]()[p](), e[m]()
}
},
overlayX: {
show: function(e) {
var r = e[n],
i = e[h];
i[B](0)[c](r.zIndex)[S](r[en], Gt + t[Q](t._[w](r[E])) + Qt)[nn](), r[$] && i[u](), t[Ht](sn), e[d](), window[v](function() {
i[s]((r[en] == g ? Gt : "") + t[Q](t._[w](r[E])), 0)
}, 50)
},
hide: function(e) {
var i = e[n],
s = e[h];
s[At](an)[Xt](Nt, [J]), s[r](), window[v](function() {
t[ft](sn), e[m](), s[p]()[It]()
}, t[n][dt] + 50)
}
},
overlayY: {
show: function(e) {
var r = e[n],
i = e[h];
i[B](0)[c](r.zIndex)[S](r[en], Gt + t[Q](t._[w](r[U])) + Qt)[nn](), r[$] && i[u](), t[Ht]("y"), e[d](), window[v](function() {
i[s](0, (r[en] == y ? Gt : "") + t[Q](t._[w](r[U])))
}, 50)
},
hide: function(e) {
var i = e[n],
s = e[h];
s[At](an)[Xt](Nt, [J]), s[r](), window[v](function() {
t[ft]("y"), e[m](), s[p]()[It]()
}, t[n][dt] + 50)
}
},
pushX: {
show: function(e) {
var r = e[n],
a = e[h],
f = t[i][L].add(t[i][o][M]());
a[B](0)[S](r[en], Gt + t[Q](t._[w](r[E])) + Qt)[nn](), r[$] && a[u](), f[c](), t[Ht](sn), e[d](), window[v](function() {
a.add(f)[s]((r[en] == g ? Gt : "") + t[Q](t._[w](r[E])), 0)
}, 50)
},
hide: function(e) {
var s = e[n],
u = e[h],
a = t[i][L].add(t[i][o][M]());
u[At](an)[Xt](Nt, [J]), u.add(a)[r](), window[v](function() {
t[ft](sn), u[It](), e[m](), a[p]()
}, t[n][dt] + 50)
}
},
pushY: {
show: function(e) {
var r = e[n],
a = e[h],
f = t[i][L].add(t[i][o][M]());
a[B](0)[S](r[en], Gt + t[Zt](t._[w](r[U])) + Qt)[nn](), r[$] && a[u](), t[Ht]("y"), e[d](), window[v](function() {
a.add(f)[s](0, (r[en] == y ? Gt : "") + t[Zt](t._[w](r[U])))
}, 50)
},
hide: function(e) {
var s = e[n],
u = e[h],
a = t[i][L].add(t[i][o][M]());
u[At](an)[Xt](Nt, [J]), u.add(a)[r](), window[v](function() {
t[ft]("y"), u[It](), e[m]()
}, t[n][dt] + 50)
}
},
revealX: {
show: function(e) {
var r = e[n],
a = e[h],
f = t[i][L].add(t[i][o][M]());
a[B](0)[nn](), r[$] && a[u](), f[c](), t[Ht](sn), e[d](), window[v](function() {
f[s]((r[en] == g ? Gt : "") + t[Q](t._[w](r[E])), 0)
}, 50)
},
hide: function(e) {
var s = e[n],
u = e[h],
a = t[i][L].add(t[i][o][M]());
u[At](an)[Xt](Nt, [J]), a[r](), window[v](function() {
t[ft](sn), u[It](), a[p](), e[m]()
}, t[n][dt] + 50)
}
}
}, Nn[C][bt] = {
"top-left": {
v: R,
h: k,
side: k
},
"top-right": {
v: R,
h: g,
side: g
},
top: {
v: R,
h: T,
side: R
},
"top-center": {
v: R,
h: T,
side: R
},
"bottom-left": {
v: y,
h: k,
side: k
},
"bottom-right": {
v: y,
h: g,
side: g
},
bottom: {
v: y,
h: T,
side: y
},
"bottom-center": {
v: y,
h: T,
side: y
},
left: {
v: T,
h: k,
side: k
},
"center-left": {
v: T,
h: k,
side: k
},
right: {
v: T,
h: g,
side: g
},
"center-right": {
v: T,
h: g,
side: g
}
}, Nn[C][nn] = function() {
var e, r, s, u, a;
if (this[W]) {
t[i][o][ht](this[j]);
return
}
e = this, r = this[n], s = t._[w](r[tt]), u = this[h], u[S](E, t._[w](r[E]))[S](U, t._[w](r[U])), t._.vars[Mt] == "ios" && (r[U] == "100%" && !r[rt] && u[S](U, "-webkit-calc(" + t._[w](r[U]) + " + 70px)"), u.on(Nt, "input,select,textarea", function(n, r) {
if (r) return;
window[v](function() {
t[i][P][ht](e[j]), window[v](function() {
t[i][o][ht](e[j])
}, 500)
}, 500)
})), a = this[bt][r[b]], u[Bt]("skel-layer-" + r[b]).data(st, r[b]);
switch (a.v) {
case R:
u[S](R, 0);
break;
case y:
u[S](y, 0);
break;
case T:
u[S](R, "50%")[S]("margin-top", Gt + t.getHalf(r[U]))
}
switch (a.h) {
case k:
u[S](k, 0);
break;
case g:
u[S](g, 0);
break;
case T:
u[S](k, "50%")[S]("margin-left", Gt + t.getHalf(r[E]))
}
this[lt][s][nn](this), r[rt] && r.exclusive && (t[i][Kt][Bt](Y), t[i][l] = this), this[W] = J
}, Nn[C][It] = function() {
var e, r;
if (!this[W]) {
t[i][P][ht](this[j]);
return
}
e = this[n], r = t._[w](e[tt]), r in this[lt] || (r = yt), this[lt][r][It](this), e[rt] && e.exclusive && t[i][l] === this && (t[i][Kt][Wt](Y), t[i][l] = x), this[W] = H
}, Nn[C].init = function() {
var r = this[n],
i = e(this[j]),
s = this;
i[O](), i[At](an).each(function() {
t.parseInit(e(this))
}), i[Bt]("skel-layer").data(ot, this.index)[S](it, t[n].baseZIndex)[S](b, "fixed")[S]("-ms-overflow-style", "-ms-autohiding-scrollbar")[S]("-webkit-overflow-scrolling", "touch")[It]();
switch (r.orientation) {
case "vertical":
i[S]("overflow-y", Ft);
break;
case "horizontal":
i[S](D, Ft);
break;
case yt:
default:
}
if (!r[b] || !(r[b] in this[bt])) r[b] = "top-left";
r[en] || (r[en] = this[bt][r[b]][en]);
if (!r[tt] || typeof r[tt] !== $t && !(r[tt] in this[lt])) r[tt] = yt;
r.clickToHide && i[At]("a")[S](nt, zt).on("click.skel-layers", function(r) {
var i, o, u = e(this);
if (u.hasClass("skel-layers-ignore")) return;
r[kt](), r[Et](), s[It]();
if (u.hasClass("skel-layers-ignoreHref")) return;
i = u[Lt]("href"), o = u[Lt]("target"), typeof i !== gt && i != "" && window[v](function() {
o == "_blank" && t._.vars[Mt] != "wp" ? window.open(i) : window.location.href = i
}, t[n][dt] + 10)
}), i.on("touchstart", function(e) {
s[St] = e[et][tn][0].pageX, s[xt] = e[et][tn][0].pageY
}).on("touchmove", function(e) {
var t, n, o, u, a, f, l;
if (s[St] === x || s[xt] === x) return;
t = s[St] - e[et][tn][0].pageX, n = s[xt] - e[et][tn][0].pageY, o = i.outerHeight(), u = i.get(0).scrollHeight - i[B]();
if (r[rt] && r.swipeToHide) {
a = H, f = 20, l = 50;
switch (r[en]) {
case k:
a = n < f && n > -1 * f && t > l;
break;
case g:
a = n < f && n > -1 * f && t < -1 * l;
break;
case R:
a = t < f && t > -1 * f && n > l;
break;
case y:
a = t < f && t > -1 * f && n < -1 * l
}
if (a) return s[St] = x, s[xt] = x, s[It](), H
}
if (i[B]() == 0 && n < 0 || u > o - 2 && u < o + 2 && n > 0) return H
}), this[h] = i
}, Nn[C][Z] = function() {
return this[h] !== x
}, Nn[C][Yt] = function() {
return this[h].is(":visible")
}, Nn[C][d] = function() {
t[i][o][ht](this[h])
}, Nn[C][m] = function() {
if (!this[h][Ot]()) return;
t[i][P][ht](this[h])
}, Nn[C].resume = function(r) {
if (!this[Z]()) return;
this[h][At](an).each(function() {
t.parseResume(e(this))
}), this[n][rt] || this[nn](r)
}, Nn[C].suspend = function() {
if (!this[Z]()) return;
this[h][r](), this[h][At](an).each(function() {
t.parseSuspend(e(this))
}), this[W] && this[It]()
}, t = {
cache: {
visibleWrapper: x,
body: x,
exclusiveLayer: x,
html: x,
htmlbody: x,
hiddenWrapper: x,
layers: {},
window: x,
wrapper: x
},
config: {
baseZIndex: 1e4,
layers: {},
speed: 250,
transform: J,
transformBreakpoints: x,
transformTest: x
},
eventType: "click touchend",
show: function(e) {
t._[Pt](function() {
t[i][I][e][nn]()
})
},
hide: function(e) {
t._[Pt](function() {
t[i][I][e][It]()
})
},
toggle: function(e) {
t._[Pt](function() {
var n = t[i][I][e];
n[Yt]() ? n[It]() : n[nn]()
})
},
getBaseFontSize: function() {
return t._.vars.IEVersion < 9 ? 16.5 : parseFloat(getComputedStyle(t[i][Kt].get(0)).fontSize)
},
getHalf: function(e) {
var t = parseInt(e);
return typeof e == "string" && e.charAt(e[z] - 1) == "%" ? Math.floor(t / 2) + "%" : Math.floor(t / 2) + Qt
},
lockView: function(e) {
t[i][wt]._skel_layers_scrollPos = t[i][wt][B](), e == sn && t[i][on][S](D, rt), t[i][L].on(X, function(e) {
e[kt](), e[Et](), t[i][l] && t[i][l][It]()
}), t[i][wt].on(mt, function(e) {
t[i][l] && t[i][l][It]()
}), t._.vars.isMobile || window[v](function() {
t[i][wt].on(vt, function(e) {
t[i][l] && t[i][l][It]()
})
}, t[n][dt] + 50)
},
parseInit: function(n) {
var r, s, o = n.get(0),
u = n[Lt]("data-action"),
a = n[Lt]("data-args"),
c, h;
u && a && (a = a.split(","));
switch (u) {
case "toggleLayer":
case "layerToggle":
n[S](nt, zt)[S]("cursor", "pointer"), r = function(n) {
n[kt](), n[Et]();
if (t[i][l]) return t[i][l][It](), H;
var r = e(this),
s = t[i][I][a[0]];
s[Yt]() ? s[It]() : s[nn]()
}, n.on(t.eventType, r);
break;
case "navList":
c = e(un + a[0]), r = c[At]("a"), s = [], r.each(function() {
var t = e(this),
n, r;
n = Math.max(0, t.parents("li")[z] - 1), r = t[Lt]("href"), s.push('<a class="link depth-' + n + '"' + (typeof r !== gt && r != "" ? ' href="' + r + '"' : "") + '><span class="indent-' + n + '"></span>' + t.text() + "</a>")
}), s[z] > 0 && n[jt]("<nav>" + s.join("") + "</nav>");
break;
case "copyText":
c = e(un + a[0]), n[jt](c.text());
break;
case "copyHTML":
c = e(un + a[0]), n[jt](c[jt]());
break;
case "moveElementContents":
c = e(un + a[0]), o[f] = function() {
c[M]().each(function() {
var t = e(this);
n[ht](t), t[Bt](_)
})
}, o[N] = function() {
n[M]().each(function() {
var n = e(this);
c[ht](n), n[Wt](_), t.refresh(n)
})
}, o[f]();
break;
case "moveElement":
c = e(un + a[0]), o[f] = function() {
e(V + c[Lt]("id") + '" />').insertBefore(c), n[ht](c), c[Bt](_)
}, o[N] = function() {
e(ut + c[Lt]("id")).replaceWith(c), c[Wt](_), t.refresh(c)
}, o[f]();
break;
case "moveCell":
c = e(un + a[0]), h = e(un + a[1]), o[f] = function() {
e(V + c[Lt]("id") + '" />').insertBefore(c), n[ht](c), c[S](E, Ft), h && h[Ct]()
}, o[N] = function() {
e(ut + c[Lt]("id")).replaceWith(c), c[S](E, ""), h && h[S](E, "")
}, o[f]();
break;
default:
}
},
parseResume: function(e) {
var t = e.get(0);
t[f] && t[f]()
},
parseSuspend: function(e) {
var t = e.get(0);
t[N] && t[N]()
},
recalc: function(e, n) {
var r = t._.parseMeasurement(e),
i;
switch (r[1]) {
case "%":
i = Math.floor(n * (r[0] / 100));
break;
case "em":
i = t.getBaseFontSize() * r[0];
break;
default:
case Qt:
i = r[0]
}
return i
},
recalcH: function(n) {
return t.recalc(n, e(window)[U]())
},
recalcW: function(n) {
return t.recalc(n, e(window)[E]())
},
refresh: function(r) {
var s;
t[n][F] && (r ? s = r.filter(q) : s = e(q), s[O]()[Vt](t[i][o]))
},
unlockView: function(e) {
e == sn && t[i][on][S](D, W), t[i][L].off(X), t[i][wt].off(mt), t._.vars.isMobile || t[i][wt].off(vt)
},
init: function() {
n in t[n] && (t._.extend(t[n], t[n][n]), delete t[n][n]), t._[_t](t[n], function(e) {
t[n][e] && typeof t[n][e] == $t && b in t[n][e] && (t[n][I][e] = t[n][e], delete t[n][e])
}), t[n][ln] && (t[n][F] = t[n][ln]());
if (t[n][F]) {
if (t._.vars[Mt] == "android" && t._.vars.deviceVersion < 4 || t._.vars[Mt] == "wp") t[n][F] = H;
t._.vars.IEVersion < 10 && (t[n][F] = H), t[n][Ut] && !t._.hasActive(t._[fn](t[n][Ut])) && (t[n][F] = H)
}
t[i][wt] = e(window), t.initTransforms(), t.initObjects(), t._[Pt](function() {
t.initLayers(), t.initIncludes(), t._.updateState(), t.refresh()
})
},
initIncludes: function() {
e(".skel-layers-include").each(function() {
t.parseInit(e(this))
})
},
initLayers: function() {
var r, s, o, u = 1;
t._[_t](t[n][I], function(r) {
var s;
if (!(b in t[n][I][r])) return;
if (!t[n][I][r][jt] && (s = e(un + r))[z] == 0) return;
o = new Nn(r, t[n][I][r], u++), t[i][I][r] = o, s && (s[M]()[Vt](o[j]), s.remove())
})
},
initObjects: function() {
t._[Pt](function() {
t[i][jt] = e(jt), t[i][Kt] = e(Kt), t[i][on] = e("html,body"), t[i][Kt].wrapInner('<div id="skel-layers-wrapper" />'), t[i][L] = e("#skel-layers-wrapper"), t[i][L][S](b, rn)[S](k, "0")[S](g, "0")[S](R, "0")[O](), t[i][P] = e('<div id="skel-layers-hiddenWrapper" />')[Vt](t[i][Kt]), t[i][P][S](U, "100%"), t[i][o] = e('<div id="skel-layers-visibleWrapper" />')[Vt](t[i][Kt]), t[i][o][S](b, rn), t._[pt](at, t[i][P][0]), t._[pt]("skel_layers_visibleWrapper", t[i][o][0]), t._[pt]("skel_layers_wrapper", t[i][L][0]), e("[autofocus]").focus()
})
},
initTransforms: function() {
if (t[n][F]) e.fn[r] = function() {
return e(this)[s](0, 0)
}, e.fn[s] = function(t, n) {
return e(this)[S](F, "translate(" + t + "px, " + n + "px)")
}, e.fn[O] = function() {
return e(this)[S]("backface-visibility", rt)[S]("perspective", "500")[qt]("transition", "transform " + t[n][dt] / 1e3 + "s ease-in-out")
};
else {
var o, u = [];
t[i][wt].resize(function() {
if (t[n][dt] != 0) {
var e = t[n][dt];
t[n][dt] = 0, window[v](function() {
t[n][dt] = e, u = []
}, e)
}
}), e.fn[r] = function() {
for (var r = 0; r < this[z]; r++) {
var s = this[r],
o = e(s);
u[s.id] && o.animate(u[s.id], t[n][dt], "swing", function() {
t._[_t](u[s.id], function(e) {
o[S](e, u[s.id][e])
}), t[i][Kt][S](D, W), t[i][L][S](E, Ft)[S](G, 0)
})
}
return e(this)
}, e.fn[s] = function(r, s) {
var o, f, l, c;
r = parseInt(r), s = parseInt(s), r != 0 ? (t[i][Kt][S](D, rt), t[i][L][S](E, t[i][wt][E]())) : l = function() {
t[i][Kt][S](D, W), t[i][L][S](E, Ft)
}, s < 0 ? t[i][L][S](G, Math.abs(s)) : c = function() {
t[i][L][S](G, 0)
};
for (o = 0; o < this[z]; o++) {
var h = this[o],
p = e(h),
d;
if (!u[h.id])
if (d = Nn[C][bt][p.data(st)]) {
u[h.id] = {};
switch (d.v) {
case T:
case R:
u[h.id][R] = parseInt(p[S](R));
break;
case y:
u[h.id][y] = parseInt(p[S](y))
}
switch (d.h) {
case T:
case k:
u[h.id][k] = parseInt(p[S](k));
break;
case g:
u[h.id][g] = parseInt(p[S](g))
}
} else d = p[b](), u[h.id] = {
top: d[R],
left: d[k]
};
a = {}, t._[_t](u[h.id], function(e) {
var n;
switch (e) {
case R:
n = t[Zt](u[h.id][e]) + s;
break;
case y:
n = t[Zt](u[h.id][e]) - s;
break;
case k:
n = t[Q](u[h.id][e]) + r;
break;
case g:
n = t[Q](u[h.id][e]) - r
}
a[e] = n
}), p.animate(a, t[n][dt], "swing", function() {
l && l(), c && c()
})
}
return e(this)
}, e.fn[O] = function() {
return e(this)[S](b, "absolute")
}
}
}
}, t)
}(jQuery))
});

You could use the vh unit for setting the height of an element.
#cta {
height: 100vh;
}
Do check the browser support though: http://caniuse.com/#feat=viewport-units

Use absolute positioning
#cta {
position: absolute;
bottom: 0;
height: 100%;
width: 400px; /* Adjust as needed */
left: 100px; /* To get it centered */
background-color: blue;
}
See working demo here

jQuery Scroll not working. (Uncaught ReferenceError: jQuery is not defined )

I have installed a theme on opencart 1.5.6.4 and for some reason the scroll carousel doesn't work. I have included the file below. Can anyone see any errors? Or also look at the website on chrome web inspector.
The error on google chrome web inspector says
Uncaught ReferenceError: jQuery is not defined
But I am not very good with javascript so I don't know what the error could be.
http://ilovefancydress.com/
Link to js file
(function(t) {
"use strict";
var i = t.jCarousel = {};
i.version = "0.3.0-beta.5";
var s = /^([+\-]=)?(.+)$/;
i.parseTarget = function(t) {
var i = !1,
e = "object" != typeof t ? s.exec(t) : null;
return e ? (t = parseInt(e[2], 10) || 0, e[1] && (i = !0, "-=" ===
e[1] && (t *= -1))) : "object" != typeof t && (t =
parseInt(t, 10) || 0), {
target: t,
relative: i
}
}, i.detectCarousel = function(t) {
for (var i; t.size() > 0;) {
if (i = t.filter("[data-jcarousel]"), i.size() > 0) return i;
if (i = t.find("[data-jcarousel]"), i.size() > 0) return i;
t = t.parent()
}
return null
}, i.base = function(s) {
return {
version: i.version,
_options: {},
_element: null,
_carousel: null,
_init: t.noop,
_create: t.noop,
_destroy: t.noop,
_reload: t.noop,
create: function() {
return this._element.attr("data-" + s.toLowerCase(), !
0).data(s, this), !1 === this._trigger(
"create") ? this : (this._create(), this._trigger(
"createend"), this)
},
destroy: function() {
return !1 === this._trigger("destroy") ? this : (
this._destroy(), this._trigger("destroyend"),
this._element.removeData(s).removeAttr(
"data-" + s.toLowerCase()), this)
},
reload: function(t) {
return !1 === this._trigger("reload") ? this : (t &&
this.options(t), this._reload(), this._trigger(
"reloadend"), this)
},
element: function() {
return this._element
},
options: function(i, s) {
if (0 === arguments.length) return t.extend({},
this._options);
if ("string" == typeof i) {
if (s === void 0) return this._options[i] ===
void 0 ? null : this._options[i];
this._options[i] = s
} else this._options = t.extend({}, this._options,
i);
return this
},
carousel: function() {
return this._carousel || (this._carousel = i.detectCarousel(
this.options("carousel") || this._element
), this._carousel || t.error(
'Could not detect carousel for plugin "' +
s + '"')), this._carousel
},
_trigger: function(i, e, r) {
var n, o = !1;
return r = [this].concat(r || []), (e || this._element)
.each(function() {
n = t.Event((i + "." + s).toLowerCase()),
t(this).trigger(n, r), n.isDefaultPrevented() &&
(o = !0)
}), !o
}
}
}, i.plugin = function(s, e) {
var r = t[s] = function(i, s) {
this._element = t(i), this.options(s), this._init(),
this.create()
};
return r.fn = r.prototype = t.extend({}, i.base(s), e), t.fn[s] =
function(i) {
var e = Array.prototype.slice.call(arguments, 1),
n = this;
return "string" == typeof i ? this.each(function() {
var r = t(this).data(s);
if (!r) return t.error(
"Cannot call methods on " + s +
" prior to initialization; " +
'attempted to call method "' +
i + '"');
if (!t.isFunction(r[i]) || "_" === i.charAt(
0)) return t.error('No such method "' +
i + '" for ' + s + " instance");
var o = r[i].apply(r, e);
return o !== r && o !== void 0 ? (n = o, !1) :
void 0
}) : this.each(function() {
var e = t(this).data(s);
e instanceof r ? e.reload(i) : new r(this,
i)
}), n
}, r
}
})(jQuery),
function(t, i) {
"use strict";
var s = function(t) {
return parseFloat(t) || 0
};
t.jCarousel.plugin("jcarousel", {
animating: !1,
tail: 0,
inTail: !1,
resizeTimer: null,
lt: null,
vertical: !1,
rtl: !1,
circular: !1,
underflow: !1,
_options: {
list: function() {
return this.element().children().eq(0)
},
items: function() {
return this.list().children()
},
animation: 400,
transitions: !1,
wrap: null,
vertical: null,
rtl: null,
center: !1
},
_list: null,
_items: null,
_target: null,
_first: null,
_last: null,
_visible: null,
_fullyvisible: null,
_init: function() {
var t = this;
return this.onWindowResize = function() {
t.resizeTimer && clearTimeout(t.resizeTimer), t
.resizeTimer = setTimeout(function() {
t.reload()
}, 100)
}, this
},
_create: function() {
this._reload(), t(i).on("resize.jcarousel", this.onWindowResize)
},
_destroy: function() {
t(i).off("resize.jcarousel", this.onWindowResize)
},
_reload: function() {
this.vertical = this.options("vertical"), null == this.vertical &&
(this.vertical = this.list().height() > this.list()
.width()), this.rtl = this.options("rtl"), null ==
this.rtl && (this.rtl = function(i) {
if ("rtl" === ("" + i.attr("dir")).toLowerCase())
return !0;
var s = !1;
return i.parents("[dir]").each(function() {
return /rtl/i.test(t(this).attr(
"dir")) ? (s = !0, !1) :
void 0
}), s
}(this._element)), this.lt = this.vertical ? "top" :
"left", this._items = null;
var i = this._target && this.index(this._target) >= 0 ?
this._target : this.closest();
this.circular = "circular" === this.options("wrap"),
this.underflow = !1;
var s = {
left: 0,
top: 0
};
return i.size() > 0 && (this._prepare(i), this.list().find(
"[data-jcarousel-clone]").remove(), this._items =
null, this.underflow = this._fullyvisible.size() >=
this.items().size(), this.circular = this.circular &&
!this.underflow, s[this.lt] = this._position(i) +
"px"), this.move(s), this
},
list: function() {
if (null === this._list) {
var i = this.options("list");
this._list = t.isFunction(i) ? i.call(this) : this._element
.find(i)
}
return this._list
},
items: function() {
if (null === this._items) {
var i = this.options("items");
this._items = (t.isFunction(i) ? i.call(this) :
this.list().find(i)).not(
"[data-jcarousel-clone]")
}
return this._items
},
index: function(t) {
return this.items().index(t)
},
closest: function() {
var i, e = this,
r = this.list().position()[this.lt],
n = t(),
o = !1,
a = this.vertical ? "bottom" : this.rtl ? "left" :
"right";
return this.rtl && !this.vertical && (r = -1 * (r +
this.list().width() - this.clipping())), this.items()
.each(function() {
if (n = t(this), o) return !1;
var l = e.dimension(n);
if (r += l, r >= 0) {
if (i = l - s(n.css("margin-" + a)), !(
0 >= Math.abs(r) - l + i / 2))
return !1;
o = !0
}
}), n
},
target: function() {
return this._target
},
first: function() {
return this._first
},
last: function() {
return this._last
},
visible: function() {
return this._visible
},
fullyvisible: function() {
return this._fullyvisible
},
hasNext: function() {
if (!1 === this._trigger("hasnext")) return !0;
var t = this.options("wrap"),
i = this.items().size() - 1;
return i >= 0 && (t && "first" !== t || i > this.index(
this._last) || this.tail && !this.inTail) ? !0 :
!1
},
hasPrev: function() {
if (!1 === this._trigger("hasprev")) return !0;
var t = this.options("wrap");
return this.items().size() > 0 && (t && "last" !== t ||
this.index(this._first) > 0 || this.tail &&
this.inTail) ? !0 : !1
},
clipping: function() {
return this._element["inner" + (this.vertical ?
"Height" : "Width")]()
},
dimension: function(t) {
return t["outer" + (this.vertical ? "Height" : "Width")]
(!0)
},
scroll: function(i, e, r) {
if (this.animating) return this;
if (!1 === this._trigger("scroll", null, [i, e])) return
this;
t.isFunction(e) && (r = e, e = !0);
var n = t.jCarousel.parseTarget(i);
if (n.relative) {
var o, a, l, h, u, c, f, d, _ = this.items().size() -
1,
p = Math.abs(n.target),
m = this.options("wrap");
if (n.target > 0) {
var v = this.index(this._last);
if (v >= _ && this.tail) this.inTail ? "both" ===
m || "last" === m ? this._scroll(0, e, r) :
this._scroll(Math.min(this.index(this._target) +
p, _), e, r) : this._scrollTail(e, r);
else if (o = this.index(this._target), this.underflow &&
o === _ && ("circular" === m || "both" ===
m || "last" === m) || !this.underflow &&
v === _ && ("both" === m || "last" === m))
this._scroll(0, e, r);
else if (l = o + p, this.circular && l > _) {
for (d = _, u = this.items().get(-1); l > d++;)
u = this.items().eq(0), c = this._visible
.index(u) >= 0, c && u.after(u.clone(!0)
.attr("data-jcarousel-clone", !0)),
this.list().append(u), c || (f = {}, f[
this.lt] = this.dimension(u) *
(this.rtl ? -1 : 1), this.moveBy(f)
), this._items = null;
this._scroll(u, e, r)
} else this._scroll(Math.min(l, _), e, r)
} else if (this.inTail) this._scroll(Math.max(this.index(
this._first) - p + 1, 0), e, r);
else if (a = this.index(this._first), o = this.index(
this._target), h = this.underflow ? o : a,
l = h - p, 0 >= h && (this.underflow &&
"circular" === m || "both" === m || "first" ===
m)) this._scroll(_, e, r);
else if (this.circular && 0 > l) {
for (d = l, u = this.items().get(0); 0 > d++;) {
u = this.items().eq(-1), c = this._visible.index(
u) >= 0, c && u.after(u.clone(!0).attr(
"data-jcarousel-clone", !0)), this.list()
.prepend(u), this._items = null;
var g = s(this.list().position()[this.lt]),
y = this.dimension(u);
this.rtl && !this.vertical ? g += y : g -=
y, f = {}, f[this.lt] = g + "px", this.move(
f)
}
this._scroll(u, e, r)
} else this._scroll(Math.max(l, 0), e, r)
} else this._scroll(n.target, e, r);
return this._trigger("scrollend"), this
},
moveBy: function(t, i) {
var e = this.list().position();
return t.left && (t.left = e.left + s(t.left) + "px"),
t.top && (t.top = e.top + s(t.top) + "px"), this.move(
t, i)
},
move: function(i, s) {
s = s || {};
var e = this.options("transitions"),
r = !!e,
n = !!e.transforms,
o = !!e.transforms3d,
a = s.duration || 0,
l = this.list();
if (!r && a > 0) return l.animate(i, s), void 0;
var h = s.complete || t.noop,
u = {};
if (r) {
var c = l.css(["transitionDuration",
"transitionTimingFunction",
"transitionProperty"
]),
f = h;
h = function() {
t(this).css(c), f.call(this)
}, u = {
transitionDuration: (a > 0 ? a / 1e3 : 0) +
"s",
transitionTimingFunction: e.easing || s.easing,
transitionProperty: a > 0 ? function() {
return n || o ? "all" : i.left ?
"left" : "top"
}() : "none",
transform: "none"
}
}
o ? u.transform = "translate3d(" + (i.left || 0) + "," +
(i.top || 0) + ",0)" : n ? u.transform =
"translate(" + (i.left || 0) + "," + (i.top || 0) +
")" : t.extend(u, i), r && a > 0 && l.one(
"transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",
h), l.css(u), 0 >= a && l.each(function() {
h.call(this)
})
},
_scroll: function(i, e, r) {
if (this.animating) return t.isFunction(r) && r.call(
this, !1), this;
if ("object" != typeof i ? i = this.items().eq(i) : i.jquery ===
void 0 && (i = t(i)), 0 === i.size()) return t.isFunction(
r) && r.call(this, !1), this;
this.inTail = !1, this._prepare(i);
var n = this._position(i),
o = s(this.list().position()[this.lt]);
if (n === o) return t.isFunction(r) && r.call(this, !1),
this;
var a = {};
return a[this.lt] = n + "px", this._animate(a, e, r),
this
},
_scrollTail: function(i, s) {
if (this.animating || !this.tail) return t.isFunction(s) &&
s.call(this, !1), this;
var e = this.list().position()[this.lt];
this.rtl ? e += this.tail : e -= this.tail, this.inTail = !
0;
var r = {};
return r[this.lt] = e + "px", this._update({
target: this._target.next(),
fullyvisible: this._fullyvisible.slice(1).add(
this._visible.last())
}), this._animate(r, i, s), this
},
_animate: function(i, s, e) {
if (e = e || t.noop, !1 === this._trigger("animate"))
return e.call(this, !1), this;
this.animating = !0;
var r = this.options("animation"),
n = t.proxy(function() {
this.animating = !1;
var t = this.list().find(
"[data-jcarousel-clone]");
t.size() > 0 && (t.remove(), this._reload()),
this._trigger("animateend"), e.call(
this, !0)
}, this),
o = "object" == typeof r ? t.extend({}, r) : {
duration: r
},
a = o.complete || t.noop;
return s === !1 ? o.duration = 0 : t.fx.speeds[o.duration] !==
void 0 && (o.duration = t.fx.speeds[o.duration]), o
.complete = function() {
n(), a.call(this)
}, this.move(i, o), this
},
_prepare: function(i) {
var e, r, n, o = this.index(i),
a = o,
l = this.dimension(i),
h = this.clipping(),
u = this.vertical ? "bottom" : this.rtl ? "left" :
"right",
c = this.options("center"),
f = {
target: i,
first: i,
last: i,
visible: i,
fullyvisible: h >= l ? i : t()
};
if (c && (l /= 2, h /= 2), h > l)
for (;;) {
if (e = this.items().eq(++a), 0 === e.size()) {
if (!this.circular) break;
if (e = this.items().eq(0), r = this._visible
.index(e) >= 0, i.get(0) === e.get(0))
break;
if (r && e.after(e.clone(!0).attr(
"data-jcarousel-clone", !0)), this.list()
.append(e), !r) {
var d = {};
d[this.lt] = this.dimension(e) * (this.rtl ?
-1 : 1), this.moveBy(d)
}
this._items = null
}
if (l += this.dimension(e), f.last = e, f.visible =
f.visible.add(e), n = s(e.css("margin-" + u)),
h >= l - n && (f.fullyvisible = f.fullyvisible
.add(e)), l >= h) break
}
if (!this.circular && !c && h > l)
for (a = o;;) {
if (0 > --a) break;
if (e = this.items().eq(a), 0 === e.size())
break;
if (l += this.dimension(e), f.first = e, f.visible =
f.visible.add(e), n = s(e.css("margin-" + u)),
h >= l - n && (f.fullyvisible = f.fullyvisible
.add(e)), l >= h) break
}
return this._update(f), this.tail = 0, c || "circular" ===
this.options("wrap") || "custom" === this.options(
"wrap") || this.index(f.last) !== this.items().size() -
1 || (l -= s(f.last.css("margin-" + u)), l > h && (
this.tail = l - h)), this
},
_position: function(t) {
var i = this._first,
s = i.position()[this.lt],
e = this.options("center"),
r = e ? this.clipping() / 2 - this.dimension(i) / 2 :
0;
return this.rtl && !this.vertical ? (s -= this.clipping() -
this.dimension(i), s += r) : s -= r, !e && (
this.index(t) > this.index(i) || this.inTail) &&
this.tail ? (s = this.rtl ? s - this.tail : s +
this.tail, this.inTail = !0) : this.inTail = !1, -
s
},
_update: function(i) {
var s, e = this,
r = {
target: this._target || t(),
first: this._first || t(),
last: this._last || t(),
visible: this._visible || t(),
fullyvisible: this._fullyvisible || t()
},
n = this.index(i.first || r.first) < this.index(r.first),
o = function(s) {
var o = [],
a = [];
i[s].each(function() {
0 > r[s].index(this) && o.push(this)
}), r[s].each(function() {
0 > i[s].index(this) && a.push(this)
}), n ? o = o.reverse() : a = a.reverse(),
e._trigger("item" + s + "in", t(o)), e._trigger(
"item" + s + "out", t(a)), e["_" + s] =
i[s]
};
for (s in i) o(s);
return this
}
})
}
Hope you can help.
I have updated my include scripts but it is still not working.
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/add2cart-go2cart/common.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/common.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/fancybox/fancybox.setting.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/jquery.accordion.source.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/jquery.tweet.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/bootstrap/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="instafeed.min.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/nivo-slider/jquery.nivo.slider.pack.js"></script>
This is the error I am getting in console:
Uncaught TypeError: Failed to execute 'animate' on 'Element': 1 argument required, but only 0 present. ilovefancydress.com/catalog/view/javascript/jquery/jquery-1.7.1.min.js:3

Looking at your target page it appears you are loading your carousel before you have loaded your jquery:
<script type="text/javascript" src="catalog/view/theme/madame/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
If you are loading any jQuery-dependant plugins they have to be loaded after the jQuery itself is loaded. Sometimes jQuery plugins depend also on jQuery UI, therefore they need to be loaded after this one as well. In Your case the correct solution should be:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="catalog/view/theme/madame/js/jquery.jcarousel.min.js"></script>
Make sure there are no other dependencies and if they are make sure to fullfill them.

jQuery Tools issue

I am using the jQuery tools navigator on my page. Below is the example from their site;
http://flowplayer.org/tools/scrollable/navigator.html
While I am able to get it working on one place, I need to use the Navigator in 2 places within the same HTML (one # top AND another # bottom of page)
But it is not working correctly...My question is what do I need to update to get the plugin working in 2 places?
Just to give an idea, the JS seems to be using "scrollable" name...But I am not sure how it works as the writing style of the code is a bit complex to me.
And I call following on document ready
$("#browsable").scrollable().navigator();
Below is the HTML code structure;
<div class="fl LeftCol"><a class="prev browse left disabled"></a></div>
<div class="fl MidCol">
<div class="scrollable" id="browsable">
<div class="items">
<!-- Item 1 start-->
<div>
</div>
<!-- Item 1 end -->
<!-- Item 2 start -->
<div>
</div>
<!-- Item 2 end -->
</div> <!-- End items -->
</div> <!-- End browsable -->
</div> <!-- End MidCol -->
<div class="fl RightCol"><a class="next browse right"></a></div>
<div class="fl navi"><a class="active"></a><a class=""></a></div>
And the JS (beatified)
/*!
* jQuery Tools v1.2.6 - The missing UI library for the Web
*
* scrollable/scrollable.js
* scrollable/scrollable.navigator.js
*
* NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
*
* http://flowplayer.org/tools/
*
*/
(function (a) {
a.tools = a.tools || {
version: "v1.2.6"
}, a.tools.scrollable = {
conf: {
activeClass: "active",
circular: !1,
clonedClass: "cloned",
disabledClass: "disabled",
easing: "swing",
initialIndex: 0,
item: "> *",
items: ".items",
keyboard: !0,
mousewheel: !1,
next: ".next",
prev: ".prev",
size: 1,
speed: 400,
vertical: !1,
touch: !0,
wheelSpeed: 0
}
};
function b(a, b) {
var c = parseInt(a.css(b), 10);
if (c) return c;
var d = a[0].currentStyle;
return d && d.width && parseInt(d.width, 10)
}
function c(b, c) {
var d = a(c);
return d.length < 2 ? d : b.parent().find(c)
}
var d;
function e(b, e) {
var f = this,
g = b.add(f),
h = b.children(),
i = 0,
j = e.vertical;
d || (d = f), h.length > 1 && (h = a(e.items, b)), e.size > 1 && (e.circular = !1), a.extend(f, {
getConf: function () {
return e
},
getIndex: function () {
return i
},
getSize: function () {
return f.getItems().size()
},
getNaviButtons: function () {
return n.add(o)
},
getRoot: function () {
return b
},
getItemWrap: function () {
return h
},
getItems: function () {
return h.find(e.item).not("." + e.clonedClass)
},
move: function (a, b) {
return f.seekTo(i + a, b)
},
next: function (a) {
return f.move(e.size, a)
},
prev: function (a) {
return f.move(-e.size, a)
},
begin: function (a) {
return f.seekTo(0, a)
},
end: function (a) {
return f.seekTo(f.getSize() - 1, a)
},
focus: function () {
d = f;
return f
},
addItem: function (b) {
b = a(b), e.circular ? (h.children().last().before(b), h.children().first().replaceWith(b.clone().addClass(e.clonedClass))) : (h.append(b), o.removeClass("disabled")), g.trigger("onAddItem", [b]);
return f
},
seekTo: function (b, c, k) {
b.jquery || (b *= 1);
if (e.circular && b === 0 && i == -1 && c !== 0) return f;
if (!e.circular && b < 0 || b > f.getSize() || b < -1) return f;
var l = b;
b.jquery ? b = f.getItems().index(b) : l = f.getItems().eq(b);
var m = a.Event("onBeforeSeek");
if (!k) {
g.trigger(m, [b, c]);
if (m.isDefaultPrevented() || !l.length) return f
}
var n = j ? {
top: -l.position().top
} : {
left: -l.position().left
};
i = b, d = f, c === undefined && (c = e.speed), h.animate(n, c, e.easing, k ||
function () {
g.trigger("onSeek", [b])
});
return f
}
}), a.each(["onBeforeSeek", "onSeek", "onAddItem"], function (b, c) {
a.isFunction(e[c]) && a(f).bind(c, e[c]), f[c] = function (b) {
b && a(f).bind(c, b);
return f
}
});
if (e.circular) {
var k = f.getItems().slice(-1).clone().prependTo(h),
l = f.getItems().eq(1).clone().appendTo(h);
k.add(l).addClass(e.clonedClass), f.onBeforeSeek(function (a, b, c) {
if (!a.isDefaultPrevented()) {
if (b == -1) {
f.seekTo(k, c, function () {
f.end(0)
});
return a.preventDefault()
}
b == f.getSize() && f.seekTo(l, c, function () {
f.begin(0)
})
}
});
var m = b.parents().add(b).filter(function () {
if (a(this).css("display") === "none") return !0
});
m.length ? (m.show(), f.seekTo(0, 0, function () {}), m.hide()) : f.seekTo(0, 0, function () {})
}
var n = c(b, e.prev).click(function (a) {
a.stopPropagation(), f.prev()
}),
o = c(b, e.next).click(function (a) {
a.stopPropagation(), f.next()
});
e.circular || (f.onBeforeSeek(function (a, b) {
setTimeout(function () {
a.isDefaultPrevented() || (n.toggleClass(e.disabledClass, b <= 0), o.toggleClass(e.disabledClass, b >= f.getSize() - 1))
}, 1)
}), e.initialIndex || n.addClass(e.disabledClass)), f.getSize() < 2 && n.add(o).addClass(e.disabledClass), e.mousewheel && a.fn.mousewheel && b.mousewheel(function (a, b) {
if (e.mousewheel) {
f.move(b < 0 ? 1 : -1, e.wheelSpeed || 50);
return !1
}
});
if (e.touch) {
var p = {};
h[0].ontouchstart = function (a) {
var b = a.touches[0];
p.x = b.clientX, p.y = b.clientY
}, h[0].ontouchmove = function (a) {
if (a.touches.length == 1 && !h.is(":animated")) {
var b = a.touches[0],
c = p.x - b.clientX,
d = p.y - b.clientY;
f[j && d > 0 || !j && c > 0 ? "next" : "prev"](), a.preventDefault()
}
}
}
e.keyboard && a(document).bind("keydown.scrollable", function (b) {
if (!(!e.keyboard || b.altKey || b.ctrlKey || b.metaKey || a(b.target).is(":input"))) {
if (e.keyboard != "static" && d != f) return;
var c = b.keyCode;
if (j && (c == 38 || c == 40)) {
f.move(c == 38 ? -1 : 1);
return b.preventDefault()
}
if (!j && (c == 37 || c == 39)) {
f.move(c == 37 ? -1 : 1);
return b.preventDefault()
}
}
}), e.initialIndex && f.seekTo(e.initialIndex, 0, function () {})
}
a.fn.scrollable = function (b) {
var c = this.data("scrollable");
if (c) return c;
b = a.extend({}, a.tools.scrollable.conf, b), this.each(function () {
c = new e(a(this), b), a(this).data("scrollable", c)
});
return b.api ? c : this
}
})(jQuery);
(function (a) {
var b = a.tools.scrollable;
b.navigator = {
conf: {
navi: ".navi",
naviItem: null,
activeClass: "active",
indexed: !1,
idPrefix: null,
history: !1
}
};
function c(b, c) {
var d = a(c);
return d.length < 2 ? d : b.parent().find(c)
}
a.fn.navigator = function (d) {
typeof d == "string" && (d = {
navi: d
}), d = a.extend({}, b.navigator.conf, d);
var e;
this.each(function () {
var b = a(this).data("scrollable"),
f = d.navi.jquery ? d.navi : c(b.getRoot(), d.navi),
g = b.getNaviButtons(),
h = d.activeClass,
i = d.history && history.pushState,
j = b.getConf().size;
b && (e = b), b.getNaviButtons = function () {
return g.add(f)
}, i && (history.pushState({
i: 0
}), a(window).bind("popstate", function (a) {
var c = a.originalEvent.state;
c && b.seekTo(c.i)
}));
function k(a, c, d) {
b.seekTo(c), d.preventDefault(), i && history.pushState({
i: c
})
}
function l() {
return f.find(d.naviItem || "> *")
}
function m(b) {
var c = a("<" + (d.naviItem || "a") + "/>").click(function (c) {
k(a(this), b, c)
});
b === 0 && c.addClass(h), d.indexed && c.text(b + 1), d.idPrefix && c.attr("id", d.idPrefix + b);
return c.appendTo(f)
}
l().length ? l().each(function (b) {
a(this).click(function (c) {
k(a(this), b, c)
})
}) : a.each(b.getItems(), function (a) {
a % j == 0 && m(a)
}), b.onBeforeSeek(function (a, b) {
setTimeout(function () {
if (!a.isDefaultPrevented()) {
var c = b / j,
d = l().eq(c);
d.length && l().removeClass(h).eq(c).addClass(h)
}
}, 1)
}), b.onAddItem(function (a, c) {
var d = b.getItems().index(c);
d % j == 0 && m(d)
})
});
return d.api ? e : this
}
})(jQuery);

do not use the same id value more than one time on the page
if you can't set different id or class to the top and bottom menu and navigation control then i guess you can try this one
$(".scrollable:eq(0)").scrollable().navigator(".navi:eq(0)");
$(".scrollable:eq(1)").scrollable().navigator(".navi:eq(1)");

How to extract apple's 1 billion countdown? [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 12 years ago.
I've been trying to figure it out for hours and i didn't success, This Counter from Apple 1 billion downloads prize. doesn't use flash at all, only javascript and 0-9 images, which makes it really cool. Now after stackoverflow successed to extract google's pacman, can we do that?
P.S I can't even know if this is using prototype or scriptaculous since they're both included.

Here it is: http://images.apple.com/global/scripts/downloadcounter.js
StepTimingFunction = {
timingFunctionForStepCount: function (a) {
return function (b) {
return ((b * (a - 1)) >> 0) / ((a - 1))
}
}
};
DownloadCounter = Class.create();
Object.extend(DownloadCounter.prototype, {
initialize: function (a) {
this._url = a;
this.loadData();
this._isCounting = true
},
setIsCounting: function (a) {
this._isCounting = a
},
stop: function () {
if (this._isCounting) {
if (this._drawTimeout) {
window.clearTimeout(this._drawTimeout)
}
this.setIsCounting(false);
if (this._delegate && typeof this._delegate.counterDidStop === "function") {
this._delegate.counterDidStop(this)
}
}
},
start: function () {
if (!this._isCounting) {
this.loadData();
this.setIsCounting(true);
if (this._delegate && typeof this._delegate.counterDidStart === "function") {
this._delegate.counterDidStart(this)
}
}
},
isCounting: function () {
return this._isCounting
},
_delegate: null,
setDelegate: function (a) {
this._delegate = a
},
delegate: function () {
return this._delegate
},
loadData: function () {
if (this._nextUpdateTimeout) {
window.clearTimeout(this._nextUpdateTimeout);
this._nextUpdateTimeout = null
}
var a = document.location.href.toString();
a = a.replace(/.apple.com\/.*$/, ".apple.com");
new Ajax.Request((a + this._url + "?r=" + Math.random()), {
method: "get",
onSuccess: this.dataRequestDidFinishLoading.bind(this)
})
},
dataRequestDidFinishLoading: function (o) {
var k = o.responseText.split("|"),
n, d, j, g, l, h, b, f, e, m, a, i, c;
localServerBasedReferenceTime = Date.parse(o.getResponseHeader("Date"));
if (k.length === 3) {
n = k[0].split(" ");
d = n[1];
date = n[0].split("-");
this.setRate(parseInt(k[2]) / 3600000);
l = date[0];
g = date[1];
j = date[2];
a = Date.parse(g + " " + l + ", " + j + " " + d + " GMT-0700");
e = new Date(a + 3600000);
m = e.getTime() - a + 1000;
this._nextUpdateTimeout = setTimeout(this.loadData.bind(this), m);
if (typeof localServerBasedReferenceTime === "number") {
this._lastReferenceTime = localServerBasedReferenceTime
} else {
b = new Date();
this._lastReferenceTime = b.getTime()
}
f = this._lastReferenceTime - a;
i = Math.floor(parseInt(k[1]) + f * (this._rate));
this.setCurrentCount(i);
this.setNeedsDisplayIfNeeded()
}
},
setNeedsDisplayIfNeeded: function () {
if (!this._drawTimeout) {
this._drawTimeout = setTimeout(this.draw.bind(this), this._drawRefreshRate)
}
},
setElement: function (c) {
this._element = c;
var b = this._element.getElementsByClassName("digitGroupSeparator");
if (b.length > 0) {
var a = b[0];
this._element.removeChild(a);
this.setDigitGroupSeparatorTemplateElement(a)
}
this._element.empty();
this.createDigitElementsIfNeeded();
this.setNeedsDisplayIfNeeded()
},
setDigitGroupSeparatorTemplateElement: function (a) {
this._digitGroupSeparatorTemplateElement = a
},
_currentCount: 0,
setCurrentCount: function (a) {
if (a !== this._currentCount) {
this._currentCount = a;
this.createDigitElementsIfNeeded()
}
},
digitTemplateElement: function () {
if (!this._digitTemplateElement) {
this._digitTemplateElement = document.createElement("span");
$(this._digitTemplateElement).addClassName("digit");
var a = document.createElement("div"),
b = document.createElement("div"),
c = document.createElement("div");
$(a).addClassName("digitText");
$(b).addClassName("digitImage");
this._digitTemplateElement.appendChild(a);
this._digitTemplateElement.appendChild(b);
$(c).addClassName("digitImageElement");
b.appendChild(c.cloneNode(true));
b.appendChild(c)
}
return this._digitTemplateElement
},
createDigitElementsIfNeeded: function () {
if (this._element && (!this._digitElements || this._digitElements.length !== this._currentCount.toString().length)) {
this._element.empty();
this._createDigitElements()
}
},
_createDigitElements: function () {
if (!this._digitElements) {
this._digitElements = []
}
var e = 0,
b = (this._maxCount && this._currentCount >= this._maxCount) ? this._maxCount.toString().length : this._currentCount.toString().length,
c = document.createDocumentFragment(),
a, h = this.digitTemplateElement(),
g = this._digitGroupSeparatorTemplateElement,
d = (this._maxCount && this._currentCount >= this._maxCount) ? String(this._maxCount) : String(this._currentCount),
f;
if (!g) {
g = document.createElement("span");
$(g).addClassName("digitGroupSeparator")
}
for (e = 0 + this._digitElements.length; e < b; e++) {
a = h.cloneNode(true);
f = parseInt(d.charAt(b - (e + 1)));
a.lastChild.style.top = "-" + (f * (this._digitImageAnimationCount * this._digitImageHeight)) + "px";
this._digitElements[e] = a;
if (e > 0 && ((e) % 3 == 0)) {
c.insertBefore(g.cloneNode(true), c.firstChild)
}
c.insertBefore(a, c.firstChild)
}
this._element.insertBefore(c, this._element.firstChild)
},
currentCount: function () {
return this._currentCount
},
setRate: function (a) {
this._rate = a
},
rate: function () {
return this._rate
},
_drawRefreshRate: 50,
_digitImageHeight: 38,
setDigitImageHeight: function (a) {
this._digitImageHeight = a
},
_digitImageAnimationCount: 6,
setDigitImageAnimationCount: function (a) {
this._digitImageAnimationCount = a
},
_maxCount: false,
setMaxCount: function (a) {
this._maxCount = a
},
draw: function () {
window.clearTimeout(this._drawTimeout);
this._drawTimeout = null;
var h = this._drawRefreshRate,
e, j, k, c, a, l, o, b, n, d, m, p = this._digitImageHeight * this._digitImageAnimationCount,
g, f = this._digitElements,
q;
if (this._element) {
m = String(this._currentCount);
this._currentCount = this._currentCount + Math.floor(this._rate * h);
if (this._delegate && typeof this._delegate.counterDidReachValue === "function") {
this._delegate.counterDidReachValue(this, this._currentCount)
}
if (this._maxCount && this._currentCount >= this._maxCount) {
this._isCounting = false
}
if (!this._isCounting) {
return
}
e = (this._maxCount && this._currentCount >= this._maxCount) ? String(this._maxCount) : String(this._currentCount);
j = e.length;
k = j - 1;
for (c = k; c >= 0; c--) {
l = parseInt(e.charAt(c));
o = parseInt(m.charAt(c));
if (l !== o) {
if (!((k - c) < f.length)) {
this._createDigitElements()
}
a = f[k - c].lastChild;
if (a.___animating !== true) {
n = o * p;
if (l > o) {
b = l * p
} else {
b = (o + (10 - o) + l) * p
}
if (a.style.top !== (d = "-" + n + "px")) {
a.style.top = d
}
g = 1 + ((b - n) / this._digitImageHeight);
a.___animating = true;
q = new Effect.Move(a, {
x: 0,
y: (-1 * b),
duration: 0.4,
mode: "absolute",
transition: StepTimingFunction.timingFunctionForStepCount(g)
});
q.__element = a;
q.finish = function (i) {
if (window.removeEventListener) {
window.removeEventListener("unload", arguments.callee, false)
}
if (this.__element !== undefined) {
this.__element.___animating = false
}
};
if (window.addEventListener) {
window.addEventListener("unload", q.finish, false)
}
}
}
}
}
this._lastReferenceTime = (this._lastReferenceTime + h);
this.setNeedsDisplayIfNeeded()
}
});

Looks like it's a JS counter coupled with CSS.

The hearth of the whole script is this single image: http://images.apple.com/itunes/10-billion-app-countdown/images/filmstrip.png
Now everything should be obvious.
HTML placeholder for a single digit:
<div class="digit-placeholder"></div>
CSS that styles that placeholder:
.digit-placeholder {
/* Dimensions of a single "frame" */
width: 50px;
height: 75px;
background-image: url(...);
background-position: 0 0;
}
To display digit 7 you just have to move background (background-positon property) to the following coordinates: 0 -2800px (that's only an example). To display 8 move it to 0 -3400px.
To create an animation (change from 7 to 8) you just have to move background from -2800 to -3400 with a step of 60 in some period of time (let's say 0.5 second).
All you have to do is to clone that several times (10 times for one billion) and compute that period of time for each digit.

There's a file stored on the apple server which contains a count and a timestamp:
http://www.apple.com/autopush/us/itunes/includes/countdown.inc
That should give you a rough count.

Before I go to bed:
var number = '';
$('.digitImage').each(function(i) {
number += Math.abs($(this).position().top) / 618;
});
console.log(+number);
Now how long did that take? 3 minutes trying to figure out how do install a bookmarklet in chrome for injecting jQuery... 5 more minutes to get it working.