Updated version here: http://buddypress.org/community/groups/cd-bp-avatar-bubble/forum/topic/here-is-a-proper-fix-for-hovering-over-multiple-avatars-and-having-the-bubble-pop-up-on-all-of-them-in-the-order-you-hovered/#post-80468
* Use at your own risk, no warranty or support provided *
The problems:
1. The ajax requests aren’t aborted when hovering over another item or when you “mouseout” off an avatar. This creates a queue of requests and the bubble will pop up over every avatar you hovered on.
2. On slow servers it is clearly evident how long displaying information can take.
The Solution: I updated the bubble-hover.js file here: http://pastie.org/1304217.
It will now show a loader.gif (which is already in this package for some reason so you don’t have to upload an image) and the bubble will pop up instantly, with a loading gif until the ajax request is complete and will populate the bubble. I also included a check to abort the ajax request on hover and mouseout.
Install:
1. Set your delay for this plugin in the dashboard to 0 (this is no longer needed)
2. Back you your bubble-hover.js in wp-content/plugins/cp-bp-avatar-bubble/_inc/bubble-hover.js
3. Overwrite the code in bubble-hover.js with the code from here: http://pastie.org/1304217
4. Hard refresh your browser and check it out!
I’m including the code here just in case pastie.org removes it or goes down
Cheers
jQuery(document).ready(function($) {
function getClientWidth() { return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth; }
function getClientHeight() { return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight; }
$(function() {
var hideDelay = 0;
var hideTimer = null;
var x; // hack: variable for ajax object
var container = $('<div id="popupContainer"><table width="" border="0" cellspacing="0" cellpadding="0" align="center" class="popupBubble"><tr><td class="corner topLeft"></td><td class="top"></td><td class="corner topRight"></td></tr><tr><td class="left"> </td><td><div id="popupContent"></div></td><td class="right"> </td></tr><tr><td class="corner bottomLeft"> </td><td class="bottom"> </td><td class="corner bottomRight"></td></tr></table></div>');
$('body').append(container);
$('.avatar').live('mouseover', function() {
// format of 'rel' tag: userID
var userID = $(this).attr('rel');
// If no userID in url rel tag, don't popup blank
if ( !userID)
return;
if (hideTimer)
clearTimeout(hideTimer);
var pos = $(this).offset();
var width = $(this).width();
// hack
// display the container before the ajax request
container.css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
container.css('display', 'block');
// populate the popup with a loader.gif
var loading = '<div style="width: 60px; text-align: center; padding-top: 6px;"><img src="/wp-content/plugins/cd-bp-avatar-bubble/_inc/images/loader.gif" alt="Loading" /></div>';
$('div#popupContent').html(loading);
if(x) {x.abort(); x = null; }
// end hack
x = $.ajax({
type: 'GET',
url: '/wp-content/plugins/cd-bp-avatar-bubble/ajax.php',
data: 'ID=' + userID,
success: function(data) {
// Verify that we're pointed to a page that returned the expected results.
if (data.indexOf('result') < 0) {
}
// Verify requested person is this person since we could have multiple ajax requests out if the server is taking a while.
if (data.indexOf(userID) > 0) {
var text = $(data).html();
$('div#popupContent').html(text);
var right = getClientWidth() - pos.left - width;
var boxWidth = $('div#popupContainer').width();
if ( boxWidth < right ) {
container.css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
}else{
container.css({
left: (pos.left - boxWidth) + 'px',
top: pos.top - 5 + 'px'
})
}
container.css('display', 'block');
}
}
});
});
$('.avatar').live('mouseout', function() {
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function() {
container.css('display', 'none');
}, hideDelay);
});
// Allow mouseover of details without hiding details
$('#popupContainer').mouseover(function() {
if (hideTimer)
clearTimeout(hideTimer);
});
// Hide after mouseout
$('#popupContainer').mouseout(function() {
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function() {
// hack: abort the xml request
x.abort();
x = null;
container.css('display', 'none');
}, hideDelay);
});
});
// Select all checkboxes after clicking the link All
$("a[href='#select_all']").click( function() {
$("input:checkbox.link").attr('checked', 'checked');
return false;
});
});
