How to disable the feature to select a text

[Andy]

You could place an absolute positioned div within a relative positioned
div (which contains your heading) then use a 100% height by 100% width
blank image in the absolute div as your link (onclick) anchor.

This would also have the advantage of making the entire heading container
clickable and not just the text.

If you need me to mock up a working example, let me know.


Andy

Hi Stefan,

I've created a mock up for you...

http://www.microbuild.com/test/unselectable_heading.html


Hope this helps


Andy

 

[Jukka K. Korpela]

I have no fucking idea what Korpella was talking about,

You have made your cluelessness in such and other matters quite clear.

except that in his
usual pedantic way he comes over as a complete arsehole.

It remains to make my usual request that you keep using the same
anonymousness and forged address as long as you remain an insulting coward
in addition to not understanding what is being discussed.

 

[Jukka K. Korpela]

Sorry for my unclear and confusing posting.

An apology will not be accepted before you post a URL.

Yes, of course, a normal HTML table is not sortable by clicking on its
header row

Well, that's how things are, but they _could_ be otherwise, so it's not
really an "of course" matter. Browsers could be clever; they just aren't.

and in that case I wouldn't care about the "selection feature".

In what case?

I'm using javascript to make the HTML table sortable. Therefore you
can click on the header row to sort the columns.

I think many people guessed that, but we cannot really guess _how_ you make
that. It depends on your JavaScript code what is really clickable.

The practice shows that if you click on the header row to sort the
columns to often a letter or even the whole text in the header row of
the columns gets selected.

It does not happen in normal circumstances. As I wrote previously, double
click normally selects a word, triple click selects the content of a cell.
So what are really doing to cause what you describe? Or are you using some
special browser?

Now I'm trying to find a way to disable this "selection feature".

Why? The URL might reveal us why it is a problem (and how the real problem
might be solvable).

You could place an absolute positioned div within a relative
positioned div (which contains your heading) then use a 100% height by
100% width blank image in the absolute div as your link (onclick)
anchor.

It's rather pointless to make random attempts at solving a problem that has
not been identified.

 

[Andy]

Probably not ...

http://edmullen.net/temp/selected.jpg

Ed, me 'ol china.

Not sure what browser you're using but I tested my code in IE8 and FF.

I think you're actually selecting everything in your image as if you had
placed your pointer in the top left corner, click-hold and dragged it down
to the bottom right as you appear to have selected the whole heading row and
not just the text.

Try selecting a portion of a heading TEXT (eg HEADING >ING O< NE) which will
confirm that in your browser you can select the heading TEXT.


Andy

 

[Stefan Mueller]

English is not my native language - what you've surely realized.
But is it really so hard to understand what I'm talking about? It
seems that at least Andy understands my problem.

It doesn't matter how I sort the table. You just click on the header
row and the table gets sorted with a javascript. However, that's not
my problem.
My "problem" is that if you click on the header of the table the text
in the header sometimes gets selected. This happens for example if you
want to sort a column descending. With the first click the table gets
sorted ascending and with a second click it gets sorted descending
(same behavior like in the Windows Explorer).
When you do these two clicks quick fast it gets identified as a
doubleclick and the header word gets selected.
That's no problem for the sort function because at the end the table
is sorted descending but the table header doesn't look so nice because
its text is selected.

I'm just looking for a way to avoid this selection and I think with
Andy's solution I'm on the right way. Many thanks, Andy!
However, in Opera you can drag the header out of the browser. That's
somehow strange.
I have to do some further testing. At the moment e.g. I don't
understand the purpose of 'rule.gif'.
I'm also thinking if with this method it could be possible to prevent
the header row from being clicked while a large table gets sorted
(sort time e.g. 5 seconds)?

Stefan

 

[Jukka K. Korpela]

English is not my native language - what you've surely realized.

Why should that matter? It's more serious that you don't know how to quote
and that you don't post a URL.

But is it really so hard to understand what I'm talking about?

Yes, because you did not post a URL.

We may have a rough idea of what you are doing, but you resist our attempts
at helping you.

HAND. HTH.

 

[Jonathan N. Little]

Also, since removing the img leaves nothing for the a to wrap around,
I'd move the call to the sort function into an onClick handler on the
inner div.

For example:

<http://download.camelbones.org/testpage/unselectable_heading.html>

As Ed stated, just how is your example not selectable?

<http://www.littleworksstudio.com/temp/usenet/alt.html.20091222.jpg>

 

[Jonathan N. Little]

I never claimed it was perfect! Given the nature of web browsers,
there's no foolproof way to completely prevent a user from selecting
the header text - *especially* a user who's technically inclined and
determined to do so.

An imperfect solution can still be useful though. The method shown does
help keep a user from accidentally selecting the header text. That's
pretty much the best that can be achieved here.

First of all I did nothing special, I just dragged and selected, your
"fix" did nothing at all. Secondly, the point is it is a fool's errand,
it is just not how HTML works. I guess the OP could use Flash if he
wishes to "defeat the user"...

 

[freemont]

First of all I did nothing special, I just dragged and selected, your
"fix" did nothing at all. Secondly, the point is it is a fool's errand,
it is just not how HTML works. I guess the OP could use Flash if he
wishes to "defeat the user"...

Jonathan's right. The second example has lost something. One can select
text normally there. On the first example from Andy, attempting to select
the heading text from the vicinity of the headings themselves fails,
because you end up dragging an image instead. (However, on the first
example, the heading text is still selectable by selecting any area above
or below the headings and dragging over the headings, too.)

 

[dorayme]

Did you read Wired's recent story about Duke Nukem Forever? The game's
producer was so focused on creating the "perfect" game that he refused
to ship anything less. As a result, they ended up not shipping anything
at all.

Darwin nearly went the same way...

 

[rf]

English is not my native language - what you've surely realized.
But is it really so hard to understand what I'm talking about? It
seems that at least Andy understands my problem.

It doesn't matter how I sort the table. You just click on the header
row and the table gets sorted with a javascript. However, that's not
my problem.
My "problem" is that if you click on the header of the table the text
in the header sometimes gets selected. This happens for example if you
want to sort a column descending. With the first click the table gets
sorted ascending and with a second click it gets sorted descending
(same behavior like in the Windows Explorer).
When you do these two clicks quick fast it gets identified as a
doubleclick and the header word gets selected.
That's no problem for the sort function because at the end the table
is sorted descending but the table header doesn't look so nice because
its text is selected.

Then after you have finished sorting remove any selection from the page,
usually done by obtaining the selection and collapsing it.

http://www.quirksmode.org/dom/range_intro.html has a good discussion about
ranges and how they work in different browsers (IE and all others).

 

[dorayme]

I finally realized (I think) what the OP was concerned about.

You mean it was not completely obvious from the very beginning? I wonder

That a
user whose mouse skills are challenged might move the mouse while
clicking a column heading to sort the table and, inadvertently, select
some text.

So what? What's the harm? Oh, ok, it might offend my or the OP's sense
of elegeance in application. Still? In this case isn't the cure maybe
worse than the disease?

Don't ask all these difficult and pertinent questions Ed, it could lead
to pedantry...

That reminds me of something else that could lead to something:

<http://dorayme.netweaver.com.au/jokes/dancing.html>

 

[dorayme]

The OS? Or Charles? Not sure what you mean.

Charles... he delayed publishing till his hand was forced by a
surprising event...

 

[Stefan Mueller]

In your JS sorting function, check the value of a flag variable, for
example "isSorting". If it's 1, don't begin a new sort. Otherwise, set
it to 1, begin a new sort, then set it back to 0 when the sort is done.

Good idea but unfortunately it doesn't work.
You click on the header, isSorting is 0, will be set to 1 and the
sorting begins.
If you click now another header (while the sorting is performing) the
browser caches your click and is not able to check the value of
isSorting.
When the sorting has finished, isSorting will be set to 0. Now the
browser does what's in his cache. The next sorting starts.

Visual Basic knows the command DoEvents which passes control to the
operating system. Control is returned after the operating system has
finished processing the events in its queue and all keys in the
SendKeys queue have been sent.

No idea if there exists a similar command in javascript.

Stefan

 

[Andy]

I've a HTML table with several columns. If you click on the header of
a column the appropriate column gets sorted.
If you move the mouse while clicking the header or you even double
click the header the text in the header gets selected.

Is there any possibility to disable this feature so that the text in
the header never gets selected?

Hi Stefan,

I have now come up with another solution which is both simple and elegant.
I've only tested it in IE and FF so you'll have to wait and see if it gets
shot down by the nay-sayers

Anyhoo, here's the link...

http://www.microbuild.com/test/unselectable_table.html

.... the secret is in the <table> element although you could apply it to the
<body> element to make none of the page selectable.


Andy

 

[Stefan Mueller]

I didn't know that would happen. But something like this might fix it:

    var isSorting = false;

    function sortCol(col)
    {
        ...
        isSorting = false;
    }

    function clickHandler(event)
    {
        if (isSorting) return;
        isSorting = true;
        ...
        setTimeout(function() {sortCol(col);}, 1);
    }

If that doesn't work, you could do something like this:

    var sorting = [0, 0];

    function clickHandler(event)
    {
        if (event.timeStamp > sorting[0] && event.timeStamp < sorting[1])
            return;

        sorting[0] = event.timeStamp;
        // sort the column here...
        sorting[1] = Date.getTime();
    }

The solution with 'setTimeout' doesn't work in my case because the
browser doesn't react to any click while the sort function is running
(even if I use 'setTimeout' for the sort function).
However the solution with the time stamp is quite good. Many thanks!

At the end of the sort function I do
sort_end_time = new Date().getTime();
and at the beginning of the sort function I check how much time has
passed after the sort function finished last time
if ((new Date().getTime() - sort_end_time) > 300) {

In this example you have to wait 300 milliseconds before you can sort
the next column. Therefore if you click on a column before the running
sort function has finished doing its job the value of '(new Date
().getTime() - sort_end_time)' is less than 300 milliseconds and the
clicked column will not get sorted.
The problem I have now is that when the last javascript command
'sort_end_time = new Date().getTime();' is executed the browser needs
some time to redraw (refresh) the table on the screen. If the table
has only a couple of rows then it takes only some milliseconds but if
the table has e.g. 2000 rows it takes in IE more than 1000
milliseconds.
Therefore the result of '(new Date().getTime() - sort_end_time)' is
always greater than 300 milliseconds.

Is there any possibility, any event where I can execute the command
'sort_end_time = new Date().getTime();' just after the browser is
ready again (after the refresh)? In my case the command 'sort_end_time
= new Date().getTime();' is executed before the browser starts the
redraw (refresh).

Stefan

 

[Stefan Mueller]

Also, since removing the img leaves nothing for the a to wrap around,
I'd move the call to the sort function into an onClick handler on the
inner div.

For example:

    <http://download.camelbones.org/testpage/unselectable_heading.html>

sherm--

Great, you example works perfect in IE and FF.
Unfortunately it doesn't work in Opera. No idea why but I can live
with it.

Many thanks
Stefan

 

[Neredbojias]

Great, you example works perfect in IE and FF.
Unfortunately it doesn't work in Opera. No idea why but I can live
with it.

A number of things don't work well in Opera, best css-parsing browser
or not. That could be why it's barely 1% popular, if still that.

 

[Stefan Mueller]

I've created a mock up for you...

http://www.microbuild.com/test/unselectable_heading.html

Hope this helps

Many thanks. It works perfect in IE and FF but unfortunately not in
Opera. In Opera you can move the header title to the desktop.

Stefan

 

[Bob]

I've a HTML table with several columns. If you click on the header of
a column the appropriate column gets sorted.
If you move the mouse while clicking the header or you even double
click the header the text in the header gets selected.

Is there any possibility to disable this feature so that the text in
the header never gets selected?

Have you considered placing the header text onto a button? After all, a
button truly represents the behaviour you want; something which can be
clicked to generate an event. The button can be styled to not look like
a button, and whilst some browsers may still allow the text on the
button to be selected, I don't think any will select the text from
ordinary clicks or doubleclicks; which seems to be the focus of your
problem.

You might even be able to take advantage of the ability to disable a
button to prevent it being used at times; although I'm not sure that the
way events are processed by a browser will help in your desire to
disable further clicks whilst sorting is in progress since the click
will probably still be picked up after the sorting handler returns
control to the browser; perhaps a timeout-controlled flush after a sort
could fix that (i.e. ignore any clicks received within 0.5s of the sort
routine ending).