Fix Chat popover interaction in bootstrap admin theme
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a bootstrap admin with a chat window that should appear when you click on the persons name in a list. this works fine. what doesnt work well is the popover doesnt appear next to the person you clicked on. It seems to just show in a default location with the > icon pointing to the wrong person. I have a video seen here

http://screencast.com/t/dOPMTnDRH

This bounty is to get the click on a persons name to load the window here but next to their name and with the carrot pointing to the right person. if possible lets make sure the popover opens up instead of down if we are close to the bottom so the user can access the info without scrolling to try and catch it.

here is a zip of the code driving this
https://dl.dropboxusercontent.com/u/2982102/Temp/Chat.zip

awarded to dekkard

Crowdsource coding tasks.

1 Solution

Winning solution

Here you go: https://app.box.com/s/dpilc6b8eg4clwnx8rv9qz7g2t5hv7ku

Just replace your file with this one

The main part is this:

$(".chat-group a").on('click', function(ev)
{
    ev.preventDefault();

    var el_offset = $(this).offset();
    var el_size = $(this).height();

    $chat_conversation.toggleClass('is-open');

    $(".chat-conversation").offset({top: el_offset.top - el_size});

    $(".chat-conversation textarea").trigger('autosize.resize').focus();
});
Here's a version with some stuff added, like proper setting of the chatbox header and preventing scroll when open near the bottom of the page: https://app.box.com/s/x259r54xc4uhlanexch516w87jsqswk8
dekkard 4 years ago