Don't allow tab title text to be selected

[corey.gilmore]

A small one, but I don't like to have the titles of my tab selectable (eg, by a double click).

At the bottom of YAHOO.ext.TabPanel.prototype.createStripElements you'd add:

li.unselectable = "on";
li.style.MozUserSelect = "none";
li.onselectstart = function() { return false; };
li2.unselectable = "on";
li2.style.MozUserSelect = "none";
li2.onselectstart = function() { return false; };


Right before return {on: li2, off: li};

The biggest cross-browser issue is with Safari, and if you accidently drag the mouse while changing tabs, it interprets that as a selection, not a click, and the tab doesn't change. Firefox and IE don't have that issue.

[corey.gilmore]

Actually I didn't test that thoroughly enough, this works in IE, Firefox, Safari and Opera 9. At the bottom of YAHOO.ext.TabPanel.prototype.createStripElements right before the return statement add:

disableTextSelect( [em, em2] );

And you'll need this somewhere. Opera only disables text selection if you use the EM tags.

disableTextSelect = function(el) {
if( !el ) { return null; }

// internal helper to avoid writing this twice
var __noTextSelect = function( el ) {
if( el ) {
el.onselectstart = function() { return false; };
el.style.MozUserSelect = "none";
el.unselectable = "on";
}
}

if( el instanceof Array ) {
for( var i = 0, len = el.length; i < len; ++i ) {
__noTextSelect(YAHOO.util.Dom.get(el[i]));
}
} else {
__noTextSelect( YAHOO.util.Dom.get(el) );
}
}

[jack.slocum]

That would be a great addition to the Element object as well. Thanks again for your addition.

[Animal]

Add the line:


el.style.KhtmlUserSelect = "none";


To make it more cross-browser.

Can I suggest that DomHelper calls this on all created elements unless otherwise disabled?

Being able to swipe areas of text is distracting, and takes away from the application-like nature of web 2.0 apps. The new YAHOO mail interface does not allow selection.

[jack.slocum]

That's a good idea to Nige. I can add a special attribute to DomHelper, maybe "textSelection" that can be false and will crossbrowser disable text selection like stated above. Sound good?

[Animal]

Yes, default it to false to allow people to create selectable elements.

I think All YAHOO.ext.Element objects should have select disabled on construction.

[MD]

Is there a way to set unselectable() document-wide now, so that any type of text-selection over parts of the UI would be thwarted?