capa que aparece y desaparece

jor_0203 · #1 (**permalink**) 09/12/2011, 05:29

capa que aparece y desaparece, esto funciona de maravilla, solo que no me gusta que selecciona la palabra y cuando le doy varios clicks selecciona todo el parrafo, esto es muy molesto.
de casualidad no saben como quitarlo este tipo de seleccion
gracias

Código Javascript:

Ver original<html>
 <head>
  <script type="text/javascript">
            function toggle(sDivId) {
                var oDiv = document.getElementById(sDivId);
                oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
            }
  </script>
    </head>
 <body>
<div style="background-color: blue; color: white; font-weight: bold; padding: 10px; 
 cursor: pointer;"
 onclick="toggle('capa')">
selecciona esto y te daras cuenta que seleciona la palabra, como si tuviera un fondo y si le das varios click se       selecionas todo, como se lo pudo quitar
 </div>
 <div style="border: 3px solid blue; height: 100px; padding: 10px" id="capa">
 muestro el contenidos</div>
        
    </body>
</html>

maycolalvarez · #2 (**permalink**) 09/12/2011, 07:31

realmente eso corresponde al comportamiento normal de muchos navegadores, desconozco si hay forma de evitarlo, y de todas formas ¿crees factible que un usuario aplique tal comportamiento, a lo sumo darán un click para mostrar/ocultar?

zerokilled · #3 (**permalink**) 09/12/2011, 08:14

buenas...
de haber forma de evitarlo, lo hay. sin embargo, que sea compatible entre navegadores es otro cuento. por ejemplo, hay un evento no estandar llamado onselectstart que me funciona en chrome e iexplorer8. en firefox aparentemente no existe un evento similar. en cambio, tienes el estilo -moz-user-select para controlar el aspecto visual cuando se realiza una selección. en fin, como dijo @maycol, un usuario común no haría dos click consecutivos para esconder y mostrar el elemento. habría que estar tan aburrido como para jugar de esa manera.

maycolalvarez · #4 (**permalink**) 09/12/2011, 08:19

wow, sabía de la existencia de algo similar en IE pero ni idea que Chrome lo implementara, ni mucho menos el css en FF!!!.

y en efecto, dudo mucho que un usuario juegue así

Artificium · #5 (**permalink**) 09/12/2011, 21:17

Pues yo te digo que no deberías hacer eso por cuestiones de usabilidad. Seguro a ti te molesta bastante, pero a los demás seguro que no porque así son la mayoría de navegadores. Además si necesitan copiar alguna parte de tu contenido se lo estarías dificultando. Suerte!

jor_0203 · #6 (**permalink**) 09/12/2011, 23:55

ya encontré la solución y es ponerlo en url, espero que le sirva
se despide su amigo jorge

Código Javascript:

Ver original<html>
    
<head>
<script type="text/javascript">
                function toggle(sDivId) {
                    var oDiv = document.getElementById(sDivId);
                    oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
                }
      </script>
      
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
<!--
body {
    background-color: #FFFF00;
}
.ss {
    text-decoration: none;
}
-->
        </style>
</head>
     <body>
    <div style="background-color: blue; color: white; font-weight: bold; padding: 10px;
     cursor: pointer;"
     onclick="toggle('capa')"> <a href="#" class="ss" onClick="toggle('capa')">
    selecciona esto y te daras cuenta que seleciona la palabra, como si tuviera un fondo y si le das varios click se       selecionas todo, como se lo pudo quitar </a>
     </div>
     <div style="border: 3px solid blue; height: 100px; padding: 10px" id="capa">
     muestro el contenidos</div>
           
        </body>
    </html>