Difference between revisions of "User:Stewart/vector.js"

From Team Fortress Wiki
Jump to: navigation, search
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 container = $("<div id='tooltip-container' style='position:absolute;z-index:999999;height:auto !important;max-width: 300px;color:white;text-align: center; background: #24201B; width: 100%; -moz-border-radius: 10px; border-radius: 10px; padding:7px 0px;'></div>");
 
 
var ttOffset = 10;
 
var ttOffset = 10;
container.hide();
 
 
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 = container.offsetParent().offset();
+
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();
	});
});