Related
am facing problem regarding style property, set by some element in "swiped.min.js".
It is defining css property transition & transform when i click a button. I want to add one more property to it z-index.
I have been trying to work around it with no success yet. I am just a beginner in js, would appreciate if anyone could point out how to add z-index to list.
! function() {
function t(t, e) {
document.addEventListener(t, function(t) {
a._elems.forEach(function(i) {
for (var n = t.target; n;) {
if (n === i.elem) return i[e](t), !1;
n = n.parentNode
}
return !1
})
})
}
function e() {
var t = [].shift.call(arguments),
e = arguments[0];
for (var i in e) e.hasOwnProperty(i) && (t[i] = e[i]);
return t
}
var i = window.navigator.msPointerEnabled,
n = {
start: i ? "MSPointerDown" : "touchstart",
move: i ? "MSPointerMove" : "touchmove",
end: i ? "MSPointerUp" : "touchend"
},
o = function() {
var t = window.getComputedStyle(document.documentElement, ""),
e = (Array.prototype.slice.call(t).join("").match(/-(moz|webkit|ms)-/) || "" === t.OLink && ["", "o"])[1];
return "-" + e + "-"
}(),
s = function() {
var t, e = document.createElement("fakeelement"),
i = {
transition: "transitionend",
OTransition: "oTransitionEnd",
MozTransition: "transitionend",
WebkitTransition: "webkitTransitionEnd"
};
for (t in i)
if (void 0 !== e.style[t]) return i[t]
}(),
r = {
transition: o + "transition",
transform: o + "transform"
},
h = function() {},
a = function(t) {
var i = {
duration: 200,
tolerance: 50,
time: 200,
dir: 1,
right: 0,
left: 0
};
t = e(i, t || {}), this.duration = t.duration, this.tolerance = t.tolerance, this.time = t.time, this.width = t.left || t.right, this.elem = t.elem, this.list = t.list, this.dir = t.dir, this.group = t.group, this.id = a.elemId++, this.onOpen = "function" == typeof t.onOpen ? t.onOpen : h, this.onClose = "function" == typeof t.onClose ? t.onClose : h, this.right = t.right, this.left = t.left, (t.right > 0 && t.tolerance > t.right || t.left > 0 && t.tolerance > t.left) && console.warn("tolerance must be less then left and right")
};
a._elems = [], a.groupCounter = 0, a.elemId = 0, a.init = function(t) {
a.groupCounter++;
var i = document.querySelectorAll(t.query),
n = [];
return delete t.query, [].forEach.call(i, function(i) {
var o = e({
elem: i,
group: a.groupCounter
}, t);
n.push(new a(o))
}), a._bindEvents(), a._elems = a._elems.concat(n), 1 === n.length ? n[0] : n
}, a._closeAll = function(t) {
a._elems.forEach(function(e) {
e.group === t && e.close(!0)
})
}, a.prototype.transitionEnd = function(t, e) {
function i() {
e.call(n), t.removeEventListener(s, i)
}
var n = this;
t.addEventListener(s, i)
}, a.prototype.touchStart = function(t) {
var e = t.changedTouches[0];
1 === t.touches.length && (this.touchId = e.identifier, this.x = e.pageX, this.y = e.pageY, this.startTime = new Date, this.resetValue(), this.list ? a._closeAll(this.group) : this.close(!0))
}, a.prototype.touchMove = function(t) {
var e = t.changedTouches[0];
this.isValidTouch(t) && (this.delta = e.pageX - this.x, this.dir = this.delta < 0 ? -1 : 1, this.width = this.delta < 0 ? this.right : this.left, this.defineUserAction(e), this.startSwipe && (this.move(), t.preventDefault()))
}, a.prototype.touchEnd = function(t) {
this.isValidTouch(t, !0) && this.startSwipe && (this.dir * this.delta > this.tolerance || new Date - this.startTime < this.time ? this.open() : this.close(), t.stopPropagation(), t.preventDefault())
}, a.prototype.open = function(t) {
this.animation(this.dir * this.width), this.swiped = !0, t || this.transitionEnd(this.elem, this.onOpen), this.resetValue()
}, a.prototype.close = function(t) {
this.animation(0), this.swiped = !1, t || this.transitionEnd(this.elem, this.onClose), this.resetValue()
}, a.prototype.toggle = function() {
this.swiped ? this.close() : this.open()
}, a.prototype.resetValue = function() {
this.startSwipe = !1, this.startScroll = !1, this.delta = 0
}, a._bindEvents = function() {
return a.eventBinded ? !1 : (t(n.move, "touchMove"), t(n.end, "touchEnd"), t(n.start, "touchStart"), void(a.eventBinded = !0))
}, a.prototype.defineUserAction = function(t) {
var e = 10,
i = 10;
Math.abs(this.y - t.pageY) > i && !this.startSwipe ? this.startScroll = !0 : Math.abs(this.delta) > e && !this.startScroll && (this.startSwipe = !0)
}, a.prototype.isValidTouch = function(t, e) {
var i = e ? "changedTouches" : "targetTouches";
return t[i][0].identifier === this.touchId
}, a.prototype.move = function() {
if (this.dir > 0 && (this.delta < 0 || 0 === this.left) || this.dir < 0 && (this.delta > 0 || 0 === this.right)) return !1;
var t = Math.abs(this.delta);
t > this.width && (this.delta = this.dir * (this.width + (t - this.width) / 8)), this.animation(this.delta, 0)
}, a.prototype.animation = function(t, e) {
e = void 0 === e ? this.duration : e, this.elem.style.cssText = r.transition + ":" + r.transform + " " + e + "ms; " + r.transform + ":translate3d(" + t + "px, 0px, 0px)"
}, a.prototype.destroy = function(t) {
var e = this.id;
a._elems.forEach(function(t, i) {
t.id === e && a._elems.splice(i, 1)
}), t && this.elem.parentNode.removeChild(this.elem)
}, window.Swiped = a
}();
! function() {
function t(t, e) {
document.addEventListener(t, function(t) {
a._elems.forEach(function(i) {
for (var n = t.target; n;) {
if (n === i.elem) return i[e](t), !1;
n = n.parentNode
}
return !1
})
})
}
function e() {
var t = [].shift.call(arguments),
e = arguments[0];
for (var i in e) e.hasOwnProperty(i) && (t[i] = e[i]);
return t
}
var i = window.navigator.msPointerEnabled,
n = {
start: i ? "MSPointerDown" : "touchstart",
move: i ? "MSPointerMove" : "touchmove",
end: i ? "MSPointerUp" : "touchend"
},
o = function() {
var t = window.getComputedStyle(document.documentElement, ""),
e = (Array.prototype.slice.call(t).join("").match(/-(moz|webkit|ms)-/) || "" === t.OLink && ["", "o"])[1];
return "-" + e + "-"
}(),
s = function() {
var t, e = document.createElement("fakeelement"),
i = {
transition: "transitionend",
OTransition: "oTransitionEnd",
MozTransition: "transitionend",
WebkitTransition: "webkitTransitionEnd"
};
for (t in i)
if (void 0 !== e.style[t]) return i[t]
}(),
r = {
transition: o + "transition",
transform: o + "transform"
},
h = function() {},
a = function(t) {
var i = {
duration: 200,
tolerance: 50,
time: 200,
dir: 1,
right: 0,
left: 0
};
t = e(i, t || {}), this.duration = t.duration, this.tolerance = t.tolerance, this.time = t.time, this.width = t.left || t.right, this.elem = t.elem, this.list = t.list, this.dir = t.dir, this.group = t.group, this.id = a.elemId++, this.onOpen = "function" == typeof t.onOpen ? t.onOpen : h, this.onClose = "function" == typeof t.onClose ? t.onClose : h, this.right = t.right, this.left = t.left, (t.right > 0 && t.tolerance > t.right || t.left > 0 && t.tolerance > t.left) && console.warn("tolerance must be less then left and right")
};
a._elems = [], a.groupCounter = 0, a.elemId = 0, a.init = function(t) {
a.groupCounter++;
var i = document.querySelectorAll(t.query),
n = [];
return delete t.query, [].forEach.call(i, function(i) {
var o = e({
elem: i,
group: a.groupCounter
}, t);
n.push(new a(o))
}), a._bindEvents(), a._elems = a._elems.concat(n), 1 === n.length ? n[0] : n
}, a._closeAll = function(t) {
a._elems.forEach(function(e) {
e.group === t && e.close(!0)
})
}, a.prototype.transitionEnd = function(t, e) {
function i() {
e.call(n), t.removeEventListener(s, i)
}
var n = this;
t.addEventListener(s, i)
}, a.prototype.touchStart = function(t) {
var e = t.changedTouches[0];
1 === t.touches.length && (this.touchId = e.identifier, this.x = e.pageX, this.y = e.pageY, this.startTime = new Date, this.resetValue(), this.list ? a._closeAll(this.group) : this.close(!0))
}, a.prototype.touchMove = function(t) {
var e = t.changedTouches[0];
this.isValidTouch(t) && (this.delta = e.pageX - this.x, this.dir = this.delta < 0 ? -1 : 1, this.width = this.delta < 0 ? this.right : this.left, this.defineUserAction(e), this.startSwipe && (this.move(), t.preventDefault()))
}, a.prototype.touchEnd = function(t) {
this.isValidTouch(t, !0) && this.startSwipe && (this.dir * this.delta > this.tolerance || new Date - this.startTime < this.time ? this.open() : this.close(), t.stopPropagation(), t.preventDefault())
}, a.prototype.open = function(t) {
this.animation(this.dir * this.width), this.swiped = !0, t || this.transitionEnd(this.elem, this.onOpen), this.resetValue()
}, a.prototype.close = function(t) {
this.animation(0), this.swiped = !1, t || this.transitionEnd(this.elem, this.onClose), this.resetValue()
}, a.prototype.toggle = function() {
this.swiped ? this.close() : this.open()
}, a.prototype.resetValue = function() {
this.startSwipe = !1, this.startScroll = !1, this.delta = 0
}, a._bindEvents = function() {
return a.eventBinded ? !1 : (t(n.move, "touchMove"), t(n.end, "touchEnd"), t(n.start, "touchStart"), void(a.eventBinded = !0))
}, a.prototype.defineUserAction = function(t) {
var e = 10,
i = 10;
Math.abs(this.y - t.pageY) > i && !this.startSwipe ? this.startScroll = !0 : Math.abs(this.delta) > e && !this.startScroll && (this.startSwipe = !0)
}, a.prototype.isValidTouch = function(t, e) {
var i = e ? "changedTouches" : "targetTouches";
return t[i][0].identifier === this.touchId
}, a.prototype.move = function() {
if (this.dir > 0 && (this.delta < 0 || 0 === this.left) || this.dir < 0 && (this.delta > 0 || 0 === this.right)) return !1;
var t = Math.abs(this.delta);
t > this.width && (this.delta = this.dir * (this.width + (t - this.width) / 8)), this.animation(this.delta, 0)
}, a.prototype.animation = function(t, e) {
e = void 0 === e ? this.duration : e, this.elem.style.cssText = r.transition + ":" + r.transform + " " + e + "ms; " + r.transform + ":translate3d(" + t + "px, 0px, 0px);" + " " + "z-index: 10000;"
}, a.prototype.destroy = function(t) {
var e = this.id;
a._elems.forEach(function(t, i) {
t.id === e && a._elems.splice(i, 1)
}), t && this.elem.parentNode.removeChild(this.elem)
}, window.Swiped = a
}();
You can add z-index to this line of code
e = void 0 === e ? this.duration : e, this.elem.style.cssText = r.transition + ":" + r.transform + " " + e + "ms; " + r.transform + ":translate3d(" + t + "px, 0px, 0px);" + " " + "z-index: 10000"
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
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.
Ive spent the majority of my trying to troubleshoot this script to do what you would generally consider to be something super easy to do.
My Fiddle
http://jsfiddle.net/pistachio_labs/LWCJM/
The actual library
https://github.com/sapegin/social-likes/tree/master/src
In this script it shows a share button with a pop up div, that shows the total shares for each of the social networks.
By default I have the button showing the caption "Shares", but when it has 0 shares, it simply displays the caption "Shares"
What ive been trying to do is work out how to display 0 next to the word shares on the button.
but no matter what I do I cant get a simple 0 to appear on the button next to the word shares.
Any ideas greatly appreciated.
var counter_string = 0 ;
! function (a) {
"function" == typeof define && define.amd ? define(["jquery"], a) : a(jQuery)
}(function (a) {
"use strict";
function b(a, b) {
this.container = a, this.options = b, this.init()
}
function c(b, c) {
this.widget = b, this.options = a.extend({}, c), this.detectService(), this.service && this.init()
}
function d(a) {
function b(a, b) {
return b.toUpper()
}
var c = {}, d = a.data();
for (var e in d) {
var f = d[e];
"yes" === f ? f = !0 : "no" === f && (f = !1), c[e.replace(/-(\w)/g, b)] = f
}
return c
}
function e(a, b) {
return f(a, b, encodeURIComponent)
}
function f(a, b, c) {
return a.replace(/\{([^\}]+)\}/g, function (a, d) {
return d in b ? c ? c(b[d]) : b[d] : a
})
}
function g(a, b) {
var c = k + a;
return c + " " + c + "_" + b
}
function h(b) {
function c(f) {
"keydown" === f.type && 27 !== f.which || a(f.target).closest(b).length || (b.removeClass(l), d.off(e, c))
}
var d = a(document),
e = "click touchstart keydown";
d.on(e, c)
}
function i(a, b) {
if (document.documentElement.getBoundingClientRect) {
var c = parseInt(a.css("left"), 10),
d = parseInt(a.css("top"), 10),
e = a[0].getBoundingClientRect();
e.left < b ? a.css("left", b - e.left + c) : e.right > window.innerWidth - b && a.css("left", window.innerWidth - e.right - b + c), e.top < b ? a.css("top", b - e.top + d) : e.bottom > window.innerHeight - b && a.css("top", window.innerHeight - e.bottom - b + d)
}
a.addClass(l)
}
var j = "social-likes",
k = j + "__",
l = j + "_opened",
m = {
facebook: {
counterUrl: "http://graph.facebook.com/fql?q=SELECT+total_count+FROM+link_stat+WHERE+url%3D%22{url}%22&callback=?",
convertNumber: function (a) {
return a.data[0].total_count
},
popupUrl: "http://www.facebook.com/sharer/sharer.php?u={url}",
popupWidth: 600,
popupHeight: 500
},
twitter: {
counterUrl: "http://urls.api.twitter.com/1/urls/count.json?url={url}&callback=?",
convertNumber: function (a) {
return a.count
},
popupUrl: "http://twitter.com/intent/tweet?url={url}&text={title}",
popupWidth: 600,
popupHeight: 450,
click: function () {
return /[\.:\-–—]\s*$/.test(this.options.title) || (this.options.title += ":"), !0
}
},
mailru: {
counterUrl: "http://connect.mail.ru/share_count?url_list={url}&callback=1&func=?",
convertNumber: function (a) {
for (var b in a) if (a.hasOwnProperty(b)) return a[b].shares
},
popupUrl: "http://connect.mail.ru/share?share_url={url}&title={title}",
popupWidth: 550,
popupHeight: 360
},
vkontakte: {
counterUrl: "http://vk.com/share.php?act=count&url={url}&index={index}",
counter: function (b, c) {
var d = m.vkontakte;
d._ || (d._ = [], window.VK || (window.VK = {}), window.VK.Share = {
count: function (a, b) {
d._[a].resolve(b)
}
});
var f = d._.length;
d._.push(c), a.getScript(e(b, {
index: f
})).fail(c.reject)
},
popupUrl: "http://vk.com/share.php?url={url}&title={title}",
popupWidth: 550,
popupHeight: 330
},
odnoklassniki: {
counterUrl: "http://www.odnoklassniki.ru/dk?st.cmd=shareData&ref={url}&cb=?",
convertNumber: function (a) {
return a.count
},
popupUrl: "http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl={url}",
popupWidth: 550,
popupHeight: 360
},
plusone: {
counterUrl: "http://share.yandex.ru/gpp.xml?url={url}",
counter: function (b, c) {
var d = m.plusone;
return d._ ? (c.reject(), void 0) : (window.services || (window.services = {}), window.services.gplus = {
cb: function (a) {
d._.resolve(a)
}
}, d._ = c, a.getScript(e(b)).fail(c.reject), void 0)
},
popupUrl: "https://plus.google.com/share?url={url}",
popupWidth: 700,
popupHeight: 500
},
pinterest: {
counterUrl: "http://api.pinterest.com/v1/urls/count.json?url={url}&callback=?",
convertNumber: function (a) {
return a.count
},
popupUrl: "http://pinterest.com/pin/create/button/?url={url}&description={title}",
popupWidth: 630,
popupHeight: 270
}
}, n = {
promises: {},
fetch: function (b, c, d) {
n.promises[b] || (n.promises[b] = {});
var f = n.promises[b];
if (f[c]) return f[c];
var g = a.extend({}, m[b], d),
h = a.Deferred(),
i = g.counterUrl && e(g.counterUrl, {
url: c
});
return a.isFunction(g.counter) ? g.counter(i, h) : g.counterUrl ? a.getJSON(i).done(function (b) {
try {
var c = b;
a.isFunction(g.convertNumber) && (c = g.convertNumber(b)), h.resolve(c)
} catch (d) {
h.reject()
}
}).fail(h.reject) : h.reject(), f[c] = h.promise(), f[c]
}
};
a.fn.socialLikes = function (c) {
return this.each(function () {
var e = a(this);
new b(e, a.extend({}, a.fn.socialLikes.defaults, c, d(e)))
})
},
a.fn.socialLikes.defaults = {
url: window.location.href.replace(window.location.hash, ""),
title: document.title,
counters: true,
zeroes: true,
wait: 500,
singleTitle: "Share"
}, b.prototype = {
init: function () {
//console.log('running');
this.container.addClass(j), this.single = this.container.hasClass(j + "_single"), this.initUserButtons(), this.number = 0, this.container.on("counter." + j, a.proxy(this.updateCounter, this) );
var b = this.container.children();
this.countersLeft = b.length, this.makeSingleButton(), b.each(a.proxy(function (b, d) {
new c(a(d), this.options)
}, this)), this.options.counters ? this.timer = setTimeout(a.proxy(this.appear, this), this.options.wait) : this.appear()
},
initUserButtons: function () {
!this.userButtonInited && window.socialLikesButtons && a.extend(!0, m, socialLikesButtons), this.userButtonInited = !0
},
makeSingleButton: function () {
if (this.single) {
var b = this.container;
b.addClass(j + "_vertical"), b.wrap(a("<div>", {
"class": j + "_single-w"
}));
var c = b.parent(),
d = parseInt(b.css("left"), 10),
e = parseInt(b.css("top"), 10),
m = a("<div>", {
"class": g("widget", "single")
}),
n = a(f('<div class="{buttonCls}" id="counter-wrapper"><span class="{iconCls}"></span>{title}</div>',
{
buttonCls: g("button", "single"),
iconCls: g("icon", "single"),
title: this.options.singleTitle
}));
// buttonCounter(this.options.singleTitle)
//buttonCounter(this.options.singleTitle)
m.append(n), c.append(m), m.click(function () {
return b.css({
left: d,
top: e
}), i(b, 20), h(b), !1
});
var o = a("<div>", {
"class": k + "close",
html: "×"
});
b.append(o), o.click(function () {
b.removeClass(l)
}), this.widget = m
}
},
updateCounter: function (a, b, c)
{
c && (
this.number += c, this.single && this.getCounterElem().text(this.number)
),
this.countersLeft--, 0 === this.countersLeft && (this.appear(), this.container.addClass(j + "_ready"), this.container.trigger("ready." + j, this.number))
},
appear: function () {
this.container.addClass(j + "_visible")
},
getCounterElem: function () {
var b = this.widget.find("." + k + "counter_single");
return b.length || (b = a("<span>", {
"class": g("counter", "single")
}), this.widget.append(b) ), b
}
}, c.prototype = {
init: function () {
if (this.detectParams(), this.initHtml(), this.options.counters) if (this.options.counterNumber) this.updateCounter(this.options.counterNumber);
else {
var b = this.options.counterUrl ? {
counterUrl: this.options.counterUrl
} : {};
n.fetch(this.service, this.options.url, b).always(a.proxy(this.updateCounter, this))
}
},
detectService: function () {
for (var b = this.widget[0].classList || this.widget[0].className.split(" "), c = 0; c < b.length; c++) {
var d = b[c];
if (m[d]) return this.service = d, a.extend(this.options, m[d]), void 0
}
},
detectParams: function () {
var a = this.widget.data();
if (a.counter) {
var b = parseInt(a.counter, 10);
isNaN(b) ? this.options.counterUrl = a.counter : this.options.counterNumber = b
}
a.title && (this.options.title = a.title), a.url && (this.options.url = a.url)
},
initHtml: function () {
var b = this.options,
c = this.widget,
d = c.find("a");
d.length && this.cloneDataAttrs(d, c);
var f = a("<span>", {
"class": this.getElementClassNames("button"),
text: c.text()
});
if (b.clickUrl) {
var g = e(b.clickUrl, {
url: b.url,
title: b.title
}),
h = a("<a>", {
href: g
});
this.cloneDataAttrs(c, h), c.replaceWith(h), this.widget = c = h
} else c.click(a.proxy(this.click, this));
c.removeClass(this.service), c.addClass(this.getElementClassNames("widget")), f.prepend(a("<span>", {
"class": this.getElementClassNames("icon")
})), c.empty().append(f), this.button = f
},
cloneDataAttrs: function (a, b) {
var c = a.data();
for (var d in c) c.hasOwnProperty(d) && b.data(d, c[d])
},
getElementClassNames: function (a) {
return g(a, this.service)
},
updateCounter: function (b) {
if (b = parseInt(b, 10) || 0, b || this.options.zeroes) {
var c = a("<span>",
{
"class": this.getElementClassNames("counter"),
text: b
}
);
console.log(c);
this.widget.append(c)
}
this.widget.trigger("counter." + j, [this.service, b])
//console.log(b);
},
click: function (b) {
var c = this.options,
d = !0;
if (a.isFunction(c.click) && (d = c.click.call(this, b)), d) {
var f = e(c.popupUrl, {
url: c.url,
title: c.title
});
f = this.addAdditionalParamsToUrl(f), this.openPopup(f, {
width: c.popupWidth,
height: c.popupHeight
})
}
return !1
},
addAdditionalParamsToUrl: function (b) {
var c = a.param(this.widget.data());
if (!c) return b;
var d = -1 === b.indexOf("?") ? "?" : "&";
return b + d + c
},
openPopup: function (a, b) {
var c = Math.round(screen.width / 2 - b.width / 2),
d = 0;
screen.height > b.height && (d = Math.round(screen.height / 3 - b.height / 2));
var e = window.open(a, "sl_" + this.service, "left=" + c + ",top=" + d + ",width=" + b.width + ",height=" + b.height + ",personalbar=0,toolbar=0,scrollbars=1,resizable=1");
e ? e.focus() : location.href = a
}
}, a(function () {
a("." + j).socialLikes()
})
//console.log(counter_string);
});
function buttonCounter(defaultString)
{
return defaultString;
}
As I understand you need to use zeroes option:
<ul class="social-likes" data-zeroes="yes">
…
</ul>
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)");