unable to upload dicom images upon click event - webMango - javascript
I am using webMango and I modified the html syntax to upload DICOM images upon a clicking the browse button.
As of now I have hardcoded the value of the params[] variable. It still does not work. Upon selecting random files, I still get an empty DICOM viewer and no images are uploaded.
Also, even if I initialize params[] to the actual images, the viewer gives an incorrect view the images. The sagittal and coronal views are not shown.
Here's my code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>webMango</title>
<script src="mango.js"></script>
<script src="https://www.java.com/js/deployJava.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var params = [];
$(document).ready(function(){
var filetarget="[[";
$("#uploadFile").change(function(event){
$dir = $("#directory").val();
$dir = "data";
for( var i=0; i<event.target.files.length; i++) {
filetarget = filetarget + "'" + $dir + "/" + $(this).val() + "'";
if(i != event.target.files.length -1)
filetarget= filetarget + ",";
}
filetarget = filetarget + "]]";
//params["images"] = "\"" + filetarget + "\"";
params["images"]="[['data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm','data/IM-0001-0244.dcm']]";
});
});
</script>
</head>
<body>
<p>This is an example use of webMango.</p>
<label> Directory root </label> <input type="text" id="directory"/> <br/>
<input type="file" id="uploadFile" multiple directory webkitdirectory mozdirectory/>
<div style="width:800px;" class="mango" id="mango"></div>
</body>
</html>
It's not designed to work with Jquery, but with a small modification, I think you can do what you want. First, in mango.js, remove this line:
window.onload = runMango; // it's at the bottom
Next, see the below example use with JQuery. Note the call to runMango().
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>webMango</title>
<script src="mango2.js"></script>
<script src="https://www.java.com/js/deployJava.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var params = [];
$(document).ready(function() {
params["images"] = "['data/sample_image.nii.gz']";
runMango();
});
</script>
</head>
<body>
<p>This is an example use of webMango.</p>
<div style="width:800px;" class="mango"></div>
</body>
</html>
Also, even if I initialize params[] to the actual images, the viewer
gives an incorrect view the images. The sagittal and coronal views are
not shown.
Not sure about this one. I noticed all your images references are to the same file, so maybe that had something to do with it. Make sure your series contains references to all the different files in the series.
Related
why my php function is not executed by jquery $.get
I have a JavaScript in HTML file that call a php file in a $.get jquery API. When I run the HTML file on my computer where WAMP is running (for php), I can't get the result of php function on the screen,neither the text of h1 tag nor the the output of print function. Thanks for a lot your answer.
Regards
Here is my html file AJAXTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<script type = "text/javascript"
src = "jquery-1.3.2.min.js">
</script>
<script type = "text/javascript">
$(init);
function init(){
alert("init passage 2" + " Andy");
$.get("http://localhost/greetUser.php", { "userName": "Andy" }, processResult);
alert("processresult passage" + data);
$("#output").html(data);
}
function processResult(data, textStatus){
alert("processresult passage" + data);
$("#output").html(data);
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
<h1>Test AJAX</h1>
<div id = "output">
C’est la sortie par défaut
</div>
</body>
</html>
and here is my php file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<title>greetUser.php</title>
</head>
<body>
<div>
<h1>Réponse</h1>
<?php
$userName = $_REQUEST["userName"];
print "<p>Salut, $userName!</p> ";
?>
</div>
</body>
</html>
It looks like everything should largely be working, but one thing that I can see that would break it, is that you have the
alert("processresult passage" + data);
$("#output").html(data);
being called inside of the init() function, directly after the $.get call.
At this point in the execution, the 'data' variable does not exist and using it will cause an error and halt all javascript from continuing, as the execution has to wait until the request is returned to be able to process it (in the processResult function, which you appear to be handling correctly)
Removing those lines, I think should solve your problem.
Try this:
<script type = "text/javascript">
init();
function init(){
$.post("http://localhost/greetUser.php", { "username": "Andy" }, function(data,textStatus){
$("#output").html(data);
});
}
</script>
UPDATE
I don't understand the downvote, but if you try this, it works:
<script type = "text/javascript">
init();
function init(){
$.post("http://localhost/file.php", { "username": "Andy" }, function(data,textStatus){
$("#output").html(data);
});
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
<h1>Test AJAX</h1>
<div id = "output">
C’est la sortie par défaut
</div>
</body>
</html>
PHP file:
<?php
$userName = $_POST["username"];
print "<p>Salut, $userName!</p> ";
?>
open a simple pop up window with my string contents
I used jquery getJSON method to get the two strings from java servlet. one string contains the type of data like simple string, XML and HTML and another string contains data. I need to open a popup window with different size based on contents.
Below the code used to get the strings.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX calls using Jquery in Servlet</title>
<script src="http://code.jquery.com/jquery-latest.js"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function(event) {
var applid=$('#applicationid').val();
var applname=$('#appname').val();
$.getJSON('ActionServlet',
{
appid:applid,
appname:applname
},function(data) {
var errortype = data.errortype;
var errorMsg = data.errorMsg;
});
});
});
</script>
</head>
<body>
<form id="form1">
<h1>AJAX Demo using Jquery in JSP and Servlet</h1>
Enter your Name:
<input type="text" id="applicationid"/>
<input type="text" id="appname"/>
<input type="button" id="submit" value="Ajax Submit"/>
<br/>
<div id="hello" title="Hello World!"></div>
</form>
</body>
</html>
You can user fancybox. It gives options for opening the passed html string check here
To open a new window you can use the window.open() function.
To display the XML as raw text, you need to escape the special characters.
Javascript does not have builtin function for it (like htmlentities() in php).
You can try the following code:
function htmlentities(str)
{
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
document.getElementById("xxxxx").innerHTML isn't working at all?
I am having a problem trying to write a String Variable's value to a specific element in the DOM to the specific div.
let's say game=TEN
document.getElementById("game").innerHTML=game;
doesn't write to:
<div id="game"></div>
Problem is with the code below I have a script and at the end of that script I can document.write(game) and it works fine, but I can't write it to the div? Maybe I am trying to do this wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<!--<form id="teamSelect"onsubmit="return function games();"><select>
<option value="TEN">Tennessee</option>
<option value="GB">Green Bay</option>
</select>
<input type="submit" name="Submit" />
</form>
-->
<script>
var jsonString = '{"ss":[["Thu","7:30","Pregame",,"JAC",,"NE",,,,"55425",,"PRE1","2011"],' +
'["Thu","7:30","Pregame",,"BAL",,"PHI",,,,"55424",,"PRE1","2011"],' +
'["Thu","8:00","Pregame",,"SEA",,"SD",,,,"55423",,"PRE1","2011"],' +
'["Thu","8:30","Pregame",,"DEN",,"DAL",,,,"55426",,"PRE1","2011"],' +
'["Thu","10:00","Pregame",,"ARI",,"OAK",,,,"55427",,"PRE1","2011"],' +
'["Fri","7:30","Pregame",,"MIA",,"ATL",,,,"55430",,"PRE1","2011"],' +
'["Fri","7:30","Pregame",,"CIN",,"DET",,,,"55429",,"PRE1","2011"],' +
'["Fri","7:30","Pregame",,"PIT",,"WAS",,,,"55431",,"PRE1","2011"],' +
'["Fri","8:00","Pregame",,"TB",,"KC",,,,"55428",,"PRE1","2011"],' +
'["Fri","8:00","Pregame",,"SF",,"NO",,,,"55432",,"PRE1","2011"],' +
'["Sat","7:30","Pregame",,"GB",,"CLE",,,,"55433",,"PRE1","2011"],' +
'["Sat","8:00","Pregame",,"NYG",,"CAR",,,,"55437",,"PRE1","2011"],' +
'["Sat","8:00","Pregame",,"BUF",,"CHI",,,,"55434",,"PRE1","2011"],' +
'["Sat","8:00","Pregame",,"IND",,"STL",,,,"55435",,"PRE1","2011"],' +
'["Sat","8:00","Pregame",,"MIN",,"TEN",,,,"55436",,"PRE1","2011"],' +
'["Mon","8:00","Pregame",,"NYJ",,"HOU",,,,"55438",,"PRE1","2011"]]}';
//var jsonString = '{"test": "test1"}';
for (i=0; i<15;i++) {
if ("TEN" == eval('(' + jsonString + ')').ss[i][6] || "TEN" == eval('(' + jsonString + ')').ss[i][4]) {
var game=(eval('('+jsonString+')').ss[i][6] + ' vs ' + eval('('+jsonString+')').ss[i][4]);
var day=(eval('('+jsonString+')').ss[i][0] + ' at ' + eval('('+jsonString+')').ss[i][1]);
}
}
document.write(game);
document.getElementById("game").innerHTML=game;
</script>
<div id="game" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:16px">hello</divЮ
</body>
</html>
At the time you execute the script and you're looking for the element, it does not exist yet because it comes later on.
To be precise, it has not been parsed and added to the DOM yet.
So move your scripts to the bottom of the HTML file (at least below the element).
If you are using some kind of library, it can be solved easily too: for jQuery for example, place everything inside a $(function() { ... } block. That way, it isn't until the DOM has fully loaded that it gets executed (at which time you can safely search for the element).
On the moment when you are trying to access the #game element it is not yet created.
You should wait for the onload event and bind the function to this event:
<script type="text/javascript">
function init() {
/**your code here**/
}
</script>
<body onload="init()">
<div id="game"></div>
</body></html>
The Init() function will not work, because the DOM is not entirely loaded. Either you get yourself jquery or dojo and use the document ready functions, or place the javascript block at the end of your html document, aka before the closing body tag.
Get yourself Firebug, and rewrite the code like this for the beginning:
<html>
<body>
<div id="myid"></div>
</body>
<script language="Javascript">
document.getElementByID('myid').innerHTML = ....
</html>
Tamer
or you can use jqueries
$(document).ready(function(){});
Javascript variable not refreshing in Phonegap application
I have just written my first app in phonegap that simply replaces a text string on the screen each time you activate a link.
The original string stays where it is and the new string is written over the top. If you then activate the link again the second string is replaced with a new one but still over the top of the first string.
I have tried clearing the variable to fix this but no luck.
Is this a platform limitation or am i doing something wrong?
Code is below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
ideaSpace.innerHTML=idea;
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>
Thanks
Simon
I have no experience with phonegap, but in the past I found some problems trying to set innerHTML in xhtml documents, it don't check if the string you are using causes the document to still a valid xml and just throws an error, to achieve the same effect try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
//ideaSpace.innerHTML=idea;
ideaSpace.removeChild(ideaSpace.firstChild);
ideaSpace.appendChild(document.createTextNode(idea));
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>
selected text and xy coordinates
how to get a selected text and xy coordinates of the word in the same time??
Just googled it:
var txt = "";
if (window.getSelection) {
txt = window.getSelection();
} else if (document.getSelection) {
// FireFox
txt = document.getSelection();
} else if (document.selection) {
// IE 6/7
txt = document.selection.createRange().text;
}
txt = txt.toString()
There is no simple way to get X/Y coordinates of the selected text. Because it dependes on its container position and size, text font, text layout, and many many other variables.
To expand on #MatuDuke's answer, you can get the position of the selected text like so: var txt = window.getSelection(), range = txt.getRangeAt(0), boundary = range.getBoundingClientRect(); // Available positions: // boundary.top // boundary.bottom // boundary.left // boundary.right These will give you pixel values relative to the viewport. However, it doesn't seem to work within text areas, a problem I'm currently trying to solve.
I am using this jQuery plugin http://plugins.jquery.com/node/7411 for a project and it seems to be working flawlessly. You could use jQuery to get the position of mouse http://docs.jquery.com/Tutorials:Mouse_Position
Here is some sample code I have worked on
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.textselect.js"></script>
<script type="text/javascript">
$(function(){
$('#select').bind('textselect click', function(e){
console.log(e.text);
console.log(e.pageX);
})
});
</script>
<!-- Date: 2010-11-05 -->
</head>
<body>
<div id="select">
This is a simple select test
</div>
</body>
</html>
You could try something like this
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.textselect.js"></script>
<script type="text/javascript">
$(function(){
$('#select').bind('textselect click', function(e){
console.log(e.text);
console.log(e.pageX);
var selected_text = e.text
var original_text = $(this).text();
var parts = original_text.replace(e.text, "/").split("/");
for(i in parts) {
console.log(parts[i])
}
})
});
</script>
<!-- Date: 2010-11-05 -->
</head>
<body>
<div id="select">
This is a simple select test
</div>
</body>
</html>