Difference between revisions of "User:Stewart/vector.js"
m (fix a small glitch with offsetParent not returning the correct value while the tooltip was hidden) |
|||
Line 2: | Line 2: | ||
var ttCache = new Object(); | var ttCache = new Object(); | ||
var urlPrefix = wgArticlePath.replace("$1",""); | var urlPrefix = wgArticlePath.replace("$1",""); | ||
− | |||
var ttOffset = 10; | var ttOffset = 10; | ||
− | |||
var mouseX = 0; | var mouseX = 0; | ||
var mouseY = 0; | var mouseY = 0; | ||
var currentTooltip = ""; | var currentTooltip = ""; | ||
+ | var container = $("<div id='tooltip-container' style='position:absolute;z-index:999999;height:auto !important;max-width: 300px;color:white;text-align: center; background: #24201B; -moz-border-radius: 10px; border-radius: 10px; padding:7px 0px;'></div>"); | ||
$("#bodyContent").append(container); | $("#bodyContent").append(container); | ||
+ | var offsetContainer = container.offsetParent(); | ||
+ | container.hide(); | ||
$(".backpack-link > a[href]").mouseover(function(evt){ | $(".backpack-link > a[href]").mouseover(function(evt){ | ||
var url = $(this).attr("href"); | var url = $(this).attr("href"); | ||
Line 53: | Line 54: | ||
if(lMouseX + container.outerWidth() > $(window).width()+$(window).scrollLeft()) | if(lMouseX + container.outerWidth() > $(window).width()+$(window).scrollLeft()) | ||
lMouseX = lMouseX - ((ttOffset*2) + container.outerWidth()); | lMouseX = lMouseX - ((ttOffset*2) + container.outerWidth()); | ||
− | var bodyOffset = | + | var bodyOffset = offsetContainer.offset(); |
lMouseX -= bodyOffset.left; | lMouseX -= bodyOffset.left; | ||
lMouseY -= bodyOffset.top; | lMouseY -= bodyOffset.top; |
Revision as of 21:14, 6 November 2011
$(document).ready(function(){ var ttCache = new Object(); var urlPrefix = wgArticlePath.replace("$1",""); var ttOffset = 10; var mouseX = 0; var mouseY = 0; var currentTooltip = ""; var container = $("<div id='tooltip-container' style='position:absolute;z-index:999999;height:auto !important;max-width: 300px;color:white;text-align: center; background: #24201B; -moz-border-radius: 10px; border-radius: 10px; padding:7px 0px;'></div>"); $("#bodyContent").append(container); var offsetContainer = container.offsetParent(); container.hide(); $(".backpack-link > a[href]").mouseover(function(evt){ var url = $(this).attr("href"); if(urlPrefix == url.substr(0,urlPrefix.length)){ url = url.substr(urlPrefix.length); } currentTooltip = url; relocateTooltip(evt); if(ttCache[url] != undefined){ showTooltip(ttCache[url]); return; } $.get(wgScript+"?title="+url+"&action=render",function(data){ var subpage = $(data).find(".backpack-tooltip"); if(subpage.size() == 0){ subpage = "<span style='padding-left:7px;margin-right:7px;'>Unable to load tooltip for this item</span>"; }else{ subpage = subpage.eq(0).html(); } ttCache[url] = subpage; if(currentTooltip == url){ showTooltip(subpage); } },"html"); }).mousemove(function(evt){ updateCoords(evt); relocateTooltip(); }).mouseout(function(){ container.hide(); }); function showTooltip(tooltipObj){ container.html(tooltipObj); container.css("width","auto"); if(container.outerWidth() > 300) container.css("width","300px"); relocateTooltip(); container.show(); } function relocateTooltip(){ var lMouseX = mouseX; var lMouseY = mouseY; if(lMouseY + container.outerHeight() > $(window).height()+$(window).scrollTop()) lMouseY = ($(window).height()+$(window).scrollTop())-container.outerHeight(); if(lMouseX + container.outerWidth() > $(window).width()+$(window).scrollLeft()) lMouseX = lMouseX - ((ttOffset*2) + container.outerWidth()); var bodyOffset = offsetContainer.offset(); lMouseX -= bodyOffset.left; lMouseY -= bodyOffset.top; container.css("left",lMouseX+"px").css("top",lMouseY+"px"); } function updateCoords(evt){ mouseX = evt.pageX + ttOffset; mouseY = evt.pageY + ttOffset; } $(document).unload(function(){ container.hide(); }); });