Get user selected text with jquery and its uses

What is its mean if user selects some terms again and again?? i think (s)he is interested in that or searching for more info on search engines. But the question is again here - How to detect in what users are more interested ?


I am here with you; to demonstrate How to get user selection and how to use it to improve usability.

How to get user selected text?

There are different methods for different browsers, some provides window.selection and other document.selection. dont worry, we have one function working for all browsers.

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

Some uses

1.Record text with Ajax
Yes some sites are doing so, so that they can determine "in what" user is more interested. These datas can be used to future postings or articles.
2.Provide options to search
When user selects anything on your blog or site, you can show an info bubble providing option to search more about that term.
here is the code -

<style type="text/css">
    #show-bubb { background:url(bubble.png) 0 0 no-repeat; width:25px; height:29px; position:absolute; top:-50px; left:-50px; }
</style>

<script type="text/javascript" src="http://dharmmotyar.googlecode.com/svn/trunk/js/jquery.js" ></script>
<script>

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

$(document).ready(function() {
    var url = 'http://motyar.blogspot.com/search?q={term}', selectionImage;
    $('#show-bubb-text').mouseup(function(e) {
        var selection = getSelected();
        if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
            if(!selectionImage) {
                selectionImage = $('<a>').attr({
                href: url,
                title: 'Click here to learn more about this term',
                target: '_blank',
                id: 'show-bubb'
            }).hide();
            $(document.body).append(selectionImage);
        }

        selectionImage.attr('href',url.replace('{term}',encodeURI(selection))).css({
        top: e.pageY - 30, //offsets
        left: e.pageX - 13 //offsets
        }).fadeIn();
        }
    });

$(document.body).mousedown(function() {
    if(selectionImage) { selectionImage.fadeOut(); }
});
</style>

<div id="show-bubb-text">
SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT / SMS TWITTER TO INDIA / CREATE A LOGO WITH CSS3 / DRAW WITH JQUERY / API FOR SMS / CREATE TWITTER APPLICATION WITH JAVASCRIPT /
</div>

3.Let user search on dboulClicking any term
Yes you can do so, and whenever user double clicks on any term, a new window will open with search results. here is the code-

$("#db-Click-text").dblclick(function(){
            window.open("http://motyar.blogspot.com/search?q="+getSelected());
            });
});

4. Zoom text to increase readability
Sometimes happens so - some users finds unable to read due to small text, or similar colors of text and background. let them zoom  by selecting text.

Here is the code -

$('#zoom-text').mouseup(function(e) {
    var selection = getSelected();
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
            zoomDiv = $('<div>').html(selection).attr({
            id: 'zoom-div'
        }).hide();
    $(document.body).append(zoomDiv);
    zoomDiv.fadeIn();
}

$(document).mousedown(function(){zoomDiv.fadeOut();});

Demo

Here is the demo