HTML/CSS- How to code for UNSELECTABLE text

killer_cow · 08-13-2005, 09:55 AM

Hey guys,

Q2. for today.

How would I go about making text in an html page unselectable?

My problem is that in this javascripted menu I've just made (see previous post), when someone clicks on the 'Menu' label, that expands/collapses the menu, if he/she clicks on it and it selects the Menu text, then the menu freezes and goes crazy (flicking collapsed and expanded really quickly). :S

Now, I've seen Microsoft's 'Unselectable' attribute, but this only works in IE. Rubbish!

This unselectable attribute stops this problem I have perfectly! So please if anyone knows a cross-cleint/browser solution, please post it here!

Your time and help is much appreciated.

KC

**greffov** · 08-13-2005, 12:09 PM

maybe you should just lay an div over the text which is transparent, so the actual text is hidden and won't be selectable?

killer_cow · 08-14-2005, 08:51 AM

Hmmmm, interesting.

That wouldn't have occured to me at all I don't think. But sounds like it could def. work!

Cheers gref!

killer_cow · 08-14-2005, 09:24 AM

Weee bit of help please....

HTML Code:

<!--Menu Header-->

<div style="STYLES" title="Expand" onClick="DO MENU STUFF">+ Menu</div>

<!--//Menu Header-->

How can I lay a DIV ontop of the Menu header DIV, Im not completely up to par with working with DIVs just now...

I've tryed working like this:

HTML Code:

<!--Menu Header-->

<div style="z-index:2; ">
<div style="STYLES" title="Expand" onClick="DO MENU STUFF">+ Menu</div>
</div>

<!--//Menu Header-->

One thing to note is, I can't use position:absolute, because I need the menuheader to be able to move, as I have several of these headers underneith each other, and when one is 'opened' the others below it are pushed further down the page.

Any ideas?

Thanks in advance.

**greffov** · 08-15-2005, 07:57 AM

hmmm, without position:absolute I think it'll be a hard task...

Maybe it makes more sense to fix why the menu goes crazy if you select the text. Is there a listener for that object active? Can't you reduce that to only the + or - or something?

killer_cow · 08-16-2005, 04:35 PM

Hmmm I'll look into this, but really no one got any other ideas for just making the text unselectable?

I find it hard to believe there hasnt been a standardised method of doing this...

...but oh well, c'est la vie!

**greffov** · 08-17-2005, 11:00 AM

I still like to know why it does it, because making text unselectable is really unportable, and unliberal too.

08-13-2005, 09:55 AM	#1 (permalink)
killer_cow Moo indeed. Join Date: Dec 2002 Location: In a grassy field :D Posts: 140	HTML/CSS- How to code for UNSELECTABLE text Hey guys, Q2. for today. How would I go about making text in an html page unselectable? My problem is that in this javascripted menu I've just made (see previous post), when someone clicks on the 'Menu' label, that expands/collapses the menu, if he/she clicks on it and it selects the Menu text, then the menu freezes and goes crazy (flicking collapsed and expanded really quickly). :S Now, I've seen Microsoft's 'Unselectable' attribute, but this only works in IE. Rubbish! This unselectable attribute stops this problem I have perfectly! So please if anyone knows a cross-cleint/browser solution, please post it here! Your time and help is much appreciated. KC __________________

08-13-2005, 12:09 PM	#2 (permalink)
greffov Da House Nerd Join Date: Dec 1969 Location: One CPU Lane Posts: 3,512	maybe you should just lay an div over the text which is transparent, so the actual text is hidden and won't be selectable? __________________ Linux virusscanner detected a virus: Windows 95 ... delete [Y/n] y ~ ~ :wq

08-14-2005, 08:51 AM	#3 (permalink)
killer_cow Moo indeed. Join Date: Dec 2002 Location: In a grassy field :D Posts: 140	Hmmmm, interesting. That wouldn't have occured to me at all I don't think. But sounds like it could def. work! Cheers gref! __________________

08-14-2005, 09:24 AM	#4 (permalink)
killer_cow Moo indeed. Join Date: Dec 2002 Location: In a grassy field :D Posts: 140	Weee bit of help please.... HTML Code: <!--Menu Header--> <div style="STYLES" title="Expand" onClick="DO MENU STUFF">+ Menu</div> <!--//Menu Header--> How can I lay a DIV ontop of the Menu header DIV, Im not completely up to par with working with DIVs just now... I've tryed working like this: HTML Code: <!--Menu Header--> <div style="z-index:2; "> <div style="STYLES" title="Expand" onClick="DO MENU STUFF">+ Menu</div> </div> <!--//Menu Header--> One thing to note is, I can't use position:absolute, because I need the menuheader to be able to move, as I have several of these headers underneith each other, and when one is 'opened' the others below it are pushed further down the page. Any ideas? Thanks in advance. __________________

08-15-2005, 07:57 AM	#5 (permalink)
greffov Da House Nerd Join Date: Dec 1969 Location: One CPU Lane Posts: 3,512	hmmm, without position:absolute I think it'll be a hard task... Maybe it makes more sense to fix why the menu goes crazy if you select the text. Is there a listener for that object active? Can't you reduce that to only the + or - or something? __________________ Linux virusscanner detected a virus: Windows 95 ... delete [Y/n] y ~ ~ :wq

08-16-2005, 04:35 PM	#6 (permalink)
killer_cow Moo indeed. Join Date: Dec 2002 Location: In a grassy field :D Posts: 140	Hmmm I'll look into this, but really no one got any other ideas for just making the text unselectable? I find it hard to believe there hasnt been a standardised method of doing this... ...but oh well, c'est la vie! __________________

08-17-2005, 11:00 AM	#7 (permalink)
greffov Da House Nerd Join Date: Dec 1969 Location: One CPU Lane Posts: 3,512	I still like to know why it does it, because making text unselectable is really unportable, and unliberal too. __________________ Linux virusscanner detected a virus: Windows 95 ... delete [Y/n] y ~ ~ :wq

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode