JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Select Text Trick jQuery Plugin by: Motyar</h1>
<h2>Select the any term</h2>
<div id="show-bubb-text">
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum
<hr><br>
</div>

<h2>DubleClick on any term (will be searched)</h2>
<div id="db-Click-text">
Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro lingua auxiliar su. Pote basate programma il nos. Non ha responder appellate traduction, es que lista celos. Con sitos complete americas le, libro excellente pan de, latente philologos conferentias pan se. Infra esseva uso ma. Involvite anglo-romanic ma que, debitas internet primarimente il web. Uso
</div>
<hr></br>

<h2>Select text to ZOOM!</h2>
<div id="zoom-text">
Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass...

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred
{padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
#show-bubb {background:#D00;position:absolute;margin-top:-10px;margin-left:-25px;color:#55FF00;padding:0 5px 3px 5px;border:1px solid #111;border-radius:5px}
#zoom-div {position:fixed;color:#111;font-size:25px;background:#FFFFC8;left:0;top:0;width:100%;border-bottom:5px double #333}
h2{color:green;margin-bottom:10px;font-size:25px}

JavaScript

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://google.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...',

                target: '_blank',

                id: 'show-bubb'

            }).html("Search").css({"color":"","background":""}).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(); }

});



$("#db-Click-text").dblclick(function(){

            window.open("http://embah-google.blogspot.com/search?q="+getSelected());

            });

});


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



});