selected text and xy coordinates - javascript

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>

Related

unable to upload dicom images upon click event - webMango

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.

Change the color of a text in div using jquery contains

Here the whole text inside the div get's red color. but I need only the "bar" word color to be changed
<!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>
<title> new document </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#foo:contains('bar')").css('color','red');
});
</script>
</head>
<body>
<div id="foo">
this is a new bar
</div>
</body>
</html>

Could be done like that:
http://jsfiddle.net/PELkt/
var search = 'bar';
$(document).ready(function () {
$("div:contains('"+search+"')").each(function () {
var regex = new RegExp(search,'gi');
$(this).html($(this).text().replace(regex, "<span class='red'>"+search+"</span>"));
});
});

$("div:contains('bar')").each(function () {
$(this).html($(this).html().replace("bar", "<span class='red'>bar</span>"));
});
this will work surely
Please see Demo Here

You can use this way :
$(document).ready(function(){
// $("#foo:contains('bar')").css('color','red');
var text = 'bar' ;
var context = $("#foo").html();
$("#foo").html(context.replace(text,'<span style="color:red;">'+text+'</span>'));
});

Try this... prototype library:
<html>
<head>
<style type="text/css">
#content span {
background-color: yellow;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe(window,'load',function(){
var htm = $('content').innerHTML;
$('content').innerHTML = htm.sub('bar','<font color=red>bar</font>');
});
</script>
</head>
<body>
<div id="content">
this is a new bar
</div>
</body>

You can do like this.
$(document).ready(function(){
var matchingTest = 'demo';
$("#container:contains("+matchingTest+")").each(function () {
$(this).html($(this).html().replace(matchingTest, "<span class='red'>"+matchingTest+"</span>"));
});
});
.red{
background:#eada93;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
Hello this is a demo contents.
</div>

Solution with code snippet..
var text_change = 'bar';
$(document).ready(function () {
$("div:contains('"+text_change+"')").each(function () {
var regex = new RegExp(text_change,'gi');
$(this).html($(this).text().replace(regex, "<span class='red'>"+text_change+"</span>"));
});
});
.red {
color:#008000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">this is a new bar and bar.</div>

HTML Dom manipulation: IE7 issue

Why this sample of code doesn't work on IE7. Where is the problem? Thanks.
<!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" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Test</title>
<script language="javascript" type="text/javascript">
function initialize()
{
for(var i=0; i < 10; i++)
{
var tab = document.getElementById("search").childNodes[0];
var line = document.createElement("tr");
var column = document.createElement("td");
column.appendChild(document.createTextNode("DATA"));
line.appendChild(column);
tab.appendChild(line);
}
}
</script>
</head>
<body onload="initialize()">
<div id="search" class="bulle"><table><tr><td></td><td align="right">X</td></tr><tr><td><table id="tableResult"><table></td><td></td></tr></table></div>
</body>
</html>

In IE you must add table rows to the tbody, not directly to the table. Also, in some browsers the first child of the div will be a text node if there is any whitespace between the DIV and TABLE tags in the markup. So either move the id to the table (or a tbody element), or use:
function initialize() {
var div = document.getElementById("search");
var tbody = div.getElementsByTagName('tbody')[0];
// create rows, cells, etc.
tbody.appendChild(line);
}
Note that all tables with rows will have a tbody element, even though the tags are optional in the markup (i.e. your markup doesn't have a tbody element, but the table in the DOM will have one).
There is a tutorial on MDN about using the DOM table methods: https://developer.mozilla.org/en/Gecko_DOM_Reference/Examples#Example_8:_Using_the_DOM_Table_Interface.

How to modify this javascript code to only expand the hidden text

I want to expand hidden text on a webpage and after some (re)search on google i came across the following code:
<!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>Test</title>
<script type="text/javascript">
function Expand(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "minus.gif";
}
}
node.nextSibling.style.display = '';
}
function Collapse(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "plus.gif";
}
}
node.nextSibling.style.display = 'none';
}
function Toggle(node)
{
// Unfold the branch if it isn't visible
if (node.nextSibling.style.display == 'none')
{
Expand(node);
}
// Collapse the branch if it IS visible
else
{
Collapse(node);
}
node.childNodes[1].nodeValue = (node.nextSibling.style.display == 'none')? 'More...' : 'Less...';
}
</script>
</head>
<body>
<a onclick="Toggle(this)" style="cursor:pointer;"><img src="plus.gif" alt="Expand/Collapse" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>
Now the script displays a .gif image of a plus sign(expand) with 'More...' beside it and when the .gif file or the 'More...' is clicked the hidden text appears and the plus.gif is replaced with a minus.gif and 'More...' changes to 'Less...'
but i want to implement it in another way, i want that once the expand (plus.gif) is clicked, no other .gif should appear again, i dont know how to modify the code to do it, so friends please help me out
i am a newbie in javascript so such a dumb doubt had to come
Thanx :)

Just change your code to this
<!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>Test</title>
<script type="text/javascript">
function ExpandDelete(node)
{
if (node.nextSibling.style.display == 'none')
{
node.nextSibling.style.display = '';
node.parentNode.removeChild(node);
}
}
</script>
</head>
<body>
<a onclick="ExpandDelete(this);" style="cursor:pointer;"><img src="plus.gif" alt="Expand" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>

HTML + Passing Param b/w Parent & Child

It might be a simple, but the funny thing is i've tried it for almost 2-3hrs and haven't been able to solve it :(.
I have a parent window, which has a text box, and it has a value. I do a window.open and open a client and try to read the value of the parent, but unable to get the value.
Any help!!
I've tried
window.parent.document.getElementById(window.name)
window.parent.document.getElementById('test').value
window.opener.document.getElementById('teast').value
window.parent.opener.document.getElementById('teast').value
window.opener.parent.document.getElementById('teast').value
Almost all the permutation and combination. And its pure HTML.

Due to security restrictions, Javascript is unable to access documents that reside on a separate domain from the current one. So, if your parent is on a different domain from the child, this will never work.

window.opener.document.getElementById('test').value should work.

I've tried that, it ain't work. I'm posting the code
test.html
<html>
<head>
<title>Chat</title>
</head>
<body>
<div id="chatMessages"></div>
<script>
var newWin = null;
var OpenWindow = null;
function popUp(strURL, strType, strHeight, strWidth) {
if (newWin != null && !newWin.closed)
newWin.close();
var strOptions="";
if (strType=="console")
strOptions="resizable,height="+
strHeight+",width="+strWidth;
if (strType=="fixed")
strOptions="status,height="+
strHeight+",width="+strWidth;
if (strType=="elastic")
strOptions="toolbar,menubar,scrollbars,"+
"resizable,location,height="+
strHeight+",width="+strWidth;
alert(window.parent.document.getElementById(window.name));
newWin = window.open(strURL, 'alertWindow', strOptions);
//newWin.document.getElementById("child").value='Str';
newWin.focus();
// send_data(data);
}
function chat() {
popUp('../alert.jsp','console',250,600);
}
</script>
<form name="AlertReceiverOnHeader" onclick="chat()">
<input type="text" value="teast" id="teast" name="teast"/>
</form>
</html>
child.html
<!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=UTF-8">
<title>Alert</title>
</head>
<body onload="load()">
<script language="JavaScript">
function load() {
alert('In load');
alert("001="+window.parent.document.getElementById('teast'));
alert("002="+window.parent.document.getElementById(window.name));
alert("003="+window.opener.document.getElementById('teast').value);
}
</script>
<form name="child">
<input type="text" id="child" value="child"/>
</form>
</body>
</html>

Categories