Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jquery.pleasestay.js
1. Download
2. Online Store -> Themes -> Edit Code
3. Assets -> Add a new asset -> Upload: jquery.pleasestay.js
4. Sửa Layout -> theme.liquid -> Thêm vào trước </body>:
{{ 'jquery.pleasestay.js' | asset_url | script_tag }}
<script>
$(function () {
$.pleaseStay({
messages: ["We miss you...", "Come back to us!"],
favicon: "https://cdn.jsdelivr.net/emojione/assets/png/1f622.png",
speed: 1,
delay: 3
});
});
</script>
/*!
* jQuery Please Stay Plugin
* (c) SonNM
*/
;(function ($) {
$.pleaseStay = function (options) {
var opts = $.extend({}, $.pleaseStay.defaults, options),
timer = null,
animationTimer = null,
messageIndex = 0,
originalTitle = document.title,
favicon = $('head').find('link[rel$="icon"]'),
originalFavicon = favicon.attr("href");
if (opts.messages.length > 0) {
_start();
}
if (opts.favicon !== undefined) {
_preload();
}
function _start() {
timer = null;
$(document).bind("visibilitychange", function () {
if ($(document).prop('hidden')) _blur();
else _focus();
});
}
function _blinking() {
document.title = opts.messages[messageIndex];
if (messageIndex < opts.messages.length - 1) messageIndex++;
else messageIndex = 0;
animationTimer = setTimeout(function () {
_blinking();
}, opts.speed * 1000);
}
function _blur() {
messageIndex = 0;
timer = setTimeout(function () {
_blinking();
favicon.attr("href", opts.favicon);
clearInterval(timer);
}, opts.delay * 1000);
}
function _focus() {
document.title = originalTitle;
favicon.attr("href", originalFavicon);
clearInterval(timer);
clearInterval(animationTimer);
}
function _preload() {
$('<img/>')[0].src = opts.favicon;
}
};
$.pleaseStay.defaults = {
messages: [document.title],
speed: 1,
delay: 3
};
})(jQuery);
@princefishthrower
Copy link

princefishthrower commented Apr 4, 2021

This is used on Mikkeller's website, very cool :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment