Solved

Disable Ability to Highlight Text Within a DIV

Posted on 2004-04-02
22
1,356 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
  • 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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 75 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 75 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 75 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 25 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 25 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
A simple Float not working. 5 19
Why a span is lower 2 18
css selector 1 16
DataTables + iCheck + pagination Issue 2 15
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
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 …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

813 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now