Skip to:
Content
Pages
Categories
Search
Top
Bottom

Updated JS: Here is a proper fix for hovering over multiple avatars and having the bubble pop up on

  • Avatar of defunctlife
    defunctlife
    Participant

    @defunctlife

    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 = $(‘

     
     
       

    ‘);

    $(‘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 = ‘

    Loading

    ‘;
    $(‘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;
    });

    });`

Viewing 17 replies - 1 through 17 (of 17 total)
  • Avatar of paulhastings0
    paulhastings0
    Participant

    @paulhastings0

    Ah, very nice. Thanks for doing that. :)

    Avatar of thelandman
    thelandman
    Participant

    @thelandman

    Excellent stuff!

    Avatar of Pisanojm
    Pisanojm
    Participant

    @pisanojm

    Wow, this is huge and is already working better than the original Nice job!

    Can I send you $10.00 via paypal (post donation link)?

    I’ve been wanting some type of fix for this for months. Is there an easy way to include a pre-set delay of 1 to 2 seconds before it even attempts to load the avatar?

    @slaffik check this code and consider including in your next update.

    Avatar of defunctlife
    defunctlife
    Participant

    @defunctlife

    Thank you,

    A donation would be nice but not necessary, but here it is anyway: http://tinyurl.com/383jwbh

    As for a pre-set delay you would need to use a jquery plugin called jquery hoverIntent and integrate it with jquery.live. http://cherne.net/brian/resources/jquery.hoverIntent.html

    There is some info on this here if you want to give it a go: http://rndnext.blogspot.com/2009/02/jquery-live-and-plugins.html

    This is where the plugin author got the javascript anyway.

    Cheers

    Avatar of Slava UA
    Slava UA
    Participant

    @slaffik

    Plugin is updated to 1.1.
    Loading image is added and delay works now too right after plugin activation.
    Thanks, @defunctlife, for helping people. I saw this post after the release so maybe my code will change in 1.2 :)

    Avatar of defunctlife
    defunctlife
    Participant

    @defunctlife

    @slaffik no worries man :) hope it helps. I would still say to use the hoverintent plugin, so that you actually have delay before making any kind of requests to the server. People don’t want it simply lag with a delay before executing, they want it to not make a request for a certain amount of seconds before displaying (so if I hover over 20 profile pictures really quick, not a single ajax request should go through).

    Avatar of defunctlife
    defunctlife
    Participant

    @defunctlife

    I am going to add hoverintent in tonight myself and rewrite the js. The new stuff is quite buggy (going back and forth over avatars it just stops working). I will just hardcode the 2 second pause, the author can adapt it later if he wants :)

    I’ll post it here when I’m done.

    Avatar of Pisanojm
    Pisanojm
    Participant

    @pisanojm

    @defunctlife I am looking forward to this. This will work with the new 1.1.1 version? I modified your code to work with it… but something weird is till happening. After about 8 seconds, the box pop-ups all by itself again, without loading… even if the mouse is not over an avatar… very weird and I can’t seem to figure out why. I posted my re-hack of your hack here: (using version 1.1.1. of the plugin) if you wan’t to see what I changed: http://pastie.org/1322118 I must have missed something…

    I would love to see this functionality… I think 2 seconds may be too long… 1 second would be great, but if you comment the time variable in the code it will be easy to change via a quick text edit.

    BTW, I send you the donation via paypal… I am very much looking forward to seeing this hoverintent work correctly… I hope @slaffik will incorporate it, into the next stable release… as fixing this mouseout issue, and delaying the popup (no ajax call to load the pop-up at all for X amount of time) from even appearing for a second or so (and not appear if the mouse is moved off the avatar prior to X being fulfilled) would make this about perfect for our needs.

    Thanks for your willingness to fix this for all of us.

    Avatar of defunctlife
    defunctlife
    Participant

    @defunctlife

    @Pisanojm, @slaffik man this was a nightmare and took much longer than expected. HoverIntent doesn’t work with jquery.live() so I had to find another way. The code is a bit nasty and could use cleaning up, but it seems to work very well now.

    *This only works with 1.1.1*

    Same deal with installation above, set your delay for this plugin in the dashboard to 0. If @slaffik wants to adapt that variable into my script that would be ideal so you can change the time delay from his backend, the same way he did it with ajax_url.

    Here is the new bubble-hover.js: http://pastie.org/1324299

    I have it set for 1000ms delay before showing the popup, you can simply change this by changing the variable at the top of the script

    `var showDelay = 1000; `

    Let me know how it works for you.

    Don’t thank me, thank my employer who is paying me to do this.

    Cheers

    Avatar of Pisanojm
    Pisanojm
    Participant

    @pisanojm

    Brilliant! And THANKS anyway! @slaffik – PLEASE include in all future updates… works exactly as I have needed and been wanting.

    Avatar of Pisanojm
    Pisanojm
    Participant

    @pisanojm

    @defunctlife Just checking, It seems that the loading icon is not appearing in the change (just a broken x), at least on my site, I didn’t notice it at first… I will check to see if I did something. Can you verify for me that it’s appearing for you? Everything else is working fine.

    Avatar of defunctlife
    defunctlife
    Participant

    @defunctlife

    @pisanojm probably a browser cache issue. Clear your cache/cookies and restart your browser.

    Avatar of Pisanojm
    Pisanojm
    Participant

    @pisanojm

    I’ve been working on so many things today… it’s hard to say… I tree to keep them small so I can track cause and effect, but some times I cause the effect inadvertently! Regardless, it’s working now. Thanks again for this great contribution!

    Avatar of yu
    yu
    Participant

    @gerbilo

    defunctlife, guys – I’ve got the same problem with latest bubble versions on my site (http://2fort.lv) .. i’ve tried to use new bubble-hover.js: http://pastie.org/1324299 without success.. ‘empty’ bubble pop up shows after every ajax update on page..
    Can you give me a hint to fix it?

    Avatar of defunctlife
    defunctlife
    Participant

    @defunctlife

    @gerbilo seems fine to me…did you clear your browser cache?

    Avatar of yu
    yu
    Participant

    @gerbilo

    @defunctlife, strange.. i’ve cleaned it yesterday for a couple of times without any luck.. but now it’s seems like working for me.. omg :D thnx anyway!

    Avatar of Slava UA
    Slava UA
    Participant

    @slaffik

    Just commited CD BP Avatar Bubble 1.2 with these (and some other minor) changes.
    Thank you, @defunctlife

Viewing 17 replies - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.