Tema: Mostrar div oculto desde botón "fixed"
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 14/03/2014, 04:13
quimfv
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Mostrar div oculto desde botón "fixed"
Hecho....

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>CSS Slideout</title>
  6.     <style type="text/css" media="screen">
  7.         
  8.         #slideout {
  9.             position: fixed;
  10.             top: 40px;
  11.             left: 0;
  12.             width: 35px;
  13.             padding: 12px 0;
  14.             text-align: center;
  15.             background: #6DAD53;
  16.             -webkit-transition-duration: 0.3s;
  17.             -moz-transition-duration: 0.3s;
  18.             -o-transition-duration: 0.3s;
  19.             transition-duration: 0.3s;
  20.             -webkit-border-radius: 0 5px 5px 0;
  21.             -moz-border-radius: 0 5px 5px 0;
  22.             border-radius: 0 5px 5px 0;
  23.         }
  24.         #slideout_inner {
  25.             position: fixed;
  26.             top: 40px;
  27.             left: -250px;
  28.             background: #6DAD53;
  29.             width: 200px;
  30.             padding: 25px;
  31.             height: 130px;
  32.             -webkit-transition-duration: 0.3s;
  33.             -moz-transition-duration: 0.3s;
  34.             -o-transition-duration: 0.3s;
  35.             transition-duration: 0.3s;
  36.             text-align: left;
  37.             -webkit-border-radius: 0 0 5px 0;
  38.             -moz-border-radius: 0 0 5px 0;
  39.             border-radius: 0 0 5px 0;
  40.         }
  41.         #slideout_inner textarea {
  42.             width: 190px;
  43.             height: 100px;
  44.             margin-bottom: 6px;
  45.         }
  46.         /*#slideout:hover {
  47.             left: 250px;
  48.         }
  49.         #slideout:hover #slideout_inner {
  50.             left: 0;
  51.         }*/
  52.         
  53.     </style>
  54.     <script language="JavaScript" type="text/JavaScript">
  55.     function alterna(){
  56.         var slideout=document.getElementById("slideout");
  57.         var slideout_inner=document.getElementById("slideout_inner");
  58.         if (slideout.style.left!="250px"){
  59.             slideout.style.left="250px";
  60.             slideout_inner.style.left=0;
  61.         }else{
  62.             slideout.style.left=0;
  63.             slideout_inner.style.left="-250px";
  64.         }
  65.     }
  66.     </script>
  67. </head>
  68. <body>
  69.  
  70.     <div id="slideout">
  71.         <img src="feedback.png" alt="Feedback" onClick="alterna()" />
  72.         <div id="slideout_inner">
  73.             <form>
  74.                 <textarea></textarea>
  75.                 <input type="submit" value="Post feedback"></input>
  76.             </form>
  77.         </div>
  78.     </div>
  79.  
  80. </body>
  81. </html>
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.