Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/09/2013, 07:26
Avatar de jor_0203
jor_0203
 
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 13 años, 2 meses
Puntos: 8
quiero hacer un div que aparezca de la parte de abajo de la pagina a arriba

hola necesito su ayuda, quiero hacer un div que aparezca de la parte de abajo de la pagina y que al darle click se suba hacia arriba
mostrando lo demás que no se mostraba.
tengo uno similar pero es de lado izquierdo y yo lo quiero de la parte de abajo
pero no se colocarlo abajo para que aparezca arriba como si fuera un un div que aparece dándole a un botón

les pongo la muestra del que sale a lado izquierda que me salio,
pueden manipular mi diseño o hacer uno ustedes mas sencillo.
es como por ejemplo donde sale un chat en la pagina que visitamos que esta abajo
de la pagina, que al darle click se hace grande

aquí le dejo mi código del mio que es de la izquierda y se hable a la derecha, si funciona
pero me gustaría que fuera de abajo hacia arriba
gracias

Código PHP:
Ver original
  1. <html>
  2. <head>
  3. <title>JScript - CSS</title>
  4. <style type="text/css">
  5.      #contenido{ width:400px; height:400px;
  6.     background:#ccc;
  7.     font-family:'Segoe UI', sans-serif;
  8.      font-size:18px;
  9.      }
  10.      #contacto{ position:absolute; left:-400px;
  11.     width:456px; height:400px;}
  12.      #pestania{height:100px; width:50px; float:right;
  13.     cursor:pointer; background:#777; margin-top:50px; }
  14.     p{margin:10px}
  15. </style>
  16. <script type="text/javascript">
  17.      var x1 = -300;
  18.      var x2 = 100;
  19.      var i = 10;
  20.      function lol() {
  21.      if (x1 > 0)
  22.           Animar(-1, -400);
  23.      else
  24.           Animar(1, 10);
  25.      }
  26.  
  27.      function Animar(d, m) {
  28.           document.getElementById ("contacto").style.left = x1 + 'px';
  29.           if (x1 != m) {
  30.                x1 += i * d;
  31.                x2 += i * d;
  32.                window.setTimeout ('Animar(' + d + ',' + m + ')', 10);
  33.           }
  34.      }
  35. </script>
  36. </head>
  37. <body>
  38.      <div id="contacto">
  39.           <div id="pestania" onClick="lol()">
  40.           </div>
  41.           <div id="contenido">
  42.                <p>
  43.                <span>Nombre:</span>
  44.  
  45.                <input type="text"/>
  46.                </p>
  47.                <p>
  48.                <span>Email:</span>
  49.  
  50.                <input type="text"/>
  51.                </p>
  52.                <p>
  53.                <input type="button" value="enviar" />
  54.                </p>
  55.           </div>
  56.      </div>
  57. </body>
  58. </html>

Última edición por jor_0203; 02/09/2013 a las 07:32