4 Replies Latest reply: Feb 5, 2014 10:22 AM by AMULI RSS

    how to make text unselectable ?

    AMULI Community Member
    AMULI Jan 11, 2014 10:49 AM

      Hi,

       

      Is there a way to make the text entries of an accordion unselectable, in order to avoid such situation :

       

      Capture d’écran 2014-01-11 à 19.29.18.png

       

      Gil

        • 1. Re: how to make text unselectable ?
          boxofspiders Community Member
          boxofspiders Jan 12, 2014 8:28 AM (in response to AMULI)

          Hi there,

           

          I can think of two ways to do this, the first would be to set it with a .css attribute:

          (For cross browser compatibility all three are needed)

           

          -webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */

           

          So something like:

           

          sym.$("textSymbolName").css("webkit-user-select","none");
sym.$("textSymbolName").css("moz-user-select","none");
sym.$("textSymbolName").css("ms-user-select","none");

           

          The other way and not quite so elegant would be to simply put a transparent shape over the top of the text field.

           

          Hope this helps!

           

          Only just spotted how old this post is!

          • 2. Re: how to make text unselectable ?
            AMULI Community Member
            AMULI Jan 12, 2014 2:41 PM (in response to boxofspiders)

            Thanks a lot, boxofspiders. I will try the elegant way, via a function

             

            Gil

            • 4. Re: how to make text unselectable ?
              AMULI Community Member
              AMULI Feb 5, 2014 10:22 AM (in response to boxofspiders)

              I finally tried :

               

              document.compositionReady :

               

              sym.nonSelect = function( $entree)

              {

                $entree.css( "webkit-user-select", "none");

                $entree.css( "moz-user-select", "none");

                $entree.css( "ms-user-select", "none");

              }

               

              <menuSymbol>.creationComplete :

               

              sym.getComposition().getStage().nonSelect( sym.$( '<itemID>'));

               

              But the items remain selectable :

               

              Capture d’écran 2014-02-05 à 19.03.10.png

               

              And if I drag to the left, this even makes the main content to be selected !

               

              Capture d’écran 2014-02-05 à 19.04.26.png

               

              Surely, I miss something. Any ideas ?

               

              Gil