Solved

Disable Ability to Highlight Text Within a DIV

Posted on 2004-04-02
22
1,354 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Open an ul or div with hover on a li,how? 9 36
Element alignment and word wrapping 9 60
jquery add something to a div 4 37
form button worked now it doesnt anymore 9 39
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

919 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

15 Experts available now in Live!

Get 1:1 Help Now