?
Solved

Disable Ability to Highlight Text Within a DIV

Posted on 2004-04-02
22
Medium Priority
?
1,361 Views
Last Modified: 2012-06-22
Dear All,

I'm looking for a way so that the text within a <div>My Text</div> cannot be highlighted by the user.

Anyone any ideas?

Thanks,

Ben.
0
Comment
Question by:webtechy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 5
  • +3
22 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 10739332
It certainly isn't possible with CSS.

And it can't be done reliably using anything else. There might be unreliable javascript solutions out there.

Why do you want to do this? It sounds very annoying.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740451
Well, you can do it with CSS, using positioning, z-index, and a transparent gif.

<html>
<head>
<title></title>
<style type="text/css">

div#over      { position:absolute; top:0; left:0; width:100px; height:30px; z-index:1; background-image: url("clear.gif"); }
div#noselect { position:absolute; top:0; left:0; width:100px; height:30px; z-index:1; }

</style>
</head>

<body>
<div id="over"></div>
<div id="noselect">MyText</div>
</body>
</html>
0
 
LVL 17

Expert Comment

by:dorward
ID: 10740463
Oh dear, me. Yuck indeed. However, I don't think it will stop a user hitting Ctrl+A
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:webtechy
ID: 10740484
I actually found the following:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/unselectable.asp?frame=true

Thought you might be able to do it with CSS ...
0
 
LVL 17

Accepted Solution

by:
dorward earned 0 total points
ID: 10740516
You won't find that attribute in HTML <http://w3.org/TR/html4/>, and it will only work in MSIE. Other browsers will ignore it.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740529
I was thinking about that - but it appears to be IE only, so I thought the z-index would be a better way...

2 things - this should be "-1":

div#noselect { position:absolute; top:0; left:0; width:100px; height:30px; z-index:-1; }

And yes, Ctrl - A will still select the text :-)


0
 
LVL 17

Expert Comment

by:dorward
ID: 10740536
Its a really bad idea to use z-indexes of 0 or less, some browsers position elements out of sight behind the body!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740558
I wasn't aware of that...
Do you know which one's for future reference?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740561
The following will do just as well then...

div#over      { position:absolute; top:0; left:0; width:100px; height:30px; z-index:2; background-image: url("clear.gif"); }
div#noselect { position:absolute; top:0; left:0; width:100px; height:30px; z-index:1; }
0
 
LVL 17

Expert Comment

by:dorward
ID: 10740600
Not off the top of my head - the problem is easily avoided so I don't need to remember where it shows up :)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740637
Good one :-)
0
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 300 total points
ID: 10741735
This will work in IE and Mozilla. Just add to <head> of document, but it will make the text unselectable for the whole page:

<script language="JavaScript1.2">
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
0
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 300 total points
ID: 10743557
You may disable select  with this method (IE only):

<div onselectstart="return false">You can't select this text</div>

..it's quirky, though. If it adjacent to any other element it may be selectable.
0
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 300 total points
ID: 10743574
If you use the above for the entire page, your text won't be selectable (IE):

<body onselectstart="return false">
0
 
LVL 1

Assisted Solution

by:Witchazel
Witchazel earned 100 total points
ID: 10785983

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/unselectable.asp

<div UNSELECTABLE="on">My Text</div>

think this is ie only tho :)

-w
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10786166
>> If you use the above for the entire page, your text won't be selectable (IE):

I meant if you you use this (as an alternative to the script above) all text will be unselectable in the body:

<body onselectstart="return false">
0
 

Expert Comment

by:JavaHead_Jonnie
ID: 10800486
how about <div onselectstart="return false">Text</div>?
0
 

Assisted Solution

by:JavaHead_Jonnie
JavaHead_Jonnie earned 100 total points
ID: 10800493
actually,
<div onselectstart="return false" unselectable="on">Text</div>
might be better...
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10800645
Hi webtechy,

Thanks for accepting my answer as assisting in your question, but why the B grade?

Please see more about grading here:

http://www.experts-exchange.com/Web/Web_Languages/CSS/help.jsp#hi73

An answer that says, "it can't be done, or it can be done, with some limitations", is an acceptable answer. If you would like to change the grade to an A, please post here, and I can have moderator change it for you.
0
 

Expert Comment

by:JavaHead_Jonnie
ID: 10821087
thanks for clearing that up netminder
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10824085
Thanks Netminder
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month12 days, 9 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question