Plugin Messes up Facebook Chat

[studioramix]

When this plugin is in use, while moving mouse over Facebook chat windows, it makes them go crazy

[tarranjones]

It looks like the #copylAddress does have to be inserted into the dom to make it selectable. As soon as you do this you are running the risk of external css and js leaking into your code.

This is the code which is the problem

var linkAddress = $('<span id="copylAddress" style="display: inline-block;" />');
$('body').append(linkAddress);
// This is a DOM element that has to be selectable but not visible to anybody
linkAddress.css({position: 'absolute', left:'-9999em'});

Firstly, when possible all your dom manipulation should be done when the element is detached.

A better order would be.

var linkAddress = $('<span id="copylAddress" style="display: inline-block;" />');
// This is a DOM element that has to be selectable but not visible to anybody
linkAddress.css({position: 'absolute', left:'-9999em'});
$('body').append(linkAddress);

or event better

var linkAddress = $('<span id="copylAddress" style="display: inline-block; position: absolute; left: -9999em" />');
$('body').append(linkAddress);

I would definitely add the !important rule to all the css properties, like so

var linkAddress = $('<span id="copylAddress" style="display: inline-block!important; position: absolute!important; left: -9999em!important;" />');
$('body').append(linkAddress);

I would also probably use an anchor tag <a> instead of a <span>, the a selector is rarely used for styling, usually just for color and text-decoration