I've got this problem where I need to show and hide divs when clicking on a table cell. However, I also want people to be able to select text and copy it within the cell without hiding the information.
Totally open to changing the design if necessary. :)
Here's a fiddle which demonstrates the issue
http://jsfiddle.net/k61u66ek/1/
Here's the HTML code in the fiddle:
<table border=1>
<tr>
<td>
Information
</td>
<td onClick="toggleInfo()">
<div id="information" style="display:none">
More information that I want to select without hiding
</div>
<div id="clicktoshow">
Click to show info
</div>
</td>
</tr>
</table>
Here's the javascript:
function toggleInfo() {
$("#clicktoshow").toggle();
$("#information").toggle();
}
Any suggestion/advise is much appreciated!
/Patrik
One option is to check the type of the Selection object returned by window.getSelection:
function toggleInfo() {
var selection = window.getSelection();
if(selection.type != "Range") {
$("#clicktoshow").toggle();
$("#information").toggle();
}
}
http://jsfiddle.net/k61u66ek/4/
Update
If the browser you're targeting doesn't expose a type property on the Selection object then you can test against the length of the selected value instead:
function toggleInfo() {
var selection = window.getSelection();
if(selection.toString().length === 0) {
$("#clicktoshow").toggle();
$("#information").toggle();
}
}
http://jsfiddle.net/k61u66ek/9/
which can in turn be reduced down to a bool check on toString:
if(!selection.toString()) {