[JS] Teksten "niet" selecteerbaar maken - Softwareontwikkeling

dinsdag 11 juli 2006 12:49

Acties:

Topicstarter

Hallo allemaal,

Ik heb een vraagje, even een voorbeeld om mijn vraag uit te leggen.

stel ik heb een simpel menuutje opgebouwd uit divjes (voorbeeld)

code:

<div id="container">
  <div>Home</div>
  <div>Download</div>
  <div>Contact</div>
</div>

In de browser kan je dan dmv je muis de tekst selecteren (Home of Download bijv.). Dit wil ik dus juist voorkomen, die div moet alleen klikbaar zijn maar de tekst erin niet selecteerbaar. Ik heb al gegoogled en gezocht op GoT maar kwam voor mij niet iets bruikbaars tegen. Heeft iemand een tip voor mij :-)

Alvast bedankt,

Bphoenix

[ Voor 10% gewijzigd door bphoenix op 11-07-2006 12:52 ]

dinsdag 11 juli 2006 12:53

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

http://www.cssplay.co.uk/menus/drop_examples.html

http://support.microsoft.com/?kbid=318361

3 sec. googlen.
Ofwel:

HTML:

1
2
3

<script type="text/javascript">
    document.body.onselectstart = function () { return false; };
</script>

HTML:

1
2
3

<body onselectstart='return false;' ondrag='return false;'>
...
</body>

Voila.

[ Voor 98% gewijzigd door RobIII op 11-07-2006 12:58 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 11 juli 2006 12:58

Acties:

bphoenix

Topicstarter

RobIII schreef op dinsdag 11 juli 2006 @ 12:53:
http://www.cssplay.co.uk/menus/drop_examples.html
http://support.microsoft.com/?kbid=318361

3 sec. googlen.
Ofwel:
HTML:
1
2
3
<script type="text/javascript">
    document.body.onselectstart = function () { return false; };
</script>
Voila.

wat ik aan de bovenste site heb beats me, want daar kan ik gewoon tekst selecteren in de menu's maar aan die microsoft website heb ik wel iets. En is het misschien mogelijk dat ik een google cursus bij je krijg dan

He bedankt $_/-\o_$

dinsdag 11 juli 2006 12:59

Acties:

BasieP

en als dat nou ook zou werken voor FF zou het mooi wezen, maar dat doet het dus niet

IE only 'fix' is dit..

[ Voor 14% gewijzigd door BasieP op 11-07-2006 12:59 ]

This message was sent on 100% recyclable electrons.

dinsdag 11 juli 2006 12:59

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

bphoenix schreef op dinsdag 11 juli 2006 @ 12:58:
[...]

wat ik aan de bovenste site heb beats me, want daar kan ik gewoon tekst selecteren in de menu's maar aan die microsoft website heb ik wel iets. En is het misschien mogelijk dat ik een google cursus bij je krijg dan

He bedankt $_/-\o_$

Google cursus:
http://www.google.com/sea...&q=html+prevent+selection

BasieP schreef op dinsdag 11 juli 2006 @ 12:59:
en als dat nou ook zou werken voor FF zou het mooi wezen, maar dat doet het dus niet
IE only 'fix' is dit..

Cascading Stylesheet:

#element-not-to-be-selected {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

[ Voor 29% gewijzigd door RobIII op 11-07-2006 13:03 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 11 juli 2006 12:59

Acties:

bphoenix

Topicstarter

BasieP schreef op dinsdag 11 juli 2006 @ 12:59:
en als dat nou ook zou werken voor FF zou het mooi wezen, maar dat doet het dus niet

dan ga ik daar nog even verder naar zoeken

want dat is een must haha

dinsdag 11 juli 2006 13:00

Acties:

Garyu

Hmm, je hebt ook al nagedacht over de non-usability van het niet-selecteerbaar maken van tekst?

It's Difficult to Make Predictions - Especially About the Future

dinsdag 11 juli 2006 13:02

Acties:

Raynman

Ik vraag me inderdaad ook af waarom die tekst niet geselecteerd zou mogen worden? Wat bereik je ermee (behalve geïrriteerde users) ?

En hoe ga je het klikbaar maken? Gewoon netjes met normale links of wil je de navigatie (behoorlijk belangrijk normaal gesproken) afhankelijk maken van javascript?

Verder is een lijst (bijv. ul) prima voor het het opbouwen van een menu (menu is niks anders dan een lijst met links). Je moet ff de standaard opmaak weghalen met CSS en dat is niet voor elke browser hetzelfde, maar wel prima te doen.

dinsdag 11 juli 2006 13:03

Acties:

bphoenix

Topicstarter

Garyu schreef op dinsdag 11 juli 2006 @ 13:00:
Hmm, je hebt ook al nagedacht over de non-usability van het niet-selecteerbaar maken van tekst?

Ik ben op het moment bezig met een filemanager, die nagenoeg op Verkenner van Windows moet gaan lijken ik wil dus even kijken hoe het functioneert als ik dat doe. Mocht het niet lekker werken zijn gaat het er uiteraard weer vanaf

maar wil het iig geprobeerd hebben

dinsdag 11 juli 2006 13:04

Acties:

bphoenix

Topicstarter

numlockrondje schreef op dinsdag 11 juli 2006 @ 13:02:
Ik vraag me inderdaad ook af waarom die tekst niet geselecteerd zou mogen worden? Wat bereik je ermee (behalve geïrriteerde users) ?

En hoe ga je het klikbaar maken? Gewoon netjes met normale links of wil je de navigatie (behoorlijk belangrijk normaal gesproken) afhankelijk maken van javascript?

Verder is een lijst (bijv. ul) prima voor het het opbouwen van een menu (menu is niks anders dan een lijst met links). Je moet ff de standaard opmaak weghalen met CSS en dat is niet voor elke browser hetzelfde, maar wel prima te doen.

Ik ben geen menu aan het maken:

stel ik heb een simpel menuutje opgebouwd uit divjes (voorbeeld)

dit was om even aan te tonen wat ik wilde.

dinsdag 11 juli 2006 13:04

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Zie mijn edit. Het kan in firefox / safari dus ook.

[ Voor 44% gewijzigd door RobIII op 11-07-2006 13:05 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 11 juli 2006 13:05

Acties:

bphoenix

Topicstarter

RobIII schreef op dinsdag 11 juli 2006 @ 13:04:
Zie mijn edit. Het kan in firefox / safari dus ook.

zag hem net staan idd, dank je

dinsdag 11 juli 2006 13:14

Acties:

Verwijderd

Non-usability, .. weet je wat pas unusable is, drag and drop en dan tijdens je draggen allemaal tekst geselecteer krijgen

dinsdag 11 juli 2006 13:21

Acties:

bphoenix

Topicstarter

Verwijderd schreef op dinsdag 11 juli 2006 @ 13:14:
Non-usability, .. weet je wat pas unusable is, drag and drop en dan tijdens je draggen allemaal tekst geselecteer krijgen

$_/-\o_$ $_/-\o_$ $_/-\o_$

dinsdag 11 juli 2006 13:25

Acties:

Clay

cookie erbij?

Da's gewoon een kwestie van de juiste events cancellen bij het draggen

Compleet het selecteren van content dan maar uitzetten is wel een hele erge "big gun".

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

dinsdag 11 juli 2006 13:27

Acties:

DexterDee

I doubt, therefore I might be

Ik heb snel ff een lapje html gemaakt waarmee je dit ook kan bereiken:

HTML:

<html>
<style>
#container { width : 200px; cursor: default }
#container div { z-index: 1; position: relative; width: 100%; }
#container div span { display: block; z-index: 2; position: absolute; top: 0px; left: 0px; height: 100%; width: 100% }
</style>


<div id="container">
  <div>Home<span></span></div>
  <div>Download<span></span></div>
  <div>Contact<span></span></div>
</div>

</html>

De CSS property user-select wordt slecht (lees: niet

) ondersteund in de meeste courante browsers.

Klik hier om mij een DM te sturen • 3245 WP op ZW

dinsdag 11 juli 2006 13:42

Acties:

Rowanov

Kop eens wat anders...

Wel een van de meest ranzige oplossingen die ik tot nu toe gezien heb. Extra elementen toevoegen die structureel niets toevoegen.

dinsdag 11 juli 2006 13:54

Acties:

DexterDee

I doubt, therefore I might be

Rowanov schreef op dinsdag 11 juli 2006 @ 13:42:
Wel een van de meest ranzige oplossingen die ik tot nu toe gezien heb. Extra elementen toevoegen die structureel niets toevoegen.

Dat vind ik wat hard gezegd. Ranzig is het zeker niet, het is geen vergezochte hack, helemaal CSS compliant en cross-browser met goede support voor de wat oudere versies van browsers. 'Ranziger' vind ik het onselect event afvangen, omdat dit voor de hele pagina geldt en niet alleen voor het geraakte stukje html code.

Het element wat toegevoegd is, voegt structureel een hoop toe, namelijk dat het onderliggende element niet meer selecteerbaar is. Laat dat nu toevallig de vraag zijn van de TS

Natuurlijk zou het eleganter zijn om een mooie CSS property als user-select te gebruiken, maar als je cross-browser compatible wilt zijn en ook wat oudere browsers wilt ondersteunen dan is dat nu eenmaal geen optie.

Ik moet je ook eerlijk bekennen dat ik niet echt blij ben hoe je je commentaar hebt verwoordt. Onafhankelijk van je gelijk of ongelijk, het komt op mij over alsof je wilt zeggen: 'Wat een belachelijke oplossing is dit dan?'. Dat had je ook wel iets anders kunnen zeggen lijkt me.

Klik hier om mij een DM te sturen • 3245 WP op ZW

dinsdag 11 juli 2006 14:38

Acties:

Verwijderd

Clay schreef op dinsdag 11 juli 2006 @ 13:25:
Da's gewoon een kwestie van de juiste events cancellen bij het draggen
Compleet het selecteren van content dan maar uitzetten is wel een hele erge "big gun".

Bedoelde ik ook, maar zei ik er niet bij

Op Ajaxian staat ook zo'n vette timeline, maar nee hoor .. je selecteerd continue de tekst. Zo zonde...

Pagina: 1

Reageer