Solved

Disable Ability to Highlight Text Within a DIV

Posted on 2004-04-02
22
1,360 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
Industry Leaders: 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 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

Independent Software Vendors: 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!

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

705 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