Show button after selecting text for quoting
<p>How to show a little image after selecting some text when we using the window.getSelection() code?</p>

<p>The most similar thing I found was this <a href="http://stackoverflow.com/questions/1589721/how-can-i-position-an-element-next-to-user-text-selection">How can I position an element next to user text selection?</a> but cant seem to get it to work properly :-s 
Being kinda new to this also doesn't help.</p>

<p>Just need some simple code to do it, doesn't matter much where the image shows up, aslong as its near the selected text</p>

<p>-edit-</p>

<p>As I said in comment, the idea is to show a button (thought of image first but a button is better) floating near the selected text (after the selection is made), with link to quote what was selected, and if we clear what was selected the button doesn't show anymore.</p>

<p>And would this be possible by pulling mouse coords when finishing text selection and adding the x,y coords to the style of the button to be shown?</p>

<p>-edit-</p>

<p>got it working just like I wanted, having that coords idea in mind. Found this <a href="http://motyar.blogspot.pt/2010/02/get-user-selected-text-with-jquery-and.html" rel="nofollow">http://motyar.blogspot.pt/2010/02/get-user-selected-text-with-jquery-and.html</a> and with it I came up with this: </p>

<pre><code>function getSelected() {
if (window.getSelection) {
    return window.getSelection();
}
else if (document.getSelection) {
    return document.getSelection();
}
else {
    var selection = document.selection &amp;&amp; document.selection.createRange();
    if (selection.text) {
        return selection.text;
    }
    return false;
}
return false;
}

$(document).ready(function() {
var blank = '',
    selectionImage;
$('#mensagem').mouseup(function(e) {
    var selection = getSelected();

    if (!selectionImage) {
        selectionImage = $('&lt;button&gt;').attr({
            type: 'button',
            title: 'Citar Texto seleccionado',
            id: 'quote-place'

        }).html("Citar").css({
            "color": "red"
        }).hide();

        $(document.body).append(selectionImage);

    }
    $("#quote-place").click(function quote() {
        var txt = '';
        if (window.getSelection) {
            txt = window.getSelection();
        }
        else if (document.getSelection) {
            txt = document.getSelection();
        }
        else if (document.selection) {
            txt = document.selection.createRange().text;
        }
        else {
            return;
        }
        document.aform.selectedtext.value = txt;

    }).mousedown(function() {

        if (selectionImage) {
            selectionImage.fadeOut();
        }
    });

    selectionImage.css({
        top: e.pageY - 30,
        //offsets
        left: e.pageX - 13 //offsets
    }).fadeIn();
});
});​
</code></pre>

<p><a href="http://jsfiddle.net/ordhor/2Gc8c/" rel="nofollow">http://jsfiddle.net/ordhor/2Gc8c/</a></p>

<p>The problem now lies on when we click on the <code>&lt;div&gt;</code> without selecting text the button keeps showing. It should only appear when selecting text and I cant find how to fix it...</p>
