Mangaupdates Cover Preview

Previews covers in mangaupdates.com when hovering over hyperlinks that lead to manga pages.

< Feedback on Mangaupdates Cover Preview

Review: Good - script works

Good at what it does. A bit too good...

The script works flawlessly as advertised, even after all this time. However, it is a bit too effective at what it does. If you hover over any link to a novel page, it will immediately try to load the image.
This is the advertised behaviour, yes. Problem is, pages like the reading list is packed full of links of this sort. Even if you don't want to, you will have to hover over a few of them in order to keep your list updated, which can have some minor but still annoying consecuences, IE. trying to update the state of a series only for it to fail since a cover spawned over it.

My suggestion? Add a small delay of at least a second before trying to load the cover. I don't know how to edit the script to do so, but the default settings are instantaneous.

Kuro_scriptsAuthor
§
Posted: 2017-04-02

Hi! Apologies for the late reply. I didn't get a notification about this post. >.<

I am aware of the issue of covers sometimes not hiding if you hover onto another one too quickly, but I still have no idea what causes this, to be honest.

I tried to get an optional delay functionality working but unfortunately I was not able to get it to work. If I ever do, I'll send out an update with it. o/

sz
§
Posted: 2020-12-11

Since i made a cover preview for novelupdates(and later a derivate for mangaupdates) after i looked at this script i know why it happens.
$('#popover').append('');
and
$('#popover img').load
are still getting called after moving away from a link. since the ajax call and the image loading are finishing at a later time even after leaving the link.
The easiest solution would be to have a state variable to mark if and which link is currently hovered and only continue inside the ajax/onLoad function if currentHoveredLink is still the same Href as the current mouseover call

Something like
var currentHoveredLink;
$('.col-6 a').mouseover(function () {
var Href = $(this).attr('href');
currentHoveredLink = Href;
...
if(currentHoveredLink != undefined && currentHoveredLink == Href){
rest of onLoad function
}


and to release
$('.col-6 a, a').mouseleave(function () {
currentHoveredLink = undefined;

Following a not perfect but mostly working minimal changed codebase:
// ==UserScript==
// @name Mangaupdates Cover Preview
// @namespace https://twitter.com/Kuroonehalf
// @include https://www.mangaupdates.com/*
// @include http://www.mangaupdates.com/*
// @version 2.0.1
// @description Previews covers in mangaupdates.com when hovering over hyperlinks that lead to manga pages.
// @grant GM_setValue
// @grant GM_getValue
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @license http://creativecommons.org/licenses/by-nc-sa/4.0/
// ==/UserScript==
// Link title suppression
$('[title]').each( function() {
var $this = $(this);
$this.data('title',$this.attr('title'));
$this.removeAttr('title');
});
// Centering function
var pathname = document.URL;
var MangaPageTest = /series\.html\?id\=[0-9]*$/;
var currentHoveredLink;
jQuery.fn.center = function () {
this.css('top', Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + 'px');
if (pathname.search(MangaPageTest) != -1){
this.css('left', Math.max(0, (($(window).width() - $(this).outerWidth()) * 0.4) + $(window).scrollLeft()) + 'px');
}
else {
this.css('left', Math.max(0, (($(window).width() - $(this).outerWidth()) * 0.6) + $(window).scrollLeft()) + 'px');
}
return this;
}

$('body').append('

');
$('#popover').css('position', 'absolute');
$('#popover').css('z-index', '10');
$('#popover').css('box-shadow', '0px 0px 5px #7A7A7A');

$('a').mouseover(function () {
var Href = $(this).attr('href');
console.log(Href);

if (Href.search(MangaPageTest) != - 1) {
currentHoveredLink = Href;
console.log("This is a manga page");
$(this).css('font-weight', 'bold'); // Bolds previously hovered links.
if (GM_getValue(Href)) {
var retrievedLink = GM_getValue(Href);
$('#popover').empty();
if(currentHoveredLink != undefined && currentHoveredLink == Href)
{
$('#popover').append('');
$('#popover img').load(function() {
if(currentHoveredLink != undefined && currentHoveredLink == Href)
$('#popover').center();
else $('#popover').empty();
});
console.log(Href + " has been found and retrieved from the cache."); // for testing purposes
}

}
else {
$.ajax({
url: Href,
dataType: 'text',
success: function (data) {
var imagelink = $('

').html(data)[0].getElementsByClassName('sContent')[13].getElementsByTagName('img') [0].src;
// clear what's inside #popover and put the new image in there
$('#popover').empty();
if(imagelink && currentHoveredLink != undefined && currentHoveredLink == Href)
{
$('#popover').append('');
$('#popover img').load(function () {
if(currentHoveredLink != undefined && currentHoveredLink == Href)
$('#popover').center();
});
}
GM_setValue(Href, imagelink);
console.log(imagelink + ') successfully cached.') // for testing purposes
}
});
}
}
});
$('a').mouseleave(function () {
$('#popover').empty();
currentHoveredLink = undefined;
});

Post reply

Sign in to post a reply.