Subscribe in a readerBookmark This
Combine jQuery and Double Clicks to Get Data
Chris Missal, August 20, 2008
This example shows how you can apply jQuery and a double click to highlight a word and get some sort of information from it. I'm using a definition (if applicable) of the word. Please note that this example might not always work as expected. I wrote this just to show some more jQuery example code and to get some ideas out there. Maybe this will spark some really useful ideas for somebody.
Go ahead... double click a word... *wink*!
<script type="text/javascript">
$(document).ready(function() {
$("#definition button").click(function() {
$(this).parent().hide(200);
});
$("#container p").dblclick(function() {
var txt = getSelectedText();
$.get("/php/data/define.php", { q: txt }, function(data) {
var $dataDiv = $("<div>"+data+"</div>").addClass("data");
$("#definition").show(200)
.contents("h3").text("Definition of: "+txt).parent()
.contents("div.data").replaceWith($dataDiv).parent();
});
});
});
function getSelectedText() {
if (window.getSelection) return window.getSelection().toString();
else if (document.getSelection) return document.getSelection();
else if (document.selection) return document.selection.createRange().text;
}
</script>
Filed Under: JavaScript jQuery