Use AJAX to fetch posts that aren't on the current page.

js/post-hover.js

@@ -19,31 +19,52 @@ $(document).ready(function(){
 			id = id[1];
 		}
 		
-		var post = $('div.post#reply_' + id);
-		if(post.length == 0)
-			return;
-		
+		var post = false;
 		$(this).hover(function(e) {
-			if($(window).scrollTop() <= post.offset().top + post.height()) {
-				// post is in view
-				post.attr('style', 'border-style: none dashed dashed none; background: ' + post.css('border-right-color'));
+			var start_hover = function(link) {
+				if(post.is(':visible') && $(window).scrollTop() <= post.offset().top + post.height()) {
+					// post is in view
+					post.attr('style', 'border-style: none dashed dashed none; background: ' + post.css('border-right-color'));
+				} else {
+					post.clone()
+						.attr('id', 'post-hover-' + id)
+						.addClass('post-hover')
+						.css('position', 'absolute')
+						.css('border-style', 'solid')
+						.css('box-shadow', '1px 1px 1px #999')
+						.css('display', 'block')
+						.insertAfter($(link).parent());
+					$(link).trigger('mousemove');
+				}
+			};
+			
+			post = $('div.post#reply_' + id);
+			if(post.length > 0) {
+				start_hover(this);
 			} else {
-				post.clone()
-					.attr('id', 'post-hover-' + id)
-					.addClass('post-hover')
-					.css('position', 'absolute')
-					.css('border-style', 'solid')
-					.css('box-shadow', '1px 1px 1px #999')
-					.insertAfter($(this).parent());
-				$(this).trigger('mousemove');
+				var link = this;
+				$.ajax({
+					url: $(this).attr('href'),
+					context: document.body,
+					success: function(data) {
+						post = $('div.post:first').prepend($(data).find('div.post#reply_' + id).css('display', 'none').addClass('hidden')).find('div.post#reply_' + id);
+						start_hover(link, post);
+					}
+				});
 			}
 		}, function() {
+			if(!post)
+				return;
 			post.attr('style', '');
+			if(post.hasClass('hidden'))
+				post.css('display', 'none');
 			$('.post-hover').remove();
 		}).mousemove(function(e) {
+			if(!post)
+				return;
 			var top = e.pageY - post.height() - 15;
 			$('#post-hover-' + id)
-				.css('left', $(this).width() + e.pageX)
+				.css('left', e.pageX)
 				.css('top', top > $(window).scrollTop() ? top : $(window).scrollTop());
 		});
 	});