I have most of my web-app set as unselectable. Using div as an example:
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
The amazing thing is that I can still select most of the page by starting the select along the left edge-- the DOM inspector tells me I'm selecting outside of any DOM element itself, and am selecting from inside the top level HTML element. I tried being silly and setting it as:
html {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
...which yielded no effect. I'm being a perfectionist here, but at this point I'm just curious-- how can you disable this entirely? The body is already 100% width. I don't understand why I can click outside it.
Also, this only happens in Firefox.
Throw a div as an overall wrapper use absolute positioning with negative top bottom left and right say -150 top -150 bottom then padd the content back in with 120 120 use a scroll top observer or add a sliding header and the additional 60 of space can function as default animation when there is a collapse (switching padding to margining
It should work but can be a pain in the neck if you aren't using the extended regions for headers layering or images.
Hope it helps.
Sincerely
Jason
Related
I need to identify clicked word (onclick on any word in the screen I should detect that word) I'm able to get it using jQuery. I want to exclude clicking for white space.
i.e in the above, when I click anywhere between word "together" and down arrow its selecting word together but my requirement is nothing to be selected in this scenario.
I'm using https://github.com/megahertz/jquery.get-word-by-event library for word tapping.
Using CSS you can disable the text select in the html document. So which text you want, not to be selected keep it in the div-tag and then implement the below CSS style object to the div-tag:
div{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Hope this solves your problem.
Additional Changes with respect to below comment:
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Implementing this css on body disables all the text or any other HTML object from being selected.
You can use the following after clicking. As in after clicking pass the work through the following
function hasWhiteSpace(s) {
return /\s/g.test(s);
}
You can easily find out whether the selection is blank or has words. This would return if the white space is only selected else false.
I want to create an element within a table which is not copyable (because of better readability).
In Firefox it is working correctly. If you select everything and copy it, the specific text element is not beeing copied.
Sadly in Chrome this doesn't work. Indeed the browser does not select the text, but copies it.
<td unselectable="on" id="unselectable">Test2</td>
#unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Example: http://jsfiddle.net/pXAeB/
Is there a solution to this problem?
Demo Fiddle
Add the below to your table element:
unselectable='on'
onselectstart='return false;'
onmousedown='return false;'
To your table element. Note that for Chrome, most of the time just the inclusion of onselectstart='return false;' should suffice.
I have some source code in a <pre><code> with line numbers in a separate <div>. When the text is selected, the line numbers come with it, and are subsequently copied. Is there any way to prevent the line numbers from being a part of the selection, even if I select the elements above and below the source code block?
I'd like to avoid JavaScript for the benefit of people who browse with it off. (With JavaScript, I'd add a button to hide the line numbers).
unselectable="on" and the various vendor-specific user-select CSS properties did not work; the numbers are still selected and copied.
Give the element you want to prevent selection of an id.
Then put this in your CSS:
#id-name {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-moz-selection {
background: transparent;
}
::selection {
background: transparent;
}
I am trying to write a selector like this, but to no success:
.something::after::selection
Basically I am already using ::after to inject some content, namely an image. But I want to prevent the user from being able to "select" this image and get an ugly blue back-shadow.
Normally I can prevent this with the following:
.something::selection
{
background-color: transparent;
}
But it does not seem to combine well with ::after.
Has anyone tried this before or have a solution?
No, in firefox I'm 100% sure that you can't change that effect on selected images, is system-specific, and not customizable yet
*edited
To prevent images to be selected you can use following css:
img {
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Also see the updated jsfiddle.
With ::after see this jsfiddle.
Here an example text
Label: Some-text-here
How can i have it so when i triple click the line it tries to highlight only is Some-text-here rather then the full line? I could swear i seen it done before with css i just cant think of a way
<span style="float:left">Label</span><span style="float:left">Some-text-here</span>
JsFiddle.
If you use floats to position the texts next to each other they'll still be considered separate paragraphs and achieve the desired result.
<html>
<body>
<div style="float:left">Label:</div>
<div style="float:left">some text here</div>
</body>
</html>
This is somewhat of an extension to AXO's answer, but the perfect CSS rule would be user-select: contain;, which will prevent selections from crossing the element boundary. This value, however, is only supported in IE/Edge.
An interesting property though of user-select: all; and user-select: none; is that all will highlight the entire element with a single click, and all can be put inside none, creating a similar effect to contain if you put user-select: all; on the desired element within a parent element with user-select: none;. This is especially useful if you also have bare text in between the elements which you want to prevent being selected, but note that with this solution, the selection can still expand beyond the parent element, skipping over it, so it's not truly containing the selection.
Example:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.selectall {
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
}
<p class="unselectable">Some extra text: <span class="selectall">ID-12345_678</span></p>
In some situations it may also be appropriate to exempt some parts of text from selection. The experimental user-select style can be used for that purpose, like so:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<span class='unselectable'>Label: </span>some text here
The simplest and most compatible approach that responds to single, double and triple clicks as expected is on the snippet below. See more here: user-select - CSS: Cascading Style Sheets | MDN
<span style="user-select: none">Label: </span><span style="user-select: text">Some-text-here</span>