Mouseleave delay - javascript

Mouseleave delay - javascript

I'd like to delay the zoomed image disappearing by a X seconds so I can fade out the image rather than it simply disappearing.
Can I simply add .delay(1000) somewhere to the mouseleave / hide lines of code?
I've tried that but unfortunately doesn't seem to work. I've also tried to wrap a setTimeout( ... , 1000); around various parts of the code, but couldn't make that work either.
Any help much appreciated!
Here is the Jsfiddle https://jsfiddle.net/mr_antlers/nh5jw5tb/2/
This is the original 'EasyZoom' .js code.
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function (a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function () {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function (a) {
a.preventDefault()
})
}, b.prototype.show = function (a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function () {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function (a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function (a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function () {
this.isMouseOver = !1, this.isOpen && this.hide()
}, b.prototype._onLoad = function (a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function () {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function () {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function (b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function (a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function () {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function (b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function () {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function (c) {
return this.each(function () {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function () {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});

You can pass in beforeShow and beforeHide argument into easyZoom when you instantiate them.
var $easyzoom = $('.easyzoom').easyZoom({
beforeHide: function() {
this.$flyout.fadeOut();
return false;
},
beforeShow: function() {
this.$flyout.show();
}
});
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function(a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function() {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function(a) {
a.preventDefault()
})
}, b.prototype.show = function(a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function() {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function(a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function(a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function() {
this.isMouseOver = !1, this.isOpen && this.hide()
}, b.prototype._onLoad = function(a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function() {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function() {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function(b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function(a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function() {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function(b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function() {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function(c) {
return this.each(function() {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function() {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom({
beforeHide: function() {
this.$flyout.fadeOut();
return false;
},
beforeShow: function() {
this.$flyout.show();
}
});
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});
.easyzoom {
position: relative;
/* 'Shrink-wrap' the element */
display: inline-block;
*display: inline;
*zoom: 1;
}
.easyzoom img {
vertical-align: bottom;
}
.easyzoom.is-loading img {
cursor: progress;
}
.easyzoom.is-ready img {
cursor: default;
}
.easyzoom.is-error img {
cursor: not-allowed;
}
.easyzoom-notice {
position: absolute;
top: 50%;
left: 50%;
z-index: 150;
width: 10em;
margin: -1em 0 0 -5em;
line-height: 2em;
text-align: center;
background: #FFF;
box-shadow: 0 0 10px #888;
}
.easyzoom-flyout {
position: absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity: 0;
transition: 0.2s;
}
.easyzoom-flyout:hover {
position: absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity: 1;
transition: 0.8s;
}
.easyzoom--overlay .easyzoom-flyout {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.easyzoom--adjacent .easyzoom-flyout {
top: 0;
left: 100%;
width: 100%;
height: 100%;
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a href="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg">
<img src="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg" alt="" width="608.917" height="405.833" />
</a>
</div>
You can refer the flyout zoomed image using this.$flyout in the functions.
Return false if you want to stop the default hide or show function. Just remember to add the default behavior into your function if you are doing that.
In the example I did above, I do a fadeOut on the zoomed image and stop the flyout from detaching (default behavior is detach() the zoomed image element). Then, as the flyout element was faded out, I have to use $.show() or the element will be stuck at display: none and nothing will be shown on mouseover.
Hope this helps.

'mouseleave' trigger _onLeave() which fire hide() which cause the zoomed div with image is removed from the DOM so any CSS transition or $().fadeOut() does not work. I removed hide() firing when mouseleave and change opacity in CSS and it seems to work now and anything else seems to be broken. Change opacity time as you wish.
fiddle
/*!
* #name EasyZoom
* #author Matt Hinchliffe <>
* #modified Tuesday, September 6th, 2016
* #version 2.4.0
*/
! function (a) {
"use strict";
function b(b, c) {
this.$target = a(b), this.opts = a.extend({}, i, c, this.$target.data()), void 0 === this.isOpen && this._init()
}
var c, d, e, f, g, h, i = {
loadingNotice: "Loading image",
errorNotice: "The image could not be loaded",
errorDuration: 2500,
linkAttribute: "href",
preventClicks: !0,
beforeShow: a.noop,
beforeHide: a.noop,
onShow: a.noop,
onHide: a.noop,
onMove: a.noop
};
b.prototype._init = function () {
this.$link = this.$target.find("a"), this.$image = this.$target.find("img"), this.$flyout = a('<div class="easyzoom-flyout" />'), this.$notice = a('<div class="easyzoom-notice" />'), this.$target.on({
"mousemove.easyzoom touchmove.easyzoom": a.proxy(this._onMove, this),
"mouseleave.easyzoom touchend.easyzoom": a.proxy(this._onLeave, this),
"mouseenter.easyzoom touchstart.easyzoom": a.proxy(this._onEnter, this)
}), this.opts.preventClicks && this.$target.on("click.easyzoom", function (a) {
a.preventDefault()
})
}, b.prototype.show = function (a, b) {
var g, h, i, j, k = this;
if (this.opts.beforeShow.call(this) !== !1) {
if (!this.isReady) return this._loadImage(this.$link.attr(this.opts.linkAttribute), function () {
(k.isMouseOver || !b) && k.show(a)
});
this.$target.append(this.$flyout), g = this.$target.width(), h = this.$target.height(), i = this.$flyout.width(), j = this.$flyout.height(), c = this.$zoom.width() - i, d = this.$zoom.height() - j, 0 > c && (c = 0), 0 > d && (d = 0), e = c / g, f = d / h, this.isOpen = !0, this.opts.onShow.call(this), a && this._move(a)
}
}, b.prototype._onEnter = function (a) {
var b = a.originalEvent.touches;
this.isMouseOver = !0, b && 1 != b.length || (a.preventDefault(), this.show(a, !0))
}, b.prototype._onMove = function (a) {
this.isOpen && (a.preventDefault(), this._move(a))
}, b.prototype._onLeave = function () {
this.isMouseOver = !1, this.isOpen
}, b.prototype._onLoad = function (a) {
a.currentTarget.width && (this.isReady = !0, this.$notice.detach(), this.$flyout.html(this.$zoom), this.$target.removeClass("is-loading").addClass("is-ready"), a.data.call && a.data())
}, b.prototype._onError = function () {
var a = this;
this.$notice.text(this.opts.errorNotice), this.$target.removeClass("is-loading").addClass("is-error"), this.detachNotice = setTimeout(function () {
a.$notice.detach(), a.detachNotice = null
}, this.opts.errorDuration)
}, b.prototype._loadImage = function (b, c) {
var d = new Image;
this.$target.addClass("is-loading").append(this.$notice.text(this.opts.loadingNotice)), this.$zoom = a(d).on("error", a.proxy(this._onError, this)).on("load", c, a.proxy(this._onLoad, this)), d.style.position = "absolute", d.src = b
}, b.prototype._move = function (a) {
if (0 === a.type.indexOf("touch")) {
var b = a.touches || a.originalEvent.touches;
g = b[0].pageX, h = b[0].pageY
} else g = a.pageX || g, h = a.pageY || h;
var i = this.$target.offset(),
j = h - i.top,
k = g - i.left,
l = Math.ceil(j * f),
m = Math.ceil(k * e);
if (0 > m || 0 > l || m > c || l > d) this.hide();
else {
var n = -1 * l,
o = -1 * m;
this.$zoom.css({
top: n,
left: o
}), this.opts.onMove.call(this, n, o)
}
}, b.prototype.hide = function () {
this.isOpen && this.opts.beforeHide.call(this) !== !1 && (this.$flyout.detach(), this.isOpen = !1, this.opts.onHide.call(this))
}, b.prototype.swap = function (b, c, d) {
this.hide(), this.isReady = !1, this.detachNotice && clearTimeout(this.detachNotice), this.$notice.parent().length && this.$notice.detach(), this.$target.removeClass("is-loading is-ready is-error"), this.$image.attr({
src: b,
srcset: a.isArray(d) ? d.join() : d
}), this.$link.attr(this.opts.linkAttribute, c)
}, b.prototype.teardown = function () {
this.hide(), this.$target.off(".easyzoom").removeClass("is-loading is-ready is-error"), this.detachNotice && clearTimeout(this.detachNotice), delete this.$link, delete this.$zoom, delete this.$image, delete this.$notice, delete this.$flyout, delete this.isOpen, delete this.isReady
}, a.fn.easyZoom = function (c) {
return this.each(function () {
var d = a.data(this, "easyZoom");
d ? void 0 === d.isOpen && d._init() : a.data(this, "easyZoom", new b(this, c))
})
}, "function" == typeof define && define.amd ? define(function () {
return b
}) : "undefined" != typeof module && module.exports && (module.exports = b)
}(jQuery);
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});
.easyzoom {
position: relative;
/* 'Shrink-wrap' the element */
display: inline-block;
*display: inline;
*zoom: 1;
}
.easyzoom img {vertical-align: bottom;}
.easyzoom.is-loading img {cursor: progress;}
.easyzoom.is-ready img {cursor: default;}
.easyzoom.is-error img {cursor: not-allowed;}
.easyzoom-notice {
position: absolute;
top: 50%;
left: 50%;
z-index: 150;
width: 10em;
margin: -1em 0 0 -5em;
line-height: 2em;
text-align: center;
background: #FFF;
box-shadow: 0 0 10px #888;
}
.easyzoom-flyout {
position:absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity:0;
transition: opacity 1s ease-in-out;
}
.easyzoom-flyout:hover {
position:absolute;
z-index: 100;
overflow: hidden;
background: #FFF;
opacity:1;
}
.easyzoom--overlay .easyzoom-flyout {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.easyzoom--adjacent .easyzoom-flyout {
top: 0;
left: 100%;
width: 100%;
height: 100%;
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a href="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg">
<img src="http://radarmidcentury.com.au/wp-content/uploads/2016/12/z-danish-sideboard-hans-wegner-president-in-oak-1a.jpg" alt="" width="608.917" height="405.833" />
</a>
</div>

Related

how to change header color with midnight.js

I would like to change the color of the menu letters.
However, some problems arise.
The problem is that when I enter this jquery code the menu gets all centered
https://imgur.com/4196CgN
The goal of this jquery is to change the color of the header when it arrives in another section by assigning it a class.
If the header is between two sections, above it takes the color of the previous section, and below it takes the color of the next section.
/*!
* Midnight.js 1.1.1
* jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
* http://aerolab.github.io/midnight.js/
*
* Copyright (c) 2014 Aerolab <info#aerolab.co>
*
* Released under the MIT license
* http://aerolab.github.io/midnight.js/LICENSE.txt
*/
!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){var e=0,s=Array.prototype.slice;t.cleanData=function(e){return function(s){var i,n,o;for(o=0;null!=(n=s[o]);o++)try{i=t._data(n,"events"),i&&i.remove&&t(n).triggerHandler("remove")}catch(r){}e(s)}}(t.cleanData),t.widget=function(e,s,i){var n,o,r,a,h={},d=e.split(".")[0];return e=e.split(".")[1],n=d+"-"+e,i||(i=s,s=t.Widget),t.expr[":"][n.toLowerCase()]=function(e){return!!t.data(e,n)},t[d]=t[d]||{},o=t[d][e],r=t[d][e]=function(t,e){return this._createWidget?void(arguments.length&&this._createWidget(t,e)):new r(t,e)},t.extend(r,o,{version:i.version,_proto:t.extend({},i),_childConstructors:[]}),a=new s,a.options=t.widget.extend({},a.options),t.each(i,function(e,i){return t.isFunction(i)?void(h[e]=function(){var t=function(){return s.prototype[e].apply(this,arguments)},n=function(t){return s.prototype[e].apply(this,t)};return function(){var e,s=this._super,o=this._superApply;return this._super=t,this._superApply=n,e=i.apply(this,arguments),this._super=s,this._superApply=o,e}}()):void(h[e]=i)}),r.prototype=t.widget.extend(a,{widgetEventPrefix:o?a.widgetEventPrefix||e:e},h,{constructor:r,namespace:d,widgetName:e,widgetFullName:n}),o?(t.each(o._childConstructors,function(e,s){var i=s.prototype;t.widget(i.namespace+"."+i.widgetName,r,s._proto)}),delete o._childConstructors):s._childConstructors.push(r),t.widget.bridge(e,r),r},t.widget.extend=function(e){for(var i,n,o=s.call(arguments,1),r=0,a=o.length;a>r;r++)for(i in o[r])n=o[r][i],o[r].hasOwnProperty(i)&&void 0!==n&&(e[i]=t.isPlainObject(n)?t.isPlainObject(e[i])?t.widget.extend({},e[i],n):t.widget.extend({},n):n);return e},t.widget.bridge=function(e,i){var n=i.prototype.widgetFullName||e;t.fn[e]=function(o){var r="string"==typeof o,a=s.call(arguments,1),h=this;return o=!r&&a.length?t.widget.extend.apply(null,[o].concat(a)):o,r?this.each(function(){var s,i=t.data(this,n);return"instance"===o?(h=i,!1):i?t.isFunction(i[o])&&"_"!==o.charAt(0)?(s=i[o].apply(i,a),s!==i&&void 0!==s?(h=s&&s.jquery?h.pushStack(s.get()):s,!1):void 0):t.error("no such method '"+o+"' for "+e+" widget instance"):t.error("cannot call methods on "+e+" prior to initialization; attempted to call method '"+o+"'")}):this.each(function(){var e=t.data(this,n);e?(e.option(o||{}),e._init&&e._init()):t.data(this,n,new i(o,this))}),h}},t.Widget=function(){},t.Widget._childConstructors=[],t.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",defaultElement:"<div>",options:{disabled:!1,create:null},_createWidget:function(s,i){i=t(i||this.defaultElement||this)[0],this.element=t(i),this.uuid=e++,this.eventNamespace="."+this.widgetName+this.uuid,this.bindings=t(),this.hoverable=t(),this.focusable=t(),i!==this&&(t.data(i,this.widgetFullName,this),this._on(!0,this.element,{remove:function(t){t.target===i&&this.destroy()}}),this.document=t(i.style?i.ownerDocument:i.document||i),this.window=t(this.document[0].defaultView||this.document[0].parentWindow)),this.options=t.widget.extend({},this.options,this._getCreateOptions(),s),this._create(),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:t.noop,_getCreateEventData:t.noop,_create:t.noop,_init:t.noop,destroy:function(){this._destroy(),this.element.unbind(this.eventNamespace).removeData(this.widgetFullName).removeData(t.camelCase(this.widgetFullName)),this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName+"-disabled ui-state-disabled"),this.bindings.unbind(this.eventNamespace),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")},_destroy:t.noop,widget:function(){return this.element},option:function(e,s){var i,n,o,r=e;if(0===arguments.length)return t.widget.extend({},this.options);if("string"==typeof e)if(r={},i=e.split("."),e=i.shift(),i.length){for(n=r[e]=t.widget.extend({},this.options[e]),o=0;i.length-1>o;o++)n[i[o]]=n[i[o]]||{},n=n[i[o]];if(e=i.pop(),1===arguments.length)return void 0===n[e]?null:n[e];n[e]=s}else{if(1===arguments.length)return void 0===this.options[e]?null:this.options[e];r[e]=s}return this._setOptions(r),this},_setOptions:function(t){var e;for(e in t)this._setOption(e,t[e]);return this},_setOption:function(t,e){return this.options[t]=e,"disabled"===t&&(this.widget().toggleClass(this.widgetFullName+"-disabled",!!e),e&&(this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus"))),this},enable:function(){return this._setOptions({disabled:!1})},disable:function(){return this._setOptions({disabled:!0})},_on:function(e,s,i){var n,o=this;"boolean"!=typeof e&&(i=s,s=e,e=!1),i?(s=n=t(s),this.bindings=this.bindings.add(s)):(i=s,s=this.element,n=this.widget()),t.each(i,function(i,r){function a(){return e||o.options.disabled!==!0&&!t(this).hasClass("ui-state-disabled")?("string"==typeof r?o[r]:r).apply(o,arguments):void 0}"string"!=typeof r&&(a.guid=r.guid=r.guid||a.guid||t.guid++);var h=i.match(/^([\w:-]*)\s*(.*)$/),d=h[1]+o.eventNamespace,l=h[2];l?n.delegate(l,d,a):s.bind(d,a)})},_off:function(e,s){s=(s||"").split(" ").join(this.eventNamespace+" ")+this.eventNamespace,e.unbind(s).undelegate(s),this.bindings=t(this.bindings.not(e).get()),this.focusable=t(this.focusable.not(e).get()),this.hoverable=t(this.hoverable.not(e).get())},_delay:function(t,e){function s(){return("string"==typeof t?i[t]:t).apply(i,arguments)}var i=this;return setTimeout(s,e||0)},_hoverable:function(e){this.hoverable=this.hoverable.add(e),this._on(e,{mouseenter:function(e){t(e.currentTarget).addClass("ui-state-hover")},mouseleave:function(e){t(e.currentTarget).removeClass("ui-state-hover")}})},_focusable:function(e){this.focusable=this.focusable.add(e),this._on(e,{focusin:function(e){t(e.currentTarget).addClass("ui-state-focus")},focusout:function(e){t(e.currentTarget).removeClass("ui-state-focus")}})},_trigger:function(e,s,i){var n,o,r=this.options[e];if(i=i||{},s=t.Event(s),s.type=(e===this.widgetEventPrefix?e:this.widgetEventPrefix+e).toLowerCase(),s.target=this.element[0],o=s.originalEvent)for(n in o)n in s||(s[n]=o[n]);return this.element.trigger(s,i),!(t.isFunction(r)&&r.apply(this.element[0],[s].concat(i))===!1||s.isDefaultPrevented())}},t.each({show:"fadeIn",hide:"fadeOut"},function(e,s){t.Widget.prototype["_"+e]=function(i,n,o){"string"==typeof n&&(n={effect:n});var r,a=n?n===!0||"number"==typeof n?s:n.effect||s:e;n=n||{},"number"==typeof n&&(n={duration:n}),r=!t.isEmptyObject(n),n.complete=o,n.delay&&i.delay(n.delay),r&&t.effects&&t.effects.effect[a]?i[e](n):a!==e&&i[a]?i[a](n.duration,n.easing,o):i.queue(function(s){t(this)[e](),o&&o.call(i[0]),s()})}}),t.widget}),function(t){"use strict";t.widget("aerolab.midnight",{options:{headerClass:"midnightHeader",innerClass:"midnightInner",defaultClass:"default",classPrefix:"",sectionSelector:"midnight"},_headers:{},_headerInfo:{top:0,height:0},_$sections:[],_sections:[],_scrollTop:0,_documentHeight:0,_transformMode:!1,refresh:function(){this._headerInfo={top:0,height:this.element.outerHeight()},this._$sections=t("[data-"+this.options.sectionSelector+"]:not(:hidden)"),this._sections=[],this._setupHeaders(),this.recalculate()},_create:function(){var e=this;this._scrollTop=window.pageYOffset||document.documentElement.scrollTop,this._documentHeight=t(document).height(),this._headers={},this._transformMode=this._getSupportedTransform(),this.refresh(),setInterval(function(){e._recalculateSections()},1e3),e.recalculate(),t(window).resize(function(){e.recalculate()}),this._updateHeadersLoop()},recalculate:function(){this._recalculateSections(),this._updateHeaderHeight(),this._recalculateHeaders(),this._updateHeaders()},_getSupportedTransform:function(){for(var t=["transform","WebkitTransform","MozTransform","OTransform","msTransform"],e=0;e<t.length;e++)if(void 0!==document.createElement("div").style[t[e]])return t[e];return!1},_getContainerHeight:function(){var e=this.element.find("> ."+this.options.headerClass),s=0,i=0,n=this;return e.length?e.each(function(){var e=t(this),o=e.find("> ."+n.options.innerClass);o.length?(o.css("bottom","auto").css("overflow","auto"),i=o.outerHeight(),o.css("bottom","0")):(e.css("bottom","auto"),i=e.outerHeight(),e.css("bottom","0")),s=i>s?i:s}):s=i=this.element.outerHeight(),s},_setupHeaders:function(){var e=this;this._headers[this.options.defaultClass]={};for(var s=0;s<this._$sections.length;s++){var i=t(this._$sections[s]),n=i.data(this.options.sectionSelector);"string"==typeof n&&(n=n.trim(),""!==n&&(e._headers[n]={}))}({top:this.element.css("padding-top"),right:this.element.css("padding-right"),bottom:this.element.css("padding-bottom"),left:this.element.css("padding-left")});this.element.css({position:"fixed",top:0,left:0,right:0,overflow:"hidden"}),this._updateHeaderHeight();var o=this.element.find("> ."+this.options.headerClass);o.length?o.filter("."+this.options.defaultClass).length||o.filter("."+this.options.headerClass+":first").clone(!0,!0).attr("class",this.options.headerClass+" "+this.options.defaultClass):this.element.wrapInner('<div class="'+this.options.headerClass+" "+this.options.defaultClass+'"></div>');var o=this.element.find("> ."+this.options.headerClass),r=o.filter("."+this.options.defaultClass).clone(!0,!0);for(var n in this._headers)if(this._headers.hasOwnProperty(n)&&"undefined"==typeof this._headers[n].element){var a=o.filter("."+n);a.length?this._headers[n].element=a:this._headers[n].element=r.clone(!0,!0).removeClass(this.options.defaultClass).addClass(n).appendTo(this.element);var h={position:"absolute",overflow:"hidden",top:0,left:0,right:0,bottom:0};this._headers[n].element.css(h),this._transformMode!==!1&&this._headers[n].element.css(this._transformMode,"translateZ(0)"),this._headers[n].element.find("> ."+this.options.innerClass).length||this._headers[n].element.wrapInner('<div class="'+this.options.innerClass+'"></div>'),this._headers[n].inner=this._headers[n].element.find("> ."+this.options.innerClass),this._headers[n].inner.css(h),this._transformMode!==!1&&this._headers[n].inner.css(this._transformMode,"translateZ(0)"),this._headers[n].from="",this._headers[n].progress=0}o.each(function(){var s=t(this),i=!1;for(var n in e._headers)e._headers.hasOwnProperty(n)&&s.hasClass(n)&&(i=!0);s.find("> ."+e.options.innerClass).length||s.wrapInner('<div class="'+e.options.innerClass+'"></div>'),i?s.show():s.hide()})},_recalculateHeaders:function(){this._scrollTop=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop,this._scrollTop=Math.max(this._scrollTop,0),this._scrollTop=Math.min(this._scrollTop,this._documentHeight);var t=this._headerInfo.height,e=this._scrollTop+this._headerInfo.top,s=e+t;if("function"==typeof window.getComputedStyle){var i=window.getComputedStyle(this.element[0],null),n=0,o=0;if(this._transformMode!==!1&&"string"==typeof i.transform){var r=i.transform.match(/(-?[0-9\.]+)/g);null!==r&&r.length>=6&&!isNaN(parseFloat(r[5]))&&(o=parseFloat(r[5]))}i.top.indexOf("px")>=0&&!isNaN(parseFloat(i.top))&&(n=parseFloat(i.top)),e+=n+o,s+=n+o}for(var a in this._headers)this._headers.hasOwnProperty(a)&&(this._headers[a].from="",this._headers[a].progress=0);for(var h=0;h<this._sections.length;h++)s>=this._sections[h].start&&e<=this._sections[h].end&&(this._headers[this._sections[h].className].visible=!0,e>=this._sections[h].start&&s<=this._sections[h].end?(this._headers[this._sections[h].className].from="top",this._headers[this._sections[h].className].progress+=1):s>this._sections[h].end&&e<this._sections[h].end?(this._headers[this._sections[h].className].from="top",this._headers[this._sections[h].className].progress=1-(s-this._sections[h].end)/t):s>this._sections[h].start&&e<this._sections[h].start&&("top"===this._headers[this._sections[h].className].from?this._headers[this._sections[h].className].progress+=(s-this._sections[h].start)/t:(this._headers[this._sections[h].className].from="bottom",this._headers[this._sections[h].className].progress=(s-this._sections[h].start)/t)))},_updateHeaders:function(){if("undefined"!=typeof this._headers[this.options.defaultClass]){var t=0,e="";for(var s in this._headers)this._headers.hasOwnProperty(s)&&""!==!this._headers[s].from&&(t+=this._headers[s].progress,e=s);t<1&&(""===this._headers[this.options.defaultClass].from?(this._headers[this.options.defaultClass].from="top"===this._headers[e].from?"bottom":"top",this._headers[this.options.defaultClass].progress=1-t):this._headers[this.options.defaultClass].progress+=1-t);for(var i in this._headers)if(this._headers.hasOwnProperty(i)&&""!==!this._headers[i].from){var n=100*(1-this._headers[i].progress);n>=100&&(n=110),n<=-100&&(n=-110),"top"===this._headers[i].from?this._transformMode!==!1?(this._headers[i].element[0].style[this._transformMode]="translateY(-"+n+"%) translateZ(0)",this._headers[i].inner[0].style[this._transformMode]="translateY(+"+n+"%) translateZ(0)"):(this._headers[i].element[0].style.top="-"+n+"%",this._headers[i].inner[0].style.top="+"+n+"%"):this._transformMode!==!1?(this._headers[i].element[0].style[this._transformMode]="translateY(+"+n+"%) translateZ(0)",this._headers[i].inner[0].style[this._transformMode]="translateY(-"+n+"%) translateZ(0)"):(this._headers[i].element[0].style.top="+"+n+"%",this._headers[i].inner[0].style.top="-"+n+"%")}}},_recalculateSections:function(){this._documentHeight=t(document).height(),this._sections=[];for(var e=0;e<this._$sections.length;e++){var s=t(this._$sections[e]);this._sections.push({element:s,className:s.data(this.options.sectionSelector),start:s.offset().top,end:s.offset().top+s.outerHeight()})}},_updateHeaderHeight:function(){this._headerInfo.height=this._getContainerHeight(),this.element.css("height",this._headerInfo.height+"px")},_updateHeadersLoop:function(){var t=this;this._requestAnimationFrame(function(){t._updateHeadersLoop()}),this._recalculateHeaders(),this._updateHeaders()},_requestAnimationFrame:function(t){var e=e||function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}();e(t)}})}(jQuery);
body{font-family: 'Inter', sans-serif; font-size: 16px;}
/* base style */
a{text-decoration: none}
h1,h2,h3,h4,h5,h6,p,i{color: #000; padding-bottom: 30px;}
p{line-height: 28px; font-weight: 300px; color: #666;}
.big-text{ font-size: 70px; font-weight: 900;}
.medium-text{font-size: 40px;}
.normal-text{font-size: 20px;}
.small-text{font-size: 14px}
.intro-text{ text-transform: uppercase; font-size: 20px; font-weight: bold;}
.button{ background: #316bff; padding: 18px 28px; color: #fff; display: inline-block; border-radius: 4px;}
.subtitle{color: #000; text-decoration: underline;}
/* header */
.header{
width: 100%;
position:fixed;
top: 0;
left: 0;
padding: 30px;
display: flex;
text-align: center;
color: white;
z-index: 9999;
overflow: hidden;
}
.default{; color: #000;}
.white{ color: red;}
.menu{width: 100%; color: #fff; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.menu li{display: inline-block; }
.menu li a{;display: block; padding: 15px; color: #000; font-weight: 700;}
/* hero */
.hero{
background: linear-gradient(0deg, rgba(0,0,0,.1), rgba(0,0,0,.6)),
url('img/hero.jpg'), no-repeat center center;
background-size: cover;
height: 100vh;
display: flex; width: 100%; align-items: center;
}
.hero__content{
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
.hero__content h1,
.hero__content p {
color: #fff;
}
/* poster */
.poster{
display: flex;
height: 100vh;
width: 100%;
align-items: center;
}
/* helpers */
.mt-1{margin-top: 50px;}
.mt-2{margin-top: 100px;}
.mt-3{margin-top: 150px;}
.tw{color: #fff;}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!-- header -->
<nav class="header">
<ul class="menu">
<li>Home</li>
<li>Statistiche</li>
<li>Giocatori</li>
<li>News</li>
</ul>
</nav>
<!-- hero -->
<div class="hero " data-midnight="default" >
<div class="hero__content reveal">
<p class="intro-text">Il sito guida di</p>
<h1 class="big-text">Goodgame Empire</h1>
Scopri di più
</div>
</div>
<!-- poster -->
<section class="poster mt-3 " data-midnight="white">
<div class="poster__content">
<h3 class="big-text">Statistiche</h3>
<p>Acquisici una conoscenza più approfondita della situazione in Goodgame Empire.<br>Questo sito ti offre gratuitamente in un unico posto tutti gli strumenti di cui hai bisogno per analizzare i rendimenti delle coalizioni, le varie classifiche, e le guerre svolte.
</p>
Scopri di più
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="midnight.jquery.min.js"></script>
<script>
// Start midnight
$(document).ready(function(){
// Change this to the correct selector.
$('.menu li a').midnight();
});
</script>

If I understood correctly you can use CSS to do this:
.white ul li a {
color: white;
}
/*!
* Midnight.js 1.1.1
* jQuery plugin to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.
* http://aerolab.github.io/midnight.js/
*
* Copyright (c) 2014 Aerolab <info#aerolab.co>
*
* Released under the MIT license
* http://aerolab.github.io/midnight.js/LICENSE.txt
*/
! function(t) {
"function" == typeof define && define.amd ? define(["jquery"], t) : t(jQuery)
}(function(t) {
var e = 0,
s = Array.prototype.slice;
t.cleanData = function(e) {
return function(s) {
var i, n, o;
for (o = 0; null != (n = s[o]); o++) try {
i = t._data(n, "events"), i && i.remove && t(n).triggerHandler("remove")
} catch (r) {}
e(s)
}
}(t.cleanData), t.widget = function(e, s, i) {
var n, o, r, a, h = {},
d = e.split(".")[0];
return e = e.split(".")[1], n = d + "-" + e, i || (i = s, s = t.Widget), t.expr[":"][n.toLowerCase()] = function(e) {
return !!t.data(e, n)
}, t[d] = t[d] || {}, o = t[d][e], r = t[d][e] = function(t, e) {
return this._createWidget ? void(arguments.length && this._createWidget(t, e)) : new r(t, e)
}, t.extend(r, o, {
version: i.version,
_proto: t.extend({}, i),
_childConstructors: []
}), a = new s, a.options = t.widget.extend({}, a.options), t.each(i, function(e, i) {
return t.isFunction(i) ? void(h[e] = function() {
var t = function() {
return s.prototype[e].apply(this, arguments)
},
n = function(t) {
return s.prototype[e].apply(this, t)
};
return function() {
var e, s = this._super,
o = this._superApply;
return this._super = t, this._superApply = n, e = i.apply(this, arguments), this._super = s, this._superApply = o, e
}
}()) : void(h[e] = i)
}), r.prototype = t.widget.extend(a, {
widgetEventPrefix: o ? a.widgetEventPrefix || e : e
}, h, {
constructor: r,
namespace: d,
widgetName: e,
widgetFullName: n
}), o ? (t.each(o._childConstructors, function(e, s) {
var i = s.prototype;
t.widget(i.namespace + "." + i.widgetName, r, s._proto)
}), delete o._childConstructors) : s._childConstructors.push(r), t.widget.bridge(e, r), r
}, t.widget.extend = function(e) {
for (var i, n, o = s.call(arguments, 1), r = 0, a = o.length; a > r; r++)
for (i in o[r]) n = o[r][i], o[r].hasOwnProperty(i) && void 0 !== n && (e[i] = t.isPlainObject(n) ? t.isPlainObject(e[i]) ? t.widget.extend({}, e[i], n) : t.widget.extend({}, n) : n);
return e
}, t.widget.bridge = function(e, i) {
var n = i.prototype.widgetFullName || e;
t.fn[e] = function(o) {
var r = "string" == typeof o,
a = s.call(arguments, 1),
h = this;
return o = !r && a.length ? t.widget.extend.apply(null, [o].concat(a)) : o, r ? this.each(function() {
var s, i = t.data(this, n);
return "instance" === o ? (h = i, !1) : i ? t.isFunction(i[o]) && "_" !== o.charAt(0) ? (s = i[o].apply(i, a), s !== i && void 0 !== s ? (h = s && s.jquery ? h.pushStack(s.get()) : s, !1) : void 0) : t.error("no such method '" + o + "' for " + e + " widget instance") : t.error("cannot call methods on " + e + " prior to initialization; attempted to call method '" + o + "'")
}) : this.each(function() {
var e = t.data(this, n);
e ? (e.option(o || {}), e._init && e._init()) : t.data(this, n, new i(o, this))
}), h
}
}, t.Widget = function() {}, t.Widget._childConstructors = [], t.Widget.prototype = {
widgetName: "widget",
widgetEventPrefix: "",
defaultElement: "<div>",
options: {
disabled: !1,
create: null
},
_createWidget: function(s, i) {
i = t(i || this.defaultElement || this)[0], this.element = t(i), this.uuid = e++, this.eventNamespace = "." + this.widgetName + this.uuid, this.bindings = t(), this.hoverable = t(), this.focusable = t(), i !== this && (t.data(i, this.widgetFullName, this), this._on(!0, this.element, {
remove: function(t) {
t.target === i && this.destroy()
}
}), this.document = t(i.style ? i.ownerDocument : i.document || i), this.window = t(this.document[0].defaultView || this.document[0].parentWindow)), this.options = t.widget.extend({}, this.options, this._getCreateOptions(), s), this._create(), this._trigger("create", null, this._getCreateEventData()), this._init()
},
_getCreateOptions: t.noop,
_getCreateEventData: t.noop,
_create: t.noop,
_init: t.noop,
destroy: function() {
this._destroy(), this.element.unbind(this.eventNamespace).removeData(this.widgetFullName).removeData(t.camelCase(this.widgetFullName)), this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName + "-disabled ui-state-disabled"), this.bindings.unbind(this.eventNamespace), this.hoverable.removeClass("ui-state-hover"), this.focusable.removeClass("ui-state-focus")
},
_destroy: t.noop,
widget: function() {
return this.element
},
option: function(e, s) {
var i, n, o, r = e;
if (0 === arguments.length) return t.widget.extend({}, this.options);
if ("string" == typeof e)
if (r = {}, i = e.split("."), e = i.shift(), i.length) {
for (n = r[e] = t.widget.extend({}, this.options[e]), o = 0; i.length - 1 > o; o++) n[i[o]] = n[i[o]] || {}, n = n[i[o]];
if (e = i.pop(), 1 === arguments.length) return void 0 === n[e] ? null : n[e];
n[e] = s
} else {
if (1 === arguments.length) return void 0 === this.options[e] ? null : this.options[e];
r[e] = s
}
return this._setOptions(r), this
},
_setOptions: function(t) {
var e;
for (e in t) this._setOption(e, t[e]);
return this
},
_setOption: function(t, e) {
return this.options[t] = e, "disabled" === t && (this.widget().toggleClass(this.widgetFullName + "-disabled", !!e), e && (this.hoverable.removeClass("ui-state-hover"), this.focusable.removeClass("ui-state-focus"))), this
},
enable: function() {
return this._setOptions({
disabled: !1
})
},
disable: function() {
return this._setOptions({
disabled: !0
})
},
_on: function(e, s, i) {
var n, o = this;
"boolean" != typeof e && (i = s, s = e, e = !1), i ? (s = n = t(s), this.bindings = this.bindings.add(s)) : (i = s, s = this.element, n = this.widget()), t.each(i, function(i, r) {
function a() {
return e || o.options.disabled !== !0 && !t(this).hasClass("ui-state-disabled") ? ("string" == typeof r ? o[r] : r).apply(o, arguments) : void 0
}
"string" != typeof r && (a.guid = r.guid = r.guid || a.guid || t.guid++);
var h = i.match(/^([\w:-]*)\s*(.*)$/),
d = h[1] + o.eventNamespace,
l = h[2];
l ? n.delegate(l, d, a) : s.bind(d, a)
})
},
_off: function(e, s) {
s = (s || "").split(" ").join(this.eventNamespace + " ") + this.eventNamespace, e.unbind(s).undelegate(s), this.bindings = t(this.bindings.not(e).get()), this.focusable = t(this.focusable.not(e).get()), this.hoverable = t(this.hoverable.not(e).get())
},
_delay: function(t, e) {
function s() {
return ("string" == typeof t ? i[t] : t).apply(i, arguments)
}
var i = this;
return setTimeout(s, e || 0)
},
_hoverable: function(e) {
this.hoverable = this.hoverable.add(e), this._on(e, {
mouseenter: function(e) {
t(e.currentTarget).addClass("ui-state-hover")
},
mouseleave: function(e) {
t(e.currentTarget).removeClass("ui-state-hover")
}
})
},
_focusable: function(e) {
this.focusable = this.focusable.add(e), this._on(e, {
focusin: function(e) {
t(e.currentTarget).addClass("ui-state-focus")
},
focusout: function(e) {
t(e.currentTarget).removeClass("ui-state-focus")
}
})
},
_trigger: function(e, s, i) {
var n, o, r = this.options[e];
if (i = i || {}, s = t.Event(s), s.type = (e === this.widgetEventPrefix ? e : this.widgetEventPrefix + e).toLowerCase(), s.target = this.element[0], o = s.originalEvent)
for (n in o) n in s || (s[n] = o[n]);
return this.element.trigger(s, i), !(t.isFunction(r) && r.apply(this.element[0], [s].concat(i)) === !1 || s.isDefaultPrevented())
}
}, t.each({
show: "fadeIn",
hide: "fadeOut"
}, function(e, s) {
t.Widget.prototype["_" + e] = function(i, n, o) {
"string" == typeof n && (n = {
effect: n
});
var r, a = n ? n === !0 || "number" == typeof n ? s : n.effect || s : e;
n = n || {}, "number" == typeof n && (n = {
duration: n
}), r = !t.isEmptyObject(n), n.complete = o, n.delay && i.delay(n.delay), r && t.effects && t.effects.effect[a] ? i[e](n) : a !== e && i[a] ? i[a](n.duration, n.easing, o) : i.queue(function(s) {
t(this)[e](), o && o.call(i[0]), s()
})
}
}), t.widget
}),
function(t) {
"use strict";
t.widget("aerolab.midnight", {
options: {
headerClass: "midnightHeader",
innerClass: "midnightInner",
defaultClass: "default",
classPrefix: "",
sectionSelector: "midnight"
},
_headers: {},
_headerInfo: {
top: 0,
height: 0
},
_$sections: [],
_sections: [],
_scrollTop: 0,
_documentHeight: 0,
_transformMode: !1,
refresh: function() {
this._headerInfo = {
top: 0,
height: this.element.outerHeight()
}, this._$sections = t("[data-" + this.options.sectionSelector + "]:not(:hidden)"), this._sections = [], this._setupHeaders(), this.recalculate()
},
_create: function() {
var e = this;
this._scrollTop = window.pageYOffset || document.documentElement.scrollTop, this._documentHeight = t(document).height(), this._headers = {}, this._transformMode = this._getSupportedTransform(), this.refresh(), setInterval(function() {
e._recalculateSections()
}, 1e3), e.recalculate(), t(window).resize(function() {
e.recalculate()
}), this._updateHeadersLoop()
},
recalculate: function() {
this._recalculateSections(), this._updateHeaderHeight(), this._recalculateHeaders(), this._updateHeaders()
},
_getSupportedTransform: function() {
for (var t = ["transform", "WebkitTransform", "MozTransform", "OTransform", "msTransform"], e = 0; e < t.length; e++)
if (void 0 !== document.createElement("div").style[t[e]]) return t[e];
return !1
},
_getContainerHeight: function() {
var e = this.element.find("> ." + this.options.headerClass),
s = 0,
i = 0,
n = this;
return e.length ? e.each(function() {
var e = t(this),
o = e.find("> ." + n.options.innerClass);
o.length ? (o.css("bottom", "auto").css("overflow", "auto"), i = o.outerHeight(), o.css("bottom", "0")) : (e.css("bottom", "auto"), i = e.outerHeight(), e.css("bottom", "0")), s = i > s ? i : s
}) : s = i = this.element.outerHeight(), s
},
_setupHeaders: function() {
var e = this;
this._headers[this.options.defaultClass] = {};
for (var s = 0; s < this._$sections.length; s++) {
var i = t(this._$sections[s]),
n = i.data(this.options.sectionSelector);
"string" == typeof n && (n = n.trim(), "" !== n && (e._headers[n] = {}))
}({
top: this.element.css("padding-top"),
right: this.element.css("padding-right"),
bottom: this.element.css("padding-bottom"),
left: this.element.css("padding-left")
});
this.element.css({
position: "fixed",
top: 0,
left: 0,
right: 0,
overflow: "hidden"
}), this._updateHeaderHeight();
var o = this.element.find("> ." + this.options.headerClass);
o.length ? o.filter("." + this.options.defaultClass).length || o.filter("." + this.options.headerClass + ":first").clone(!0, !0).attr("class", this.options.headerClass + " " + this.options.defaultClass) : this.element.wrapInner('<div class="' + this.options.headerClass + " " + this.options.defaultClass + '"></div>');
var o = this.element.find("> ." + this.options.headerClass),
r = o.filter("." + this.options.defaultClass).clone(!0, !0);
for (var n in this._headers)
if (this._headers.hasOwnProperty(n) && "undefined" == typeof this._headers[n].element) {
var a = o.filter("." + n);
a.length ? this._headers[n].element = a : this._headers[n].element = r.clone(!0, !0).removeClass(this.options.defaultClass).addClass(n).appendTo(this.element);
var h = {
position: "absolute",
overflow: "hidden",
top: 0,
left: 0,
right: 0,
bottom: 0
};
this._headers[n].element.css(h), this._transformMode !== !1 && this._headers[n].element.css(this._transformMode, "translateZ(0)"), this._headers[n].element.find("> ." + this.options.innerClass).length || this._headers[n].element.wrapInner('<div class="' + this.options.innerClass + '"></div>'), this._headers[n].inner = this._headers[n].element.find("> ." + this.options.innerClass), this._headers[n].inner.css(h), this._transformMode !== !1 && this._headers[n].inner.css(this._transformMode, "translateZ(0)"), this._headers[n].from = "", this._headers[n].progress = 0
}
o.each(function() {
var s = t(this),
i = !1;
for (var n in e._headers) e._headers.hasOwnProperty(n) && s.hasClass(n) && (i = !0);
s.find("> ." + e.options.innerClass).length || s.wrapInner('<div class="' + e.options.innerClass + '"></div>'), i ? s.show() : s.hide()
})
},
_recalculateHeaders: function() {
this._scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop, this._scrollTop = Math.max(this._scrollTop, 0), this._scrollTop = Math.min(this._scrollTop, this._documentHeight);
var t = this._headerInfo.height,
e = this._scrollTop + this._headerInfo.top,
s = e + t;
if ("function" == typeof window.getComputedStyle) {
var i = window.getComputedStyle(this.element[0], null),
n = 0,
o = 0;
if (this._transformMode !== !1 && "string" == typeof i.transform) {
var r = i.transform.match(/(-?[0-9\.]+)/g);
null !== r && r.length >= 6 && !isNaN(parseFloat(r[5])) && (o = parseFloat(r[5]))
}
i.top.indexOf("px") >= 0 && !isNaN(parseFloat(i.top)) && (n = parseFloat(i.top)), e += n + o, s += n + o
}
for (var a in this._headers) this._headers.hasOwnProperty(a) && (this._headers[a].from = "", this._headers[a].progress = 0);
for (var h = 0; h < this._sections.length; h++) s >= this._sections[h].start && e <= this._sections[h].end && (this._headers[this._sections[h].className].visible = !0, e >= this._sections[h].start && s <= this._sections[h].end ? (this._headers[this._sections[h].className].from = "top", this._headers[this._sections[h].className].progress += 1) : s > this._sections[h].end && e < this._sections[h].end ? (this._headers[this._sections[h].className].from = "top", this._headers[this._sections[h].className].progress = 1 - (s - this._sections[h].end) / t) : s > this._sections[h].start && e < this._sections[h].start && ("top" === this._headers[this._sections[h].className].from ? this._headers[this._sections[h].className].progress += (s - this._sections[h].start) / t : (this._headers[this._sections[h].className].from = "bottom", this._headers[this._sections[h].className].progress = (s - this._sections[h].start) / t)))
},
_updateHeaders: function() {
if ("undefined" != typeof this._headers[this.options.defaultClass]) {
var t = 0,
e = "";
for (var s in this._headers) this._headers.hasOwnProperty(s) && "" !== !this._headers[s].from && (t += this._headers[s].progress, e = s);
t < 1 && ("" === this._headers[this.options.defaultClass].from ? (this._headers[this.options.defaultClass].from = "top" === this._headers[e].from ? "bottom" : "top", this._headers[this.options.defaultClass].progress = 1 - t) : this._headers[this.options.defaultClass].progress += 1 - t);
for (var i in this._headers)
if (this._headers.hasOwnProperty(i) && "" !== !this._headers[i].from) {
var n = 100 * (1 - this._headers[i].progress);
n >= 100 && (n = 110), n <= -100 && (n = -110), "top" === this._headers[i].from ? this._transformMode !== !1 ? (this._headers[i].element[0].style[this._transformMode] = "translateY(-" + n + "%) translateZ(0)", this._headers[i].inner[0].style[this._transformMode] = "translateY(+" + n + "%) translateZ(0)") : (this._headers[i].element[0].style.top = "-" + n + "%", this._headers[i].inner[0].style.top = "+" + n + "%") : this._transformMode !== !1 ? (this._headers[i].element[0].style[this._transformMode] = "translateY(+" + n + "%) translateZ(0)", this._headers[i].inner[0].style[this._transformMode] = "translateY(-" + n + "%) translateZ(0)") : (this._headers[i].element[0].style.top = "+" + n + "%", this._headers[i].inner[0].style.top = "-" + n + "%")
}
}
},
_recalculateSections: function() {
this._documentHeight = t(document).height(), this._sections = [];
for (var e = 0; e < this._$sections.length; e++) {
var s = t(this._$sections[e]);
this._sections.push({
element: s,
className: s.data(this.options.sectionSelector),
start: s.offset().top,
end: s.offset().top + s.outerHeight()
})
}
},
_updateHeaderHeight: function() {
this._headerInfo.height = this._getContainerHeight(), this.element.css("height", this._headerInfo.height + "px")
},
_updateHeadersLoop: function() {
var t = this;
this._requestAnimationFrame(function() {
t._updateHeadersLoop()
}), this._recalculateHeaders(), this._updateHeaders()
},
_requestAnimationFrame: function(t) {
var e = e || function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(t) {
window.setTimeout(t, 1e3 / 60)
}
}();
e(t)
}
})
}(jQuery);
body {
font-family: 'Inter', sans-serif;
font-size: 16px;
}
/* base style */
a {
text-decoration: none
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
i {
color: #000;
padding-bottom: 30px;
}
p {
line-height: 28px;
font-weight: 300px;
color: #666;
}
.big-text {
font-size: 70px;
font-weight: 900;
}
.medium-text {
font-size: 40px;
}
.normal-text {
font-size: 20px;
}
.small-text {
font-size: 14px
}
.intro-text {
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.button {
background: #316bff;
padding: 18px 28px;
color: #fff;
display: inline-block;
border-radius: 4px;
}
.subtitle {
color: #000;
text-decoration: underline;
}
/* header */
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
padding: 30px;
display: flex;
text-align: center;
color: white;
z-index: 9999;
overflow: hidden;
}
.default {
background: #316bff;
color: #000;
}
.white {
background: red;
color: red;
}
.white ul li a{
color: white;
}
.menu {
width: 100%;
color: #fff;
transition: all 1s cubic-bezier(.215, .61, .355, 1);
}
.menu li {
display: inline-block;
}
.menu li a {
;
display: block;
padding: 15px;
color: #000;
font-weight: 700;
}
/* hero */
.hero {
background: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .6)), url('img/hero.jpg'), no-repeat center center;
background-size: cover;
height: 100vh;
display: flex;
width: 100%;
align-items: center;
}
.hero__content {
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
.hero__content h1,
.hero__content p {
color: #fff;
}
/* poster */
.poster {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
}
/* helpers */
.mt-1 {
margin-top: 50px;
}
.mt-2 {
margin-top: 100px;
}
.mt-3 {
margin-top: 150px;
}
.tw {
color: #fff;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!-- header -->
<nav class="header">
<ul class="menu">
<li>Home</li>
<li>Statistiche</li>
<li>Giocatori</li>
<li>News</li>
</ul>
</nav>
<!-- hero -->
<div class="hero " data-midnight="default">
<div class="hero__content reveal">
<p class="intro-text">Il sito guida di</p>
<h1 class="big-text">Goodgame Empire</h1>
Scopri di più
</div>
</div>
<!-- poster -->
<section class="poster mt-3 " data-midnight="white">
<div class="poster__content">
<h3 class="big-text">Statistiche</h3>
<p>Acquisici una conoscenza più approfondita della situazione in Goodgame Empire.<br>Questo sito ti offre gratuitamente in un unico posto tutti gli strumenti di cui hai bisogno per analizzare i rendimenti delle coalizioni, le varie classifiche, e le
guerre svolte.
</p>
Scopri di più
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="midnight.jquery.min.js"></script>
<script>
// Start midnight
$(document).ready(function() {
// Change this to the correct selector.
$('nav.header').midnight();
});
</script>

Infinitely rolling text with CSS

On my HTML page, I need to have a line with text that rolls "infinitely" on the page, e.g.
"Hello World ... Hello World ... Hello World ... Hello World ..."
Sort of like a ticker tape, but with the same text's beginning rolling into its end w/o a gap.
I've tried using animation: marquee CSS style, I can get the text roll, then jump back, then roll again, but that's not what I need.
Is this possible with CSS? JS would be OK, if there is a working solution.

Try here "text rolling" working with text & images and mouse effects(js+css)
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Are you open to using a lib that does this?
This one here: http://www.cssscript.com/marquee-like-horizontal-scroller-with-pure-javascript-marquee-js/ does a good job.
$(document).ready(function() {
new Marquee('example', {
// once or continuous
continuous: true,
// 'rtl' or 'ltr'
direction: 'rtl',
// pause between loops
delayAfter: 1000,
// when to start
delayBefore: 0,
// scroll speed
speed: 0.5,
// loops
loops: -1
});
});
////////////////////////////// LIBRARY BELOW ///////
// See: http://www.cssscript.com/marquee-like-horizontal-scroller-with-pure-javascript-marquee-js/
/*
Vanilla Javascript Marquee
Version: 0.1.0
Author: Robert Bossaert <https://github.com/robertbossaert>
Example call:
new Marquee('element');
new Marquee('element', {
direction: 'rtl',
});
*/
var Marquee = function(element, defaults) {
"use strict";
var elem = document.getElementById(element),
options = (defaults === undefined) ? {} : defaults,
continuous = options.continuous || true, // once or continuous
delayAfter = options.delayAfter || 1000, // pause between loops
delayBefore = options.delayBefore || 0, // when to start
direction = options.direction || 'ltr', // ltr or rtl
loops = options.loops || -1,
speed = options.speed || 0.5,
timer = null,
milestone = 0,
marqueeElem = null,
elemWidth = null,
self = this,
ltrCond = 0,
loopCnt = 0,
start = 0,
process = null,
constructor = function(elem) {
// Build html
var elemHTML = elem.innerHTML,
elemNode = elem.childNodes[1] || elem;
elemWidth = elemNode.offsetWidth;
marqueeElem = '<div>' + elemHTML + '</div>';
elem.innerHTML = marqueeElem;
marqueeElem = elem.getElementsByTagName('div')[0];
elem.style.overflow = 'hidden';
marqueeElem.style.whiteSpace = 'nowrap';
marqueeElem.style.position = 'relative';
if (continuous === true) {
marqueeElem.innerHTML += elemHTML;
marqueeElem.style.width = '200%';
if (direction === 'ltr') {
start = -elemWidth;
}
} else {
ltrCond = elem.offsetWidth;
if (direction === 'rtl') {
milestone = ltrCond;
}
}
if (direction === 'ltr') {
milestone = -elemWidth;
} else if (direction === 'rtl') {
speed = -speed;
}
self.start();
return marqueeElem;
}
this.start = function() {
process = window.setInterval(function() {
self.play();
});
};
this.play = function() {
// beginning
marqueeElem.style.left = start + 'px';
start = start + speed;
if (start > ltrCond || start < -elemWidth) {
start = milestone;
loopCnt++;
if (loops !== -1 && loopCnt >= loops) {
marqueeElem.style.left = 0;
}
}
}
this.end = function() {
window.clearInterval(process);
}
// Init plugin
marqueeElem = constructor(elem);
}
body {
background: #edf3f9;
color: #3f4f5f;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 800px;
}
header {
border-bottom: 2px solid #3f4f5f;
padding: 6.25em 0 3.95em;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 0 10px;
}
.example {
padding: 3em 0;
}
h2 {
text-align: center;
}
pre {
background: #f5f2f0;
color: #000;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
line-height: 26px;
padding: 1em;
text-shadow: 0 1px white;
white-space: pre-wrap;
}
pre span.string {
color: #690;
}
pre span.number {
color: #905;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
The quick brown fox ran over to the bar to drink some water. He walked up to the bar tender and said: blah blah blah.
</div>

Here is a demo based upon the lib that Dreamer posted.
I didn't like how it set inline styles on the element or how it used cookies to store past settings so I removed that in the crawler.js code.
This is a pretty old library (ie5 is mentioned (!)) but it seems to do the trick.
$(function() {
marqueeInit({
uniqueid: 'mycrawler',
style: {
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
});
//////////////// CRAWLER.JS FOLLOWS ///////////
/* Text and/or Image Crawler Script v1.53 (c)2009-2012 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
/* Update 11/2011 - Detect and randomize td elements within a single table with a single tr */
// updated 7/2012 to 1.51 for optional integration with 3rd party initializing scripts -
// ref: http://www.dynamicdrive.com/forums/showthread.php?p=278161#post278161
// updated 8/2012 to 1.52 for greater compatibility with IE in Quirks Mode
/* Update 10/2012 to v1.53 - Adds optional persist property to have the crawler remember its
position and direction page to page and on page reload. To enable it in the marqueeInit set
persist: true,
*/
///////////////// No Need to Edit - Configuration is Done in the On Page marqueeInit call(s) /////////////////
function marqueeInit(config) {
if (!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function() {
if (!document.createElement) return;
if (typeof opera === 'undefined') {
window.opera = false;
}
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0,
tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {
'position': 'relative',
'overflow': 'hidden'
},
defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
},
dash, ie = false,
oldie = 0,
ie5 = false,
iever = 0;
/*#cc_on #*/
/*#if(#_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
#end #*/
if (!ie5) {
dash = /-(.)/g;
function toHump(a, b) {
return b.toUpperCase();
};
String.prototype.encamel = function() {
return this.replace(dash, toHump);
};
}
if (ie && iever < 8) {
marqueeInit.table = [];
window.attachEvent('onload', function() {
marqueeInit.OK = true;
var i = -1,
limit = marqueeInit.table.length;
while (++i < limit)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el) {
while ((el = el.parentNode))
if (el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id) {
if (ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))) {
marqueeInit.table.push(id);
return;
}
if (!document.getElementById(id))
setTimeout(function() {
marqueeInit.run(id);
}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag) {
var r = [],
i = 0,
e;
while ((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while ((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if ((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if ((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while ((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag) {
var els = oldie ? tag.all : tag.getElementsByTagName('*'),
i = els.length,
childels = [];
while (--i > -1) {
if (els[i].parentNode === tag) {
childels.push(els[i]);
}
}
childels.sort(function() {
return 0.5 - Math.random();
});
i = childels.length;
while (--i > -1) {
tag.appendChild(childels[i]);
}
}
function Marq(c, tag) {
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if (this.mq.random) {
if (tag.getElementsByTagName && tag.getElementsByTagName('tr').length === 1 && tag.childNodes.length === 1) {
randthem(tag.getElementsByTagName('tr')[0]);
} else {
randthem(tag);
}
}
for (p in defaultconfig)
if ((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width)) ? '100%' : this.mq.style.width;
if (!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height)) ? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height)) ? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width ? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if (ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [
[req1, this.c.style],
[this.mq.style, this.c.style]
];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if ((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if (this.mq.mouse === 'pause') {
this.c.onmouseover = function() {
cObj.mq.stopped = true;
};
this.c.onmouseout = function() {
cObj.mq.stopped = false;
};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if (ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if (!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for (i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if (ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if (ims.length) {
for (ic = 0, i = 0; i < ims.length; ++i) {
ims[i].style.display = 'inline';
if (!ims[i].alt && !this.mq.noAddedAlt) {
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if (!ims[i].title) {
ims[i].title = '';
}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if (typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function() {
if (++ic === ims.length)
cObj.setup(c);
};
}
if (ic === ims.length)
this.setup(c);
}
} else this.setup(c)
}
Marq.prototype.setup = function(c) {
if (this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this,
exit = 10000;
if (this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if (typeof this.mq.initcontent === 'function') {
this.mq.initcontent.apply(this.mq, [this.m]);
}
if (this.mq.mouse === 'cursor driven') {
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e) {
cObj.mq.stopped = false;
cObj.directspeed(e)
};
if (this.mq.moveatleast) {
this.mq.inc = this.mq.moveatleast;
if (this.mq.savedirection) {
if (this.mq.savedirection === 'reverse') {
this.c.onmouseout = function(e) {
if (cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right' ? 'left' : 'right';
};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e) {
if (cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;
};
}
} else
this.c.onmouseout = function(e) {
if (!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;
};
} else
this.c.onmouseout = function(e) {
if (!cObj.contains(e)) cObj.slowdeath();
};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast ? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while (this.c.offsetWidth > this.w - s && --exit) {
w = isNaN(this.cw[0]) ? this.w - s : --this.cw[0];
if (w < 1 || this.w < Math.max(1, s)) {
break;
}
this.c.style.width = isNaN(this.cw[0]) ? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function() {
var cObj = this;
if (this.mq.inc) {
this.mq.inc -= 1;
this.timer = setTimeout(function() {
cObj.slowdeath();
}, 100);
}
}
Marq.prototype.runit = function() {
var cObj = this,
d = this.mq.direction === 'right' ? 1 : -1;
if (this.mq.stopped || this.mq.stopMarquee) {
setTimeout(function() {
cObj.runit();
}, 300);
return;
}
if (this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if (d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if (d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function() {
cObj.runit();
}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e) {
e = e || window.event;
if (this.timer) clearTimeout(this.timer);
var c = this.c,
w = c.offsetWidth,
l = c.offsetLeft,
mp = (typeof e.pageX === 'number' ?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2,
rb = (w + this.r) / 2;
while ((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb ? 'left' : 'right';
this.mq.inc = Math.round((mp > rb ? (mp - rb) : mp < lb ? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e) {
if (e && e.relatedTarget) {
var c = e.relatedTarget;
if (c === this.c) return true;
while ((c = c.parentNode))
if (c === this.c) return true;
}
return false;
}
function resize() {
for (var s, w, m, i = 0; i < marqueeInit.ar.length; ++i) {
if (marqueeInit.ar[i] && marqueeInit.ar[i].setup) {
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast ? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1 ? parseInt(m.mq.style.width) : 'a';
while (m.c.offsetWidth > m.w - s) {
w = isNaN(m.cw[0]) ? m.w - s : --m.cw[0];
if (w < 1) {
break;
}
m.c.style.width = isNaN(m.cw[0]) ? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
function unload() {
for (var m, i = 0; i < marqueeInit.ar.length; ++i) {
if (marqueeInit.ar[i] && marqueeInit.ar[i].persist && marqueeInit.ar[i].setup) {
m = marqueeInit.ar[i].setup;
m.cookie.set(m.mq.uniqueid, m.m[0].style.left + ':' + m.m[1].style.left + ':' + m.mq.direction);
}
}
}
if (window.addEventListener) {
window.addEventListener('resize', resize, false);
window.addEventListener('unload', unload, false);
} else if (window.attachEvent) {
window.attachEvent('onresize', resize);
window.attachEvent('onunload', unload);
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marquee" id="mycrawler">
Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>

One-page scroll problems

I am using a free wordpress theme (I know, that is part of the problem :). It is a one-page scrolling theme with a sticky header. The problem is that the links do not hit the top of the sections - they scroll past. I did use CSS to increase the size of the header. If this throws it off that much how do I correct it in the coding?
site: http://whatsahead.com/closuremediatest/ (in the works)
The oddest part is it is not even consistent on where it lands on that section. What could be causing this?
CSS I edited:
`.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
overflow-x: visible;
margin-left: 155px !important;
padding-right: 15px;
padding-left: 15px;
background: #000;
margin-bottom: 30px !important;
margin-left: 195px !important;
margin-top: 50px;
max-height: 65px;
}
#navigation .navbar-nav {
float: left;
}
#navigation .navbar-nav > li > a {
font-family: "aleolight";
font-size: 20px;
font-weight: normal;
padding-bottom: 30px;
padding-top: 20px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: none !important;
color: #b4d333 !important;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: none;
color: #b4d333 !important;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent !important;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > li > a:before {
background-color: transparent;
background-image: url("http://whatsahead.com/closuremediatest/wp-content/uploads/2015/01/arrow-down.png");
background-position: 40% 40%;
background-repeat: no-repeat;
content: "";
display: block;
height: 11px;
left: 0px;
position: absolute;
margin-top: 8px;
width: 18px;
}
#masthead.sticky #navigation .navbar-nav > li > a {
padding: 17px 25px;
}`
Javacript scrollto:
;(function (define) {
'use strict';
define(['jquery'], function ($) {
var $scrollTo = $.scrollTo = function( target, duration, settings ) {
return $(window).scrollTo( target, duration, settings );
};
$scrollTo.defaults = {
axis:'xy',
duration: 0,
limit:true
};
// Returns the element that needs to be animated to scroll the window.
// Kept for backwards compatibility (specially for localScroll & serialScroll)
$scrollTo.window = function( scope ) {
return $(window)._scrollable();
};
// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function() {
return this.map(function() {
var elem = this,
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(),
['iframe','#document','html','body'] ) != -1;
if (!isWin)
return elem;
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
$.fn.scrollTo = function( target, duration, settings ) {
if (typeof duration == 'object') {
settings = duration;
duration = 0;
}
if (typeof settings == 'function')
settings = { onAfter:settings };
if (target == 'max')
target = 9e9;
settings = $.extend( {}, $scrollTo.defaults, settings );
// Speed is still recognized for backwards compatibility
duration = duration || settings.duration;
// Make sure the settings are given right
settings.queue = settings.queue && settings.axis.length > 1;
if (settings.queue)
// Let's keep the overall duration
duration /= 2;
settings.offset = both( settings.offset );
settings.over = both( settings.over );
return this._scrollable().each(function() {
// Null target yields nothing, just like jQuery does
if (target == null) return;
var elem = this,
$elem = $(elem),
targ = target, toff, attr = {},
win = $elem.is('html,body');
switch (typeof targ) {
// A number will pass the regex
case 'number':
case 'string':
if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
targ = both( targ );
// We are done
break;
}
// Relative/Absolute selector, no break!
targ = win ? $(targ) : $(targ, this);
if (!targ.length) return;
case 'object':
// DOMElement / jQuery
if (targ.is || targ.style)
// Get the real position of the target
toff = (targ = $(targ)).offset();
}
var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) ||
settings.offset;
$.each( settings.axis.split(''), function( i, axis ) {
var Pos = axis == 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
old = elem[key],
max = $scrollTo.max(elem, axis);
if (toff) {// jQuery / DOMElement
attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
// If it's a dom element, reduce the margin
if (settings.margin) {
attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
}
attr[key] += offset[pos] || 0;
if(settings.over[pos])
// Scroll to a fraction of its width/height
attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
} else {
var val = targ[pos];
// Handle percentage values
attr[key] = val.slice && val.slice(-1) == '%' ?
parseFloat(val) / 100 * max
: val;
}
// Number or 'number'
if (settings.limit && /^\d+$/.test(attr[key]))
// Check the limits
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
// Queueing axes
if (!i && settings.queue) {
// Don't waste time animating, if there's no need.
if (old != attr[key])
// Intermediate animation
animate( settings.onAfterFirst );
// Don't animate this axis again in the next iteration.
delete attr[key];
}
});
animate( settings.onAfter );
function animate( callback ) {
$elem.animate( attr, duration, settings.easing, callback && function() {
callback.call(this, targ, settings);
});
}
}).end();
};
// Max scrolling position, works on quirks mode
// It only fails (not too badly) on IE, quirks mode.
$scrollTo.max = function( elem, axis ) {
var Dim = axis == 'x' ? 'Width' : 'Height',
scroll = 'scroll'+Dim;
if (!$(elem).is('html,body'))
return elem[scroll] - $(elem)[Dim.toLowerCase()]();
var size = 'client' + Dim,
html = elem.ownerDocument.documentElement,
body = elem.ownerDocument.body;
return Math.max( html[scroll], body[scroll] ) - Math.min( html[size] , body[size] );
};
function both( val ) {
return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
}
// AMD requirement
return $scrollTo;
})
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
if (typeof module !== 'undefined' && module.exports) {
// Node
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}));
Javascript smoothscroll:
function ssc_init() {
if (!document.body) return;
var e = document.body;
var t = document.documentElement;
var n = window.innerHeight;
var r = e.scrollHeight;
ssc_root = document.compatMode.indexOf("CSS") >= 0 ? t : e;
ssc_activeElement = e;
ssc_initdone = true;
if (top != self) {
ssc_frame = true
} else if (r > n && (e.offsetHeight <= n || t.offsetHeight <= n)) {
ssc_root.style.height = "auto";
if (ssc_root.offsetHeight <= n) {
var i = document.createElement("div");
i.style.clear = "both";
e.appendChild(i)
}
}
if (!ssc_fixedback) {
e.style.backgroundAttachment = "scroll";
t.style.backgroundAttachment = "scroll"
}
if (ssc_keyboardsupport) {
ssc_addEvent("keydown", ssc_keydown)
}
}
function ssc_scrollArray(e, t, n, r) {
r || (r = 1e3);
ssc_directionCheck(t, n);
ssc_que.push({
x: t,
y: n,
lastX: t < 0 ? .99 : -.99,
lastY: n < 0 ? .99 : -.99,
start: +(new Date)
});
if (ssc_pending) {
return
}
var i = function() {
var s = +(new Date);
var o = 0;
var u = 0;
for (var a = 0; a < ssc_que.length; a++) {
var f = ssc_que[a];
var l = s - f.start;
var c = l >= ssc_animtime;
var h = c ? 1 : l / ssc_animtime;
if (ssc_pulseAlgorithm) {
h = ssc_pulse(h)
}
var p = f.x * h - f.lastX >> 0;
var d = f.y * h - f.lastY >> 0;
o += p;
u += d;
f.lastX += p;
f.lastY += d;
if (c) {
ssc_que.splice(a, 1);
a--
}
}
if (t) {
var v = e.scrollLeft;
e.scrollLeft += o;
if (o && e.scrollLeft === v) {
t = 0
}
}
if (n) {
var m = e.scrollTop;
e.scrollTop += u;
if (u && e.scrollTop === m) {
n = 0
}
}
if (!t && !n) {
ssc_que = []
}
if (ssc_que.length) {
setTimeout(i, r / ssc_framerate + 1)
} else {
ssc_pending = false
}
};
setTimeout(i, 0);
ssc_pending = true
}
function ssc_wheel(e) {
if (!ssc_initdone) {
ssc_init()
}
var t = e.target;
var n = ssc_overflowingAncestor(t);
if (!n || e.defaultPrevented || ssc_isNodeName(ssc_activeElement, "embed") || ssc_isNodeName(t, "embed") && /\.pdf/i.test(t.src)) {
return true
}
var r = e.wheelDeltaX || 0;
var i = e.wheelDeltaY || 0;
if (!r && !i) {
i = e.wheelDelta || 0
}
if (Math.abs(r) > 1.2) {
r *= ssc_stepsize / 120
}
if (Math.abs(i) > 1.2) {
i *= ssc_stepsize / 120
}
ssc_scrollArray(n, -r, -i);
e.preventDefault()
}
function ssc_keydown(e) {
var t = e.target;
var n = e.ctrlKey || e.altKey || e.metaKey;
if (/input|textarea|embed/i.test(t.nodeName) || t.isContentEditable || e.defaultPrevented || n) {
return true
}
if (ssc_isNodeName(t, "button") && e.keyCode === ssc_key.spacebar) {
return true
}
var r, i = 0,
s = 0;
var o = ssc_overflowingAncestor(ssc_activeElement);
var u = o.clientHeight;
if (o == document.body) {
u = window.innerHeight
}
switch (e.keyCode) {
case ssc_key.up:
s = -ssc_arrowscroll;
break;
case ssc_key.down:
s = ssc_arrowscroll;
break;
case ssc_key.spacebar:
r = e.shiftKey ? 1 : -1;
s = -r * u * .9;
break;
case ssc_key.pageup:
s = -u * .9;
break;
case ssc_key.pagedown:
s = u * .9;
break;
case ssc_key.home:
s = -o.scrollTop;
break;
case ssc_key.end:
var a = o.scrollHeight - o.scrollTop - u;
s = a > 0 ? a + 10 : 0;
break;
case ssc_key.left:
i = -ssc_arrowscroll;
break;
case ssc_key.right:
i = ssc_arrowscroll;
break;
default:
return true
}
ssc_scrollArray(o, i, s);
e.preventDefault()
}
function ssc_mousedown(e) {
ssc_activeElement = e.target
}
function ssc_setCache(e, t) {
for (var n = e.length; n--;) ssc_cache[ssc_uniqueID(e[n])] = t;
return t
}
function ssc_overflowingAncestor(e) {
var t = [];
var n = ssc_root.scrollHeight;
do {
var r = ssc_cache[ssc_uniqueID(e)];
if (r) {
return ssc_setCache(t, r)
}
t.push(e);
if (n === e.scrollHeight) {
if (!ssc_frame || ssc_root.clientHeight + 10 < n) {
return ssc_setCache(t, document.body)
}
} else if (e.clientHeight + 10 < e.scrollHeight) {
overflow = getComputedStyle(e, "").getPropertyValue("overflow");
if (overflow === "scroll" || overflow === "auto") {
return ssc_setCache(t, e)
}
}
} while (e = e.parentNode)
}
function ssc_addEvent(e, t, n) {
window.addEventListener(e, t, n || false)
}
function ssc_removeEvent(e, t, n) {
window.removeEventListener(e, t, n || false)
}
function ssc_isNodeName(e, t) {
return e.nodeName.toLowerCase() === t.toLowerCase()
}
function ssc_directionCheck(e, t) {
e = e > 0 ? 1 : -1;
t = t > 0 ? 1 : -1;
if (ssc_direction.x !== e || ssc_direction.y !== t) {
ssc_direction.x = e;
ssc_direction.y = t;
ssc_que = []
}
}
function ssc_pulse_(e) {
var t, n, r;
e = e * ssc_pulseScale;
if (e < 1) {
t = e - (1 - Math.exp(-e))
} else {
n = Math.exp(-1);
e -= 1;
r = 1 - Math.exp(-e);
t = n + r * (1 - n)
}
return t * ssc_pulseNormalize
}
function ssc_pulse(e) {
if (e >= 1) return 1;
if (e <= 0) return 0;
if (ssc_pulseNormalize == 1) {
ssc_pulseNormalize /= ssc_pulse_(1)
}
return ssc_pulse_(e)
}
var ssc_framerate = 150;
var ssc_animtime = 500;
var ssc_stepsize = 150;
var ssc_pulseAlgorithm = true;
var ssc_pulseScale = 6;
var ssc_pulseNormalize = 1;
var ssc_keyboardsupport = true;
var ssc_arrowscroll = 50;
var ssc_frame = false;
var ssc_direction = {
x: 0,
y: 0
};
var ssc_initdone = false;
var ssc_fixedback = true;
var ssc_root = document.documentElement;
var ssc_activeElement;
var ssc_key = {
left: 37,
up: 38,
right: 39,
down: 40,
spacebar: 32,
pageup: 33,
pagedown: 34,
end: 35,
home: 36
};
var ssc_que = [];
var ssc_pending = false;
var ssc_cache = {};
setInterval(function() {
ssc_cache = {}
}, 10 * 1e3);
var ssc_uniqueID = function() {
var e = 0;
return function(t) {
return t.ssc_uniqueID || (t.ssc_uniqueID = e++)
}
}();
var ischrome = /chrome/.test(navigator.userAgent.toLowerCase());
if (ischrome) {
ssc_addEvent("mousedown", ssc_mousedown);
ssc_addEvent("mousewheel", ssc_wheel);
ssc_addEvent("load", ssc_init)
}

It's not a Javascript problem but a CSS issue.
First of all you logo img is too big. it's pushing the navbar down and mismatching the calculation. Let's fix it:
.navbar-brand img {
max-height: 110px;
}
Then we must add a margin to the top of the page content.
.title-area, .page-content {
margin-top: 40px;
}
Add it in your custom.csss and it will solve your problem

I solved the problem by editing javascript file. It was removing the "sticky" class when scrolled to the far top which voided some of my css edits I wanted to stay with. Therefore, by editing the javascript so that the document was always "sticky" I was able to make the header larger as I desired.

jQuery background slideshow

I'm trying to create a background slideshow with fade effect, I've found this script which does this beautifully: http://srobbin.com/jquery-plugins/backstretch/
The problem that I encounter is that it re-sizes the image, which I would like to disable / remove.
This is the code:
/*! Backstretch - v2.0.3 - 2012-11-30
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2012 Scott Robbin; Licensed MIT */ (function (e, t, n) {
"use strict";
e.fn.backstretch = function (r, s) {
return (r === n || r.length === 0) && e.error("No images were supplied for Backstretch"), e(t).scrollTop() === 0 && t.scrollTo(0, 0), this.each(function () {
var t = e(this),
n = t.data("backstretch");
n && (s = e.extend(n.options, s), n.destroy(!0)), n = new i(this, r, s), t.data("backstretch", n)
})
}, e.backstretch = function (t, n) {
return e("body").backstretch(t, n).data("backstretch")
}, e.expr[":"].backstretch = function (t) {
return e(t).data("backstretch") !== n
}, e.fn.backstretch.defaults = {
centeredX: !0,
centeredY: !0,
duration: 5e3,
fade: 0
};
var r = {
wrap: {
left: 0,
top: 0,
overflow: "hidden",
margin: 0,
padding: 0,
height: "100%",
width: "100%",
zIndex: -999999
},
img: {
position: "absolute",
display: "none",
margin: 0,
padding: 0,
border: "none",
width: "auto",
height: "auto",
maxWidth: "none",
zIndex: -999999
}
}, i = function (n, i, o) {
this.options = e.extend({}, e.fn.backstretch.defaults, o || {}), this.images = e.isArray(i) ? i : [i], e.each(this.images, function () {
e("<img />")[0].src = this
}), this.isBody = n === document.body, this.$container = e(n), this.$wrap = e('<div class="backstretch"></div>').css(r.wrap).appendTo(this.$container), this.$root = this.isBody ? s ? e(t) : e(document) : this.$container;
if (!this.isBody) {
var u = this.$container.css("position"),
a = this.$container.css("zIndex");
this.$container.css({
position: u === "static" ? "relative" : u,
zIndex: a === "auto" ? 0 : a,
background: "none"
}), this.$wrap.css({
zIndex: -999998
})
}
this.$wrap.css({
position: this.isBody && s ? "fixed" : "absolute"
}), this.index = 0, this.show(this.index), e(t).on("resize.backstretch", e.proxy(this.resize, this)).on("orientationchange.backstretch", e.proxy(function () {
this.isBody && t.pageYOffset === 0 && (t.scrollTo(0, 1), this.resize())
}, this))
};
i.prototype = {
resize: function () {
try {
var e = {
left: 0,
top: 0
}, n = this.isBody ? this.$root.width() : this.$root.innerWidth(),
r = n,
i = this.isBody ? t.innerHeight ? t.innerHeight : this.$root.height() : this.$root.innerHeight(),
s = r / this.$img.data("ratio"),
o;
s >= i ? (o = (s - i) / 2, this.options.centeredY && (e.top = "-" + o + "px")) : (s = i, r = s * this.$img.data("ratio"), o = (r - n) / 2, this.options.centeredX && (e.left = "-" + o + "px")), this.$wrap.css({
width: n,
height: i
}).find("img:not(.deleteable)").css({
width: r,
height: s
}).css(e)
} catch (u) {}
return this
},
show: function (t) {
if (Math.abs(t) > this.images.length - 1) return;
this.index = t;
var n = this,
i = n.$wrap.find("img").addClass("deleteable"),
s = e.Event("backstretch.show", {
relatedTarget: n.$container[0]
});
return clearInterval(n.interval), n.$img = e("<img />").css(r.img).bind("load", function (t) {
var r = this.width || e(t.target).width(),
o = this.height || e(t.target).height();
e(this).data("ratio", r / o), e(this).fadeIn(n.options.speed || n.options.fade, function () {
i.remove(), n.paused || n.cycle(), n.$container.trigger(s, n)
}), n.resize()
}).appendTo(n.$wrap), n.$img.attr("src", n.images[t]), n
},
next: function () {
return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0)
},
prev: function () {
return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1)
},
pause: function () {
return this.paused = !0, this
},
resume: function () {
return this.paused = !1, this.next(), this
},
cycle: function () {
return this.images.length > 1 && (clearInterval(this.interval), this.interval = setInterval(e.proxy(function () {
this.paused || this.next()
}, this), this.options.duration)), this
},
destroy: function (n) {
e(t).off("resize.backstretch orientationchange.backstretch"), clearInterval(this.interval), n || this.$wrap.remove(), this.$container.removeData("backstretch")
}
};
var s = function () {
var e = navigator.userAgent,
n = navigator.platform,
r = e.match(/AppleWebKit\/([0-9]+)/),
i = !! r && r[1],
s = e.match(/Fennec\/([0-9]+)/),
o = !! s && s[1],
u = e.match(/Opera Mobi\/([0-9]+)/),
a = !! u && u[1],
f = e.match(/MSIE ([0-9]+)/),
l = !! f && f[1];
return !((n.indexOf("iPhone") > -1 || n.indexOf("iPad") > -1 || n.indexOf("iPod") > -1) && i && i < 534 || t.operamini && {}.toString.call(t.operamini) === "[object OperaMini]" || u && a < 7458 || e.indexOf("Android") > -1 && i && i < 533 || o && o < 6 || "palmGetResource" in t && i && i < 534 || e.indexOf("MeeGo") > -1 && e.indexOf("NokiaBrowser/8.5.0") > -1 || l && l <= 6)
}()
})(jQuery, window);
I randomly tried renaming "resize" but that didn't work out too well.

I tried hardly to understand your question but I'm still not sure if I understood your question correctly, anyway my solution if you are looking to keep all the images in the same size always for every image is adding min width and min-height values to the css style of the image, if the style of the image is "img: { }" so:
img: {
position: "absolute",
display: "none",
margin: 0,
padding: 0,
border: "none",
width: "value",
height: "value",
min-width: "same value",
min-height: "same value",
maxWidth: "none",
zIndex: -999999
}
Not sure but that's the solution for what I understood.

Placing jquery navigation buttons over slider

Thanks man,
It took me a while but here's the code. I hope this works. I've never used this forum before.
My Code:
<html>
<div class="container">
<div id="slides">
<img src="_images/aqw.png" data-title="ALLIANCE QUARTETT WIEN: ">
<img src="_images/aqw2.jpg">
<img src="_images/eme.png">
<img src="_images/eme2.jpg">
<img src="_images/zen.png">
<img src="_images/zen2.png">
<img src="_images/cts.png">
<img src="_images/cts2.jpg">
<img src="_images/ag2.png">
<img src="_images/ag.jpg">
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 1000,
height: 650,
play: {
active: true,
auto: true,
interval: 5000,
swap: true
}
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>
CSS
#slides {
display: none
}
#slides .slidesjs-navigation {
margin:10px 0 0 10px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image:url(_images/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
JS
(function () {
(function (a, b, c) {
var d, e, f;
return f = "slidesjs", e = {
width: 940,
height: 528,
start: 1,
navigation: {
active: !0,
effect: "slide"
},
pagination: {
active: !0,
effect: "slide"
},
play: {
active: !1,
effect: "slide",
interval: 5e3,
auto: !1,
swap: !0,
pauseOnHover: !1,
restartDelay: 2500
},
effect: {
slide: {
speed: 500
},
fade: {
speed: 300,
crossfade: !0
}
},
callback: {
loaded: function () {},
start: function () {},
complete: function () {}
}
}, d = function () {
function b(b, c) {
this.element = b, this.options = a.extend(!0, {}, e, c), this._defaults = e, this._name = f, this.init()
}
return b
}(), d.prototype.init = function () {
var c, d, e, f, g, h, i = this;
return c = a(this.element), this.data = a.data(this), a.data(this, "animating", !1), a.data(this, "total", c.children().not(".slidesjs-navigation", c).length), a.data(this, "current", this.options.start - 1), a.data(this, "vendorPrefix", this._getVendorPrefix()), "undefined" != typeof TouchEvent && (a.data(this, "touch", !0), this.options.effect.slide.speed = this.options.effect.slide.speed / 2), c.css({
overflow: "hidden"
}), c.slidesContainer = c.children().not(".slidesjs-navigation", c).wrapAll("<div class='slidesjs-container'>", c).parent().css({
overflow: "hidden",
position: "relative"
}), a(".slidesjs-container", c).wrapInner("<div class='slidesjs-control'>", c).children(), a(".slidesjs-control", c).css({
position: "relative",
left: 0
}), a(".slidesjs-control", c).children().addClass("slidesjs-slide").css({
position: "absolute",
top: 0,
left: 0,
width: "100%",
zIndex: 0,
display: "none",
webkitBackfaceVisibility: "hidden"
}), a.each(a(".slidesjs-control", c).children(), function (b) {
var c;
return c = a(this), c.attr("slidesjs-index", b)
}), this.data.touch && (a(".slidesjs-control", c).on("touchstart", function (a) {
return i._touchstart(a)
}), a(".slidesjs-control", c).on("touchmove", function (a) {
return i._touchmove(a)
}), a(".slidesjs-control", c).on("touchend", function (a) {
return i._touchend(a)
})), c.fadeIn(0), this.update(), this.data.touch && this._setuptouch(), a(".slidesjs-control", c).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function () {
return a(this).css({
zIndex: 10
})
}), this.options.navigation.active && (g = a("<a>", {
"class": "slidesjs-previous slidesjs-navigation",
href: "#",
title: "Previous",
text: "Previous"
}).appendTo(c), d = a("<a>", {
"class": "slidesjs-next slidesjs-navigation",
href: "#",
title: "Next",
text: "Next"
}).appendTo(c)), a(".slidesjs-next", c).click(function (a) {
return a.preventDefault(), i.stop(!0), i.next(i.options.navigation.effect)
}), a(".slidesjs-previous", c).click(function (a) {
return a.preventDefault(), i.stop(!0), i.previous(i.options.navigation.effect)
}), this.options.play.active && (f = a("<a>", {
"class": "slidesjs-play slidesjs-navigation",
href: "#",
title: "Play",
text: "Play"
}).appendTo(c), h = a("<a>", {
"class": "slidesjs-stop slidesjs-navigation",
href: "#",
title: "Stop",
text: "Stop"
}).appendTo(c), f.click(function (a) {
return a.preventDefault(), i.play(!0)
}), h.click(function (a) {
return a.preventDefault(), i.stop(!0)
}), this.options.play.swap && h.css({
display: "none"
})), this.options.pagination.active && (e = a("<ul>", {
"class": "slidesjs-pagination"
}).appendTo(c), a.each(Array(this.data.total), function (b) {
var c, d;
return c = a("<li>", {
"class": "slidesjs-pagination-item"
}).appendTo(e), d = a("<a>", {
href: "#",
"data-slidesjs-item": b,
html: b + 1
}).appendTo(c), d.click(function (b) {
return b.preventDefault(), i.stop(!0), i.goto(1 * a(b.currentTarget).attr("data-slidesjs-item") + 1)
})
})), a(b).bind("resize", function () {
return i.update()
}), this._setActive(), this.options.play.auto && this.play(), this.options.callback.loaded(this.options.start)
}, d.prototype._setActive = function (b) {
var c, d;
return c = a(this.element), this.data = a.data(this), d = b > -1 ? b : this.data.current, a(".active", c).removeClass("active"), a("li:eq(" + d + ") a", c).addClass("active")
}, d.prototype.update = function () {
var b, c, d;
return b = a(this.element), this.data = a.data(this), a(".slidesjs-control", b).children(":not(:eq(" + this.data.current + "))").css({
display: "none",
left: 0,
zIndex: 0
}), d = b.width(), c = this.options.height / this.options.width * d, this.options.width = d, this.options.height = c, a(".slidesjs-control, .slidesjs-container", b).css({
width: d,
height: c
})
}, d.prototype.next = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "next"), void 0 === b && (b = this.options.navigation.effect), "fade" === b ? this._fade() : this._slide()
}, d.prototype.previous = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), a.data(this, "direction", "previous"), void 0 === b && (b = this.options.navigation.effect), "fade" === b ? this._fade() : this._slide()
}, d.prototype.goto = function (b) {
var c, d;
if (c = a(this.element), this.data = a.data(this), void 0 === d && (d = this.options.pagination.effect), b > this.data.total ? b = this.data.total : 1 > b && (b = 1), "number" == typeof b) return "fade" === d ? this._fade(b) : this._slide(b);
if ("string" == typeof b) {
if ("first" === b) return "fade" === d ? this._fade(0) : this._slide(0);
if ("last" === b) return "fade" === d ? this._fade(this.data.total) : this._slide(this.data.total)
}
}, d.prototype._setuptouch = function () {
var b, c, d, e;
return b = a(this.element), this.data = a.data(this), e = a(".slidesjs-control", b), c = this.data.current + 1, d = this.data.current - 1, 0 > d && (d = this.data.total - 1), c > this.data.total - 1 && (c = 0), e.children(":eq(" + c + ")").css({
display: "block",
left: this.options.width
}), e.children(":eq(" + d + ")").css({
display: "block",
left: -this.options.width
})
}, d.prototype._touchstart = function (b) {
var c, d;
return c = a(this.element), this.data = a.data(this), d = b.originalEvent.touches[0], this._setuptouch(), a.data(this, "touchtimer", Number(new Date)), a.data(this, "touchstartx", d.pageX), a.data(this, "touchstarty", d.pageY), b.stopPropagation()
}, d.prototype._touchend = function (b) {
var c, d, e, f, g, h, i, j = this;
return c = a(this.element), this.data = a.data(this), h = b.originalEvent.touches[0], f = a(".slidesjs-control", c), f.position().left > .5 * this.options.width || f.position().left > .1 * this.options.width && 250 > Number(new Date) - this.data.touchtimer ? (a.data(this, "direction", "previous"), this._slide()) : f.position().left < -(.5 * this.options.width) || f.position().left < -(.1 * this.options.width) && 250 > Number(new Date) - this.data.touchtimer ? (a.data(this, "direction", "next"), this._slide()) : (e = this.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "translateX(0px)", f[0].style[d] = .85 * this.options.effect.slide.speed + "ms"), f.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
return e = j.data.vendorPrefix, i = e + "Transform", d = e + "TransitionDuration", g = e + "TransitionTimingFunction", f[0].style[i] = "", f[0].style[d] = "", f[0].style[g] = ""
}), b.stopPropagation()
}, d.prototype._touchmove = function (b) {
var c, d, e, f, g;
return c = a(this.element), this.data = a.data(this), f = b.originalEvent.touches[0], d = this.data.vendorPrefix, e = a(".slidesjs-control", c), g = d + "Transform", a.data(this, "scrolling", Math.abs(f.pageX - this.data.touchstartx) < Math.abs(f.pageY - this.data.touchstarty)), this.data.animating || this.data.scrolling || (b.preventDefault(), this._setuptouch(), e[0].style[g] = "translateX(" + (f.pageX - this.data.touchstartx) + "px)"), b.stopPropagation()
}, d.prototype.play = function (b) {
var c, d, e, f = this;
return c = a(this.element), this.data = a.data(this), !this.data.playInterval && (b && (d = this.data.current, this.data.direction = "next", "fade" === this.options.play.effect ? this._fade() : this._slide()), a.data(this, "playInterval", setInterval(function () {
return d = f.data.current, f.data.direction = "next", "fade" === f.options.play.effect ? f._fade() : f._slide()
}, this.options.play.interval)), e = a(".slidesjs-container", c), this.options.play.pauseOnHover && (e.unbind(), e.bind("mouseenter", function () {
return f.stop()
}), e.bind("mouseleave", function () {
return f.options.play.restartDelay ? a.data(f, "restartDelay", setTimeout(function () {
return f.play(!0)
}, f.options.play.restartDelay)) : f.play()
})), a.data(this, "playing", !0), a(".slidesjs-play", c).addClass("slidesjs-playing"), this.options.play.swap) ? (a(".slidesjs-play", c).hide(), a(".slidesjs-stop", c).show()) : void 0
}, d.prototype.stop = function (b) {
var c;
return c = a(this.element), this.data = a.data(this), clearInterval(this.data.playInterval), this.options.play.pauseOnHover && b && a(".slidesjs-container", c).unbind(), a.data(this, "playInterval", null), a.data(this, "playing", !1), a(".slidesjs-play", c).removeClass("slidesjs-playing"), this.options.play.swap ? (a(".slidesjs-stop", c).hide(), a(".slidesjs-play", c).show()) : void 0
}, d.prototype._slide = function (b) {
var c, d, e, f, g, h, i, j, k, l, m = this;
return c = a(this.element), this.data = a.data(this), this.data.animating || b === this.data.current + 1 ? void 0 : (a.data(this, "animating", !0), d = this.data.current, b > -1 ? (b -= 1, l = b > d ? 1 : -1, e = b > d ? -this.options.width : this.options.width, g = b) : (l = "next" === this.data.direction ? 1 : -1, e = "next" === this.data.direction ? -this.options.width : this.options.width, g = d + l), -1 === g && (g = this.data.total - 1), g === this.data.total && (g = 0), this._setActive(g), i = a(".slidesjs-control", c), b > -1 && i.children(":not(:eq(" + d + "))").css({
display: "none",
left: 0,
zIndex: 0
}), i.children(":eq(" + g + ")").css({
display: "block",
left: l * this.options.width,
zIndex: 10
}), this.options.callback.start(d + 1), this.data.vendorPrefix ? (h = this.data.vendorPrefix, k = h + "Transform", f = h + "TransitionDuration", j = h + "TransitionTimingFunction", i[0].style[k] = "translateX(" + e + "px)", i[0].style[f] = this.options.effect.slide.speed + "ms", i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
return i[0].style[k] = "", i[0].style[f] = "", i.children(":eq(" + g + ")").css({
left: 0
}), i.children(":eq(" + d + ")").css({
display: "none",
left: 0,
zIndex: 0
}), a.data(m, "current", g), a.data(m, "animating", !1), i.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd"), i.children(":not(:eq(" + g + "))").css({
display: "none",
left: 0,
zIndex: 0
}), m.data.touch && m._setuptouch(), m.options.callback.complete(g + 1)
})) : i.stop().animate({
left: e
}, this.options.effect.slide.speed, function () {
return i.css({
left: 0
}), i.children(":eq(" + g + ")").css({
left: 0
}), i.children(":eq(" + d + ")").css({
display: "none",
left: 0,
zIndex: 0
}, a.data(m, "current", g), a.data(m, "animating", !1), m.options.callback.complete(g + 1))
}))
}, d.prototype._fade = function (b) {
var c, d, e, f, g, h = this;
return c = a(this.element), this.data = a.data(this), this.data.animating || b === this.data.current + 1 ? void 0 : (a.data(this, "animating", !0), d = this.data.current, b ? (b -= 1, g = b > d ? 1 : -1, e = b) : (g = "next" === this.data.direction ? 1 : -1, e = d + g), -1 === e && (e = this.data.total - 1), e === this.data.total && (e = 0), this._setActive(e), f = a(".slidesjs-control", c), f.children(":eq(" + e + ")").css({
display: "none",
left: 0,
zIndex: 10
}), this.options.callback.start(d + 1), this.options.effect.fade.crossfade ? (f.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed), f.children(":eq(" + e + ")").stop().fadeIn(this.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").css({
zIndex: 0
}), a.data(h, "animating", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)
})) : f.children(":eq(" + d + ")").stop().fadeOut(this.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").stop().fadeIn(h.options.effect.fade.speed, function () {
return f.children(":eq(" + e + ")").css({
zIndex: 10
})
}), a.data(h, "animating", !1), a.data(h, "current", e), h.options.callback.complete(e + 1)
}))
}, d.prototype._getVendorPrefix = function () {
var a, b, d, e, f;
for (a = c.body || c.documentElement, d = a.style, e = "transition", f = ["Moz", "Webkit", "Khtml", "O", "ms"], e = e.charAt(0).toUpperCase() + e.substr(1), b = 0; f.length > b;) {
if ("string" == typeof d[f[b] + e]) return f[b];
b++
}
return !1
}, a.fn[f] = function (b) {
return this.each(function () {
return a.data(this, "plugin_" + f) ? void 0 : a.data(this, "plugin_" + f, new d(this, b))
})
}
})(jQuery, window, document)
}).call(this);
I'm new to web and clueless using javascript. I'm trying to place a the navigation buttons (next, previous and play/pause) of the link below over the image but I can't figure it out!! I would really appreciate if someone could help? Also, is there a way on that same code of making it scale as the width and height change?
http://www.slidesjs.com/examples/standard/
Thanks very much!

Add this to your Stylesheet
#slides .slidesjs-previous {
position: absolute;
top: 45%;
left: 10%;
z-index:999;
}
#slides .slidesjs-next{
position: absolute;
top: 45%;
right: 10%;
z-index:999;
}

Bring some changes in the next previous css classes according to your requirement. That is: z index margin-top/top.

We Keep Coding

JavaScript is the programming language of the Web.

Mouseleave delay - javascript

Related

how to change header color with midnight.js

Infinitely rolling text with CSS

One-page scroll problems

jQuery background slideshow

Placing jquery navigation buttons over slider

Categories

Resources