Hi,
There are many plugins available for various browsers which does that, I have come up with a custom solution. What is happening here is, considering a web page which has textual content. Whenever a user selects a word by double clicking it, a small popup comes up with the definition of that word. Now in my case i have opted to show the definition of the selected word, you can put your functionality for that word, e.g. a site search with that word.
Since I do not have a word dictionary so I am getting the definition of the word from definr.com and parsing it. You can change this to meet you requirements.
For this you need two files, first being a simple HTML file, "index.html" with the following:
<html>
<head>
<title>Detect text selection in page</title>
<style type="text/css">
body{font-family:verdana, tahoma, arial;font-size:11px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
var ajaxObj="";
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('#x').val(e.pageX);
$('#y').val(e.pageY);
});
})
function getSelText()
{
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;
if(txt==""){return;}
jQuery('#popup').css("top",(jQuery("#y").val()) + "px");
jQuery('#popup').css("left",(jQuery("#x").val()) + "px");
jQuery('#popup').fadeIn(300);
jQuery('#content').html("loading....");
if(ajaxObj!=""){ajaxObj.abort(); }
ajaxObj=jQuery.ajax({
type: "GET",
url: "meaning.php?word=" +txt,
success: function(content){
jQuery('#content').html(content);
}
});
}
</script>
</head>
<body ondblclick="getSelText()">
<div id="popup" style="border:1px solid #999999;background:#cccccc;-moz-border-radius: 5px;-webkit-border-radius:5px;padding:10px;width:230px;height:auto;display:none;position:absolute">
<div id="content"></div>
</div>
<input type="hidden" id="x"><input type="hidden" id="y">
Hello Box Shopping.<br/>
Double click any word in the page and you will have its meaning.
</body>
</html>
Create another file, "meaning.php" with the following:
<b>Search:</b><br/>
<input type="text" style="width:80px;" value="<?php echo $_GET['word']; ?>" id="search_text" />
<input type="button" value="Go" onclick="window.open('http://www.google.co.in/search?q=' + document.getElementById('search_text').value)"><br/>
<b>Defination:</b><br/>
<?php
$word=$_GET['word'];
$parameter=str_replace(" ","+",$word);
$results=file_get_contents("http://definr.com/definr/show/".$parameter);
$arr=explode("4: ",$results); // maximum of 3 definitions
echo $arr[0];
?>
<br/><input type="button" value="Close" onclick="jQuery('#popup').fadeOut(300);">
:)
There are many plugins available for various browsers which does that, I have come up with a custom solution. What is happening here is, considering a web page which has textual content. Whenever a user selects a word by double clicking it, a small popup comes up with the definition of that word. Now in my case i have opted to show the definition of the selected word, you can put your functionality for that word, e.g. a site search with that word.
Since I do not have a word dictionary so I am getting the definition of the word from definr.com and parsing it. You can change this to meet you requirements.
For this you need two files, first being a simple HTML file, "index.html" with the following:
<html>
<head>
<title>Detect text selection in page</title>
<style type="text/css">
body{font-family:verdana, tahoma, arial;font-size:11px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
var ajaxObj="";
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('#x').val(e.pageX);
$('#y').val(e.pageY);
});
})
function getSelText()
{
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;
if(txt==""){return;}
jQuery('#popup').css("top",(jQuery("#y").val()) + "px");
jQuery('#popup').css("left",(jQuery("#x").val()) + "px");
jQuery('#popup').fadeIn(300);
jQuery('#content').html("loading....");
if(ajaxObj!=""){ajaxObj.abort(); }
ajaxObj=jQuery.ajax({
type: "GET",
url: "meaning.php?word=" +txt,
success: function(content){
jQuery('#content').html(content);
}
});
}
</script>
</head>
<body ondblclick="getSelText()">
<div id="popup" style="border:1px solid #999999;background:#cccccc;-moz-border-radius: 5px;-webkit-border-radius:5px;padding:10px;width:230px;height:auto;display:none;position:absolute">
<div id="content"></div>
</div>
<input type="hidden" id="x"><input type="hidden" id="y">
Hello Box Shopping.<br/>
Double click any word in the page and you will have its meaning.
</body>
</html>
Create another file, "meaning.php" with the following:
<b>Search:</b><br/>
<input type="text" style="width:80px;" value="<?php echo $_GET['word']; ?>" id="search_text" />
<input type="button" value="Go" onclick="window.open('http://www.google.co.in/search?q=' + document.getElementById('search_text').value)"><br/>
<b>Defination:</b><br/>
<?php
$word=$_GET['word'];
$parameter=str_replace(" ","+",$word);
$results=file_get_contents("http://definr.com/definr/show/".$parameter);
$arr=explode("4: ",$results); // maximum of 3 definitions
echo $arr[0];
?>
<br/><input type="button" value="Close" onclick="jQuery('#popup').fadeOut(300);">
:)
I was actually looking for this resource a few weeks back. Thanks for sharing with us your wisdom.This will absolutely going to help me in my projects .
ReplyDeleteOnce again great post. You seem to have a good understanding of these themes.When I entering your blog,I felt this . Come on and keep writting your blog will be more attractive. To Your Success!
Classic Dresses
Classic Bridesmaid Dresses
Trumpet Wedding Dresses
New Style Flower Girl Dresses
Wedding Dresses with Sleeves