www/adium.im 583:5f5f846904c0: Javascript cannot target pseudo-c...

[commits at adium.im]

details:	http://hg.adium.im/www/adium.im/rev/5f5f846904c0
revision:	583:5f5f846904c0
branch:		rewrite
author:		Paul Wilde <me at paulwilde.co.uk>
date:		Tue Feb 21 19:59:02 2012 +0000

Javascript cannot target pseudo-classes therefore change the pointer into a second div. Also realign the tooltip to prevent it from being cut off the left edge.

diffs (88 lines):

diff -r 05bd926590b1 -r 5f5f846904c0 assets/scripts/home.js
--- a/assets/scripts/home.js	Tue Feb 21 14:52:59 2012 +0000
+++ b/assets/scripts/home.js	Tue Feb 21 19:59:02 2012 +0000
@@ -2,15 +2,29 @@
 	
 	// Show tooltips for services
 	$('#services a[title]').hover(function() {
-		var $tooltip = $('<div class="tooltip">');
+		var $tooltip = $('<div id="tooltip">'),
+			$p = $(this).position();
 
 		$('body').append($tooltip.text($(this).attr('title')));
+		
+		
+		// Prevent tooltip from being cut off at the left edge
+		if ($p.left <= $tooltip.outerWidth() / 2) {
+			$left = $(this).contents().width();
+			var $alignPointer = true;
+		} else {
+			$left = $tooltip.outerWidth() / 2;
+		}
 
 		$tooltip.css({ 
-			top: ($p = $(this).position()).top - $tooltip.outerHeight() - 8,
-			left: $p.left - $tooltip.outerWidth() / 2 + $(this).contents().width() / 2
-		});
-
+			top: 	$p.top - $tooltip.outerHeight() - 8,
+			left: 	$p.left - $left + $(this).contents().width() / 2
+		}).append('<div id="pointer">');
+		
+		// Realign pointer
+		if ($alignPointer == true) 
+			$('#pointer').css('margin-left', -+ ($tooltip.outerWidth() / 2 -+ $(this).contents().width() + 9));
+		
 		$(this).removeAttr('title').data('tooltip', $tooltip);
 
 	}, function() {
@@ -18,11 +32,15 @@
 	});
 	
 	// Clear tooltip when clicking a service icon
-	// Fixes a bug where it would stay there on iOS when revisiting the page with a swipe
-	$('#services a').click(function () { $('.tooltip').remove(); });
+	// Fixes a bug where it would not disappear on iOS when revisiting the page with a swipe
+	$('#services a').click(function () { 
+		$('.tooltip').remove(); 
+	});
 	
 	// Play quack audio file on logo mousedown
-	$('#logo').mousedown(function () { document.getElementById('quack').play(); });
+	$('#logo').mousedown(function () { 
+		document.getElementById('quack').play(); 
+	});
 	
 	// Load picture viewer
 	$('figure a').fancybox({
diff -r 05bd926590b1 -r 5f5f846904c0 assets/styles/home.css
--- a/assets/styles/home.css	Tue Feb 21 14:52:59 2012 +0000
+++ b/assets/styles/home.css	Tue Feb 21 19:59:02 2012 +0000
@@ -6,7 +6,7 @@
 .banner h1 { font-size: 4.5em; line-height: 1.2em; }
 .banner h2, .version { font-size: 2em; line-height: 1.3em; }
 .banner a { font-size: 1.4em; line-height: 1.1em; }
-.tooltip { font-size: 1.3em; line-height: 1.4em; }
+#tooltip { font-size: 1.3em; line-height: 1.4em; }
 
 /********** Banner **********/
 
@@ -162,7 +162,7 @@
 
 /********** Tooltips *********/
 
-.tooltip {
+#tooltip {
 	z-index: 9;
 	position: absolute;
 	padding: 5px 10px;
@@ -184,8 +184,7 @@
 	text-shadow: 0 1px #fff;
 }
 
-.tooltip:before, .tooltip:after {
-    content: '';
+#pointer {
     position: absolute;
     top: 100%;
     left: 50%;