JS: making invisible text (display:none) non-selectable

gnznroses · 04-23-2007, 12:36 PM

here's the problem i'm having. i've got a webpage that displays various stats for me. each stat is a link that toggles the visibility of a div right below it, which gives further info on that topic. every day i like to copy and paste my stats and save themn to a txt fie, but i don't need to save the details, just the main stats. however, when i highlight all of the text and Copy, it's copying the invisible text as well. i need to make the text non-selectable while it's invisible.

here's what i have:

<script type="text/javascript">
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
</script>

<a href="#" onClick="toggle('details1')" style="color:#000000; text-decoration:none">the numbers for this stat is: 1234</a><br><div id="details1" style="display:none">some info<br>more info<br>etc<br></div>
...
the numbers for this stat is: 567
...

so if i try to copy just the "the numbers for..." text, when i paste it, it pasts the detail;s info as well, even tho it's not even visible.

exam · 04-23-2007, 04:07 PM

The right way to do this would be using the DOM to add and remove nodes, but here's a hack that should do it for you. You're basically removing the contents of the div every time you hide the div, and put the contents back every time you show it. When you copy and paste, and extra line will be there, since the HTML element is still there, it's just empty. This can be sidestepped by using an element that is an inline element by default.

Code:

<html><head>
<script type="text/javascript">

var g_details_data = Array(0);
g_details_data['details1'] = 'some info<br>more info<br>etc 1<br>';
g_details_data['details2'] = 'some info<br>more info<br>etc 2<br>';

function toggle(obj) {
	var el = document.getElementById(obj);
	if (el.style.display != 'none') {
		el.style.display = 'none';
		el.innerHTML = '';
	} else {
		el.style.display = 'block';
		el.innerHTML = g_details_data[obj];
	}
}
</script>
</head>
<body>

<span onclick="toggle('details1')">the numbers for this stat is: 1234</span><br>
<span id="details1" style="display:none"></span>

<span onclick="toggle('details2')">the numbers for this stat is: 5678</span><br>
<span id="details2" style="display:none"></span>

</body></html>

gnznroses · 04-25-2007, 02:55 PM

ah. that makes sense. i'll try it out. thanks a lot

gnznroses · 04-25-2007, 04:13 PM

it works

it still copies an extyra two linebreaks for some reason, but better than a huge list...

gnznroses · 04-26-2007, 11:07 AM

hmm, it worked the first time i tried but it's not now. still copies all the hidden text to the clipboard.

exam · 04-26-2007, 01:17 PM

Post your current code. It works fine for me. As far as the extra linebreaks, there won't be any if you make sure there aren't any in the HTML source and the "disappearing" element has a *default* display style of inline, such as a span.

gnznroses · 04-26-2007, 05:39 PM

oh, i see my problem. in my php i didn't take out the code between the <div> and </div>. so i was pre-populating the div with the content. so it would work if i showed then re-hid the div.

i do have 2-3 linebreaks, and i'm using divs, but i thought you couldn't use spans unless the content inside is single-line?

exam · 04-26-2007, 05:57 PM

A span and a div is *exactly* the same, with one single difference. The div by default is display:block and the span by default is display:inline. Try using spans, as I did in the sample code. You'll be happy you did.