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.
Related
I used Doxygen to create documentation in HTML and now I am trying to convert the HTML files to PDF using wkhtmltopdf but encountered the below error.
The PDF is generated but content is all blank.
I am using wkhtmltopdf 0.12.6 (with patched qt), Doxygen 1.9.4
The jQuery file should be the standard javascript that is generated from Doxygen step.
wkhtmltopdf --debug-javascript --enable-local-file-access *.html output.pdf
Loading pages (1/6)
Warning: file:///C:/Users/Downloads/Mik/html/jquery.js:2 jQuery.Deferred exception: 'null' is not an object
Warning: undefined:0 TypeError: 'null' is not an object
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done
S.extend({
Deferred: function(e) {
var o = [
["notify", "progress", S.Callbacks("memory"), S.Callbacks("memory"), 2],
["resolve", "done", S.Callbacks("once memory"), S.Callbacks("once memory"), 0, "resolved"],
["reject", "fail", S.Callbacks("once memory"), S.Callbacks("once memory"), 1, "rejected"]
],
i = "pending",
a = {
state: function() {
return i
},
always: function() {
return s.done(arguments).fail(arguments), this
},
"catch": function(e) {
return a.then(null, e)
},
pipe: function() {
var i = arguments;
return S.Deferred(function(r) {
S.each(o, function(e, t) {
var n = m(i[t[4]]) && i[t[4]];
s[t[1]](function() {
var e = n && n.apply(this, arguments);
e && m(e.promise) ? e.promise().progress(r.notify).done(r.resolve).fail(r.reject) : r[t[0] + "With"](this, n ? [e] : arguments)
})
}), i = null
}).promise()
},
then: function(t, n, r) {
var u = 0;
function l(i, o, a, s) {
return function() {
var n = this,
r = arguments,
e = function() {
var e, t;
if (!(i < u)) {
if ((e = a.apply(n, r)) === o.promise()) throw new TypeError("Thenable self-resolution");
t = e && ("object" == typeof e || "function" == typeof e) && e.then, m(t) ? s ? t.call(e, l(u, o, R, s), l(u, o, M, s)) : (u++, t.call(e, l(u, o, R, s), l(u, o, M, s), l(u, o, R, o.notifyWith))) : (a !== R && (n = void 0, r = [e]), (s || o.resolveWith)(n, r))
}
},
t = s ? e : function() {
try {
e()
} catch (e) {
S.Deferred.exceptionHook && S.Deferred.exceptionHook(e, t.stackTrace), u <= i + 1 && (a !== M && (n = void 0, r = [e]), o.rejectWith(n, r))
}
};
i ? t() : (S.Deferred.getStackHook && (t.stackTrace = S.Deferred.getStackHook()), C.setTimeout(t))
}
}
return S.Deferred(function(e) {
o[0][3].add(l(0, e, m(r) ? r : R, e.notifyWith)), o[1][3].add(l(0, e, m(t) ? t : R)), o[2][3].add(l(0, e, m(n) ? n : M))
}).promise()
},
promise: function(e) {
return null != e ? S.extend(e, a) : a
}
},
s = {};
return S.each(o, function(e, t) {
var n = t[2],
r = t[5];
a[t[1]] = n.add, r && n.add(function() {
i = r
}, o[3 - e][2].disable, o[3 - e][3].disable, o[0][2].lock, o[0][3].lock), n.add(t[3].fire), s[t[0]] = function() {
return s[t[0] + "With"](this === s ? void 0 : this, arguments), this
}, s[t[0] + "With"] = n.fireWith
}), a.promise(s), e && e.call(s, s), s
},
when: function(e) {
var n = arguments.length,
t = n,
r = Array(t),
i = s.call(arguments),
o = S.Deferred(),
a = function(t) {
return function(e) {
r[t] = this, i[t] = 1 < arguments.length ? s.call(arguments) : e, --n || o.resolveWith(r, i)
}
};
if (n <= 1 && (I(e, o.done(a(t)).resolve, o.reject, !n), "pending" === o.state() || m(i[t] && i[t].then))) return o.then();
while (t--) I(i[t], a(t), o.reject);
return o.promise()
}
});
var W = /^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;
S.Deferred.exceptionHook = function(e, t) {
C.console && C.console.warn && e && W.test(e.name) && C.console.warn("jQuery.Deferred exception: " + e.message, e.stack, t)
}, S.readyException = function(e) {
C.setTimeout(function() {
throw e
})
};
var F = S.Deferred();
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"
Thanks for any help or guidance first of all.
We run a Shopify store and we're getting console errors. They all say:
Failed to load resource: the server responded with a status of 404 () ... blue.png
Failed to load resource: the server responded with a status of 404 () ... red.png
Failed to load resource: the server responded with a status of 404 () ... green.png
Nothing seems to be showing up incorrectly on the site, and it seems to be happening only on pages that have products. I expect it be caused by code in the background that's cycling through and grabbing product info including images. But because everything is showing up fine, I don't know why/where it's trying to GET the images.
I read some 'how to fix console error articles' online that (I think) helped me determine the line of code that's causing the issue. I could be wrong. I activated "pause on caught exceptions" and it stopped on this:
It's a jQuery v1.11.2 file.
Everything below was marked with the squiggly red line, with a tooltip indicating it was the source of the error.
This code appears at the very end of the file.
Is it actually being caused by the jQuery file itself, or something that's calling the jQuery script to run a function?
If it's the latter, how to I find out what's calling the jQuery file?
How do I go about fixing the issue?
Thanks for any help or guidance in helping me figure this out.
{return a.offsetWidth <= 0 && a.offsetHeight <= 0 || !k.reliableHiddenOffsets() && "none" === (a.style && a.style.display || m.css(a, "display"))
}, m.expr.filters.visible = function(a) {
return !m.expr.filters.hidden(a)
};
var Qc = /%20/g,
Rc = /\[\]$/,
Sc = /\r?\n/g,
Tc = /^(?:submit|button|image|reset|file)$/i,
Uc = /^(?:input|select|textarea|keygen)/i;
function Vc(a, b, c, d) {
var e;
if (m.isArray(b)) m.each(b, function(b, e) {
c || Rc.test(a) ? d(a, e) : Vc(a + "[" + ("object" == typeof e ? b : "") + "]", e, c, d)
});
else if (c || "object" !== m.type(b)) d(a, b);
else
for (e in b) Vc(a + "[" + e + "]", b[e], c, d)
}
m.param = function(a, b) {
var c, d = [],
e = function(a, b) {
b = m.isFunction(b) ? b() : null == b ? "" : b, d[d.length] = encodeURIComponent(a) + "=" + encodeURIComponent(b)
};
if (void 0 === b && (b = m.ajaxSettings && m.ajaxSettings.traditional), m.isArray(a) || a.jquery && !m.isPlainObject(a)) m.each(a, function() {
e(this.name, this.value)
});
else
for (c in a) Vc(c, a[c], b, e);
return d.join("&").replace(Qc, "+")
}, m.fn.extend({
serialize: function() {
return m.param(this.serializeArray())
},
serializeArray: function() {
return this.map(function() {
var a = m.prop(this, "elements");
return a ? m.makeArray(a) : this
}).filter(function() {
var a = this.type;
return this.name && !m(this).is(":disabled") && Uc.test(this.nodeName) && !Tc.test(a) && (this.checked || !W.test(a))
}).map(function(a, b) {
var c = m(this).val();
return null == c ? null : m.isArray(c) ? m.map(c, function(a) {
return {
name: b.name,
value: a.replace(Sc, "\r\n")
}
}) : {
name: b.name,
value: c.replace(Sc, "\r\n")
}
}).get()
}
}), m.ajaxSettings.xhr = void 0 !== a.ActiveXObject ? function() {
return !this.isLocal && /^(get|post|head|put|delete|options)$/i.test(this.type) && Zc() || $c()
} : Zc;
var Wc = 0,
Xc = {},
Yc = m.ajaxSettings.xhr();
a.attachEvent && a.attachEvent("onunload", function() {
for (var a in Xc) Xc[a](void 0, !0)
}), k.cors = !!Yc && "withCredentials" in Yc, Yc = k.ajax = !!Yc, Yc && m.ajaxTransport(function(a) {
if (!a.crossDomain || k.cors) {
var b;
return {
send: function(c, d) {
var e, f = a.xhr(),
g = ++Wc;
if (f.open(a.type, a.url, a.async, a.username, a.password), a.xhrFields)
for (e in a.xhrFields) f[e] = a.xhrFields[e];
a.mimeType && f.overrideMimeType && f.overrideMimeType(a.mimeType), a.crossDomain || c["X-Requested-With"] || (c["X-Requested-With"] = "XMLHttpRequest");
for (e in c) void 0 !== c[e] && f.setRequestHeader(e, c[e] + "");
f.send(a.hasContent && a.data || null), b = function(c, e) {
var h, i, j;
if (b && (e || 4 === f.readyState))
if (delete Xc[g], b = void 0, f.onreadystatechange = m.noop, e) 4 !== f.readyState && f.abort();
else {
j = {}, h = f.status, "string" == typeof f.responseText && (j.text = f.responseText);
try {
i = f.statusText
} catch (k) {
i = ""
}
h || !a.isLocal || a.crossDomain ? 1223 === h && (h = 204) : h = j.text ? 200 : 404
}
j && d(h, i, j, f.getAllResponseHeaders())
}, a.async ? 4 === f.readyState ? setTimeout(b) : f.onreadystatechange = Xc[g] = b : b()
},
abort: function() {
b && b(void 0, !0)
}
}
}
});
function Zc() {
try {
return new a.XMLHttpRequest
} catch (b) {}
}
function $c() {
try {
return new a.ActiveXObject("Microsoft.XMLHTTP")
} catch (b) {}
}
m.ajaxSetup({
accepts: {
script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
},
contents: {
script: /(?:java|ecma)script/
},
converters: {
"text script": function(a) {
return m.globalEval(a), a
}
}
}), m.ajaxPrefilter("script", function(a) {
void 0 === a.cache && (a.cache = !1), a.crossDomain && (a.type = "GET", a.global = !1)
}), m.ajaxTransport("script", function(a) {
if (a.crossDomain) {
var b, c = y.head || m("head")[0] || y.documentElement;
return {
send: function(d, e) {
b = y.createElement("script"), b.async = !0, a.scriptCharset && (b.charset = a.scriptCharset), b.src = a.url, b.onload = b.onreadystatechange = function(a, c) {
(c || !b.readyState || /loaded|complete/.test(b.readyState)) && (b.onload = b.onreadystatechange = null, b.parentNode && b.parentNode.removeChild(b), b = null, c || e(200, "success"))
}, c.insertBefore(b, c.firstChild)
},
abort: function() {
b && b.onload(void 0, !0)
}
}
}
});
var _c = [],
ad = /(=)\?(?=&|$)|\?\?/;
m.ajaxSetup({
jsonp: "callback",
jsonpCallback: function() {
var a = _c.pop() || m.expando + "_" + vc++;
return this[a] = !0, a
}
}), m.ajaxPrefilter("json jsonp", function(b, c, d) {
var e, f, g, h = b.jsonp !== !1 && (ad.test(b.url) ? "url" : "string" == typeof b.data && !(b.contentType || "").indexOf("application/x-www-form-urlencoded") && ad.test(b.data) && "data");
return h || "jsonp" === b.dataTypes[0] ? (e = b.jsonpCallback = m.isFunction(b.jsonpCallback) ? b.jsonpCallback() : b.jsonpCallback, h ? b[h] = b[h].replace(ad, "$1" + e) : b.jsonp !== !1 && (b.url += (wc.test(b.url) ? "&" : "?") + b.jsonp + "=" + e), b.converters["script json"] = function() {
return g || m.error(e + " was not called"), g[0]
}, b.dataTypes[0] = "json", f = a[e], a[e] = function() {
g = arguments
}, d.always(function() {
a[e] = f, b[e] && (b.jsonpCallback = c.jsonpCallback, _c.push(e)), g && m.isFunction(f) && f(g[0]), g = f = void 0
}), "script") : void 0
}), m.parseHTML = function(a, b, c) {
if (!a || "string" != typeof a) return null;
"boolean" == typeof b && (c = b, b = !1), b = b || y;
var d = u.exec(a),
e = !c && [];
return d ? [b.createElement(d[1])] : (d = m.buildFragment([a], b, e), e && e.length && m(e).remove(), m.merge([], d.childNodes))
};
var bd = m.fn.load;
m.fn.load = function(a, b, c) {
if ("string" != typeof a && bd) return bd.apply(this, arguments);
var d, e, f, g = this,
h = a.indexOf(" ");
return h >= 0 && (d = m.trim(a.slice(h, a.length)), a = a.slice(0, h)), m.isFunction(b) ? (c = b, b = void 0) : b && "object" == typeof b && (f = "POST"), g.length > 0 && m.ajax({
url: a,
type: f,
dataType: "html",
data: b
}).done(function(a) {
e = arguments, g.html(d ? m("<div>").append(m.parseHTML(a)).find(d) : a)
}).complete(c && function(a, b) {
g.each(c, e || [a.responseText, b, a])
}), this
}, m.each(["ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend"], function(a, b) {
m.fn[b] = function(a) {
return this.on(b, a)
}
}), m.expr.filters.animated = function(a) {
return m.grep(m.timers, function(b) {
return a === b.elem
}).length
};
var cd = a.document.documentElement;
function dd(a) {
return m.isWindow(a) ? a : 9 === a.nodeType ? a.defaultView || a.parentWindow : !1
}
m.offset = {
setOffset: function(a, b, c) {
var d, e, f, g, h, i, j, k = m.css(a, "position"),
l = m(a),
n = {};
"static" === k && (a.style.position = "relative"), h = l.offset(), f = m.css(a, "top"), i = m.css(a, "left"), j = ("absolute" === k || "fixed" === k) && m.inArray("auto", [f, i]) > -1, j ? (d = l.position(), g = d.top, e = d.left) : (g = parseFloat(f) || 0, e = parseFloat(i) || 0), m.isFunction(b) && (b = b.call(a, c, h)), null != b.top && (n.top = b.top - h.top + g), null != b.left && (n.left = b.left - h.left + e), "using" in b ? b.using.call(a, n) : l.css(n)
}
}, m.fn.extend({
offset: function(a) {
if (arguments.length) return void 0 === a ? this : this.each(function(b) {
m.offset.setOffset(this, a, b)
});
var b, c, d = {
top: 0,
left: 0
},
e = this[0],
f = e && e.ownerDocument;
if (f) return b = f.documentElement, m.contains(b, e) ? (typeof e.getBoundingClientRect !== K && (d = e.getBoundingClientRect()), c = dd(f), {
top: d.top + (c.pageYOffset || b.scrollTop) - (b.clientTop || 0),
left: d.left + (c.pageXOffset || b.scrollLeft) - (b.clientLeft || 0)
}) : d
},
position: function() {
if (this[0]) {
var a, b, c = {
top: 0,
left: 0
},
d = this[0];
return "fixed" === m.css(d, "position") ? b = d.getBoundingClientRect() : (a = this.offsetParent(), b = this.offset(), m.nodeName(a[0], "html") || (c = a.offset()), c.top += m.css(a[0], "borderTopWidth", !0), c.left += m.css(a[0], "borderLeftWidth", !0)), {
top: b.top - c.top - m.css(d, "marginTop", !0),
left: b.left - c.left - m.css(d, "marginLeft", !0)
}
}
},
offsetParent: function() {
return this.map(function() {
var a = this.offsetParent || cd;
while (a && !m.nodeName(a, "html") && "static" === m.css(a, "position")) a = a.offsetParent;
return a || cd
})
}
}), m.each({
scrollLeft: "pageXOffset",
scrollTop: "pageYOffset"
}, function(a, b) {
var c = /Y/.test(b);
m.fn[a] = function(d) {
return V(this, function(a, d, e) {
var f = dd(a);
return void 0 === e ? f ? b in f ? f[b] : f.document.documentElement[d] : a[d] : void(f ? f.scrollTo(c ? m(f).scrollLeft() : e, c ? e : m(f).scrollTop()) : a[d] = e)
}, a, d, arguments.length, null)
}
}), m.each(["top", "left"], function(a, b) {
m.cssHooks[b] = Lb(k.pixelPosition, function(a, c) {
return c ? (c = Jb(a, b), Hb.test(c) ? m(a).position()[b] + "px" : c) : void 0
})
}), m.each({
Height: "height",
Width: "width"
}, function(a, b) {
m.each({
padding: "inner" + a,
content: b,
"": "outer" + a
}, function(c, d) {
m.fn[d] = function(d, e) {
var f = arguments.length && (c || "boolean" != typeof d),
g = c || (d === !0 || e === !0 ? "margin" : "border");
return V(this, function(b, c, d) {
var e;
return m.isWindow(b) ? b.document.documentElement["client" + a] : 9 === b.nodeType ? (e = b.documentElement, Math.max(b.body["scroll" + a], e["scroll" + a], b.body["offset" + a], e["offset" + a], e["client" + a])) : void 0 === d ? m.css(b, c, g) : m.style(b, c, d, g)
}, b, f ? d : void 0, f, null)
}
})
}), m.fn.size = function() {
return this.length
}, m.fn.andSelf = m.fn.addBack, "function" == typeof define && define.amd && define("jquery", [], function() {
return m
});
var ed = a.jQuery,
fd = a.$;
return m.noConflict = function(b) {
return a.$ === m && (a.$ = fd), b && a.jQuery === m && (a.jQuery = ed), m
}, typeof b === K && (a.jQuery = a.$ = m), m
});
jQuery shouldn't be grabbing any files all by itself.
Following are the things that you can try.
You can click on the error in chrome console, that will take you to the error location in the scripts. Sometimes it will take you to the function which handles the error and not the one which causes it. In this case follow second.
You can expand the Stacktrace in the console to see the call stack and verify if there are functions in the call stack which are loading these images.
You can check under the Network tab to check the call to the images. In Chrome Network console you would see the a column named Initiator (After Name,Status,Type). If you click on the link in this column against the image call, you chrome will open then script and move cursor to the line which initiated the call to image. If source code there is minified you can click on the {} (Pretty Print) icon at the bottom of source code editor. That will format the code, then you will be able to pin point the source code line that's causing the issue.
Finally brute force, check for the references to the blue.png or any other files in your source code.
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 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)");