I've been working on a hover-preview Tampermonkey script. It's always bugged me that r3v doesn't even have title attribute tooltips.
You can has. Just install Tampermonkey and paste it in.
Version 0.2 - 3/2/13 - Features added:
You can has. Just install Tampermonkey and paste it in.
Version 0.2 - 3/2/13 - Features added:
- Smart hover placement
- Image scaling
- Ability to flip through current page of posts (N and P keys)
- "Last post" view (hover over the arrow image)
Code:
// ==UserScript==
// @name r3vlimited hover tips
// @namespace http://www.r3vlimited.com/
// @version 0.2
// @description does neat things
// @match http://www.r3vlimited.com/board/*
// @copyright 2013+, Fourbanger
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==
var scaleFactor = .75;
var delay = 375;
$(document).ready(function(){
var html = '\
<div id="hoverBoundary">\
<div id="hoverContainer">\
</div>\
<div>';
var styles = '<style>\
#hoverBoundary {\
-webkit-touch-callout: none;\
-webkit-user-select: none;\
user-select: none;\
pointer-events: none;\
position: fixed;\
top: 0;\
left: 0;\
height: auto;\
width: 50%;\
border-radius: 25px;\
display: none;\
z-index: 999;\
/*border: 1px solid red;*/\
}\
#hoverContainer{\
width: '+ ((1/scaleFactor)*100) +'%;\
-webkit-transform: scale(' + scaleFactor + ');\
-webkit-transform-origin: 0 0 0;\
}\
#hoverContainer table {\
table-layout: fixed;\
overflow: hidden;\
}\
#hoverContainer table td:first-of-type{\
width: 20%;\
overflow: hidden;\
}\
#hoverContainer .bigusername {\
font-size: 115%;\
}\
#hoverContainer .page > div,\
#hoverContainer .page > div > div {\
padding: 0 !important;\
}\
#hoverContainer .page img {\
max-width: 100%;\
}\
</style>';
$('body').append(html);
$('head').append(styles);
var hoverBoundary = $('#hoverBoundary');
var hoverContainer = $('#hoverContainer');
$(document).mousemove(function(event){
mouseX = event.pageX;
mouseY = event.pageY;
if ($(hoverBoundary).is(':visible')) {
positionHover();
}
});
$(document).on('keyup', function(event){
if ($(hoverBoundary).is(':visible')) {
event.preventDefault();
switch (event.which) {
case 78:
if ($(hoverContainer).find('> div:visible').next().length > 0 && !$(hoverContainer).find('div').is(':animated')) {
$(hoverContainer).find('> div:visible').next().slideDown();
$(hoverContainer).find('> div:visible:first').slideUp();
}
break;
case 80:
if ($(hoverContainer).find('> div:visible').prev().length > 0 && !$(hoverContainer).find('div').is(':animated')) {
$(hoverContainer).find('> div:visible').prev().slideDown();
$(hoverContainer).find('> div:visible:last').slideUp();
}
break;
}
}
});
function positionHover(){
var scrollPos = $('body').scrollTop();
if ((mouseY - scrollPos) + ($(hoverBoundary).height() * scaleFactor) > $(window).height()) {
var top = $(window).height() - ($(hoverBoundary).height() * scaleFactor);
if (top < 0) var top = 0;
}
else {
var percentY = (mouseY - scrollPos) / $(window).height();
var offsetY = percentY * $(hoverBoundary).height() * scaleFactor;
var top = Math.round((mouseY - scrollPos) - offsetY);
}
var percentX = mouseX / $(window).width();
var offsetX = percentX * $(hoverBoundary).width();
var left = Math.round(mouseX - offsetX);
$(hoverBoundary).css({'top':top, 'left':left});
}
var hoverDelay = null;
var request;
$('a[href*="showthread.php"]').not('[href*="page="]').hover(function(){
var context = $(this);
hoverDelay = setTimeout(function(){
var href = $(context).attr('href');
var last = false;
if (href.indexOf('#post') !== -1 || href.indexOf('goto=newpost') !== -1) var last = true;
/*var post = href.match(/\#(.*)/)[1];*/
request = $.ajax({
type: "GET",
url: href,
dataType: 'html',
success: function(data){
$(hoverContainer).empty();
var scripts = '<script>function vbmenu_register(){return null;}</script>'
var content = scripts + $(data).filter('#posts').html().replace('<div id="lastpost"></div>', '');
$(hoverContainer).html(content);
if (!last) $(hoverContainer).find('> div:not(:first-of-type)').hide();
else $(hoverContainer).find('> div:not(:last-of-type)').hide();
$(hoverBoundary).show().promise().done(function(){
positionHover();
});
$(hoverContainer).find('img').load(function(){positionHover();});
}
});
}, delay);
}, function(){
if (request) request.abort();
clearTimeout(hoverDelay);
$(hoverBoundary).hide();
});
});
Comment