quiero hacer un div que aparezca de la parte de abajo de la pagina a arriba

jor_0203 · #1 (**permalink**) 02/09/2013, 07:26

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<html>
<head>
<title>JScript - CSS</title>
<style type="text/css">
     #contenido{ width:400px; height:400px; 
     background:#ccc; 
     font-family:'Segoe UI', sans-serif;
     font-size:18px;
     }
     #contacto{ position:absolute; left:-400px; 
     width:456px; height:400px;}
     #pestania{height:100px; width:50px; float:right;
     cursor:pointer; background:#777; margin-top:50px; }
     p{margin:10px}
</style>
<script type="text/javascript">
     var x1 = -300;
     var x2 = 100;
     var i = 10;
     function lol() {
     if (x1 > 0) 
          Animar(-1, -400);
     else
          Animar(1, 10);
     }
 
     function Animar(d, m) {
          document.getElementById ("contacto").style.left = x1 + 'px';
          if (x1 != m) {
               x1 += i * d;
               x2 += i * d;
               window.setTimeout ('Animar(' + d + ',' + m + ')', 10);
          }
     }
</script>
</head>
<body>
     <div id="contacto">
          <div id="pestania" onClick="lol()"> 
          </div>
          <div id="contenido">
               <p>
               <span>Nombre:</span>
 
               <input type="text"/>
               </p>
               <p>
               <span>Email:</span>
 
               <input type="text"/>
               </p>
               <p>
               <input type="button" value="enviar" />
               </p>
          </div>
     </div> 
</body>
</html>

PHPeros · #2 (**permalink**) 02/09/2013, 10:20

Ejem... No seria mas facil hacerlo con una transicion en css????
webkit-transition: position 3s; Esto retardaria 3seg en el cambio de posicion...Luego si lo quieres hacer con js esta bien, tambien tienes selectores avanzados en css.

jor_0203 · #3 (**permalink**) 02/09/2013, 14:41

Cita:

Iniciado por PHPeros

Ejem... No seria mas facil hacerlo con una transicion en css????
webkit-transition: position 3s; Esto retardaria 3seg en el cambio de posicion...Luego si lo quieres hacer con js esta bien, tambien tienes selectores avanzados en css.

no todos los navegadores agarran webkit, es decir creo que explorer
no agarra

PHPeros · #4 (**permalink**) 02/09/2013, 14:51

Cita:

Iniciado por jor_0203

no todos los navegadores agarran webkit, es decir creo que explorer
no agarra

Te lo ponia solo como ejemplo. Con mozilla es lo mismo pero con -moz- .El rarito del explorer directamente no funciona a no ser que la version sea 9 o superior.

vick90 · #5 (**permalink**) 02/09/2013, 14:55

Puedes usar prefijos

Código CSS:

Ver original-webkit-transition://chrome
-moz-transition://Mozilla
-ms-transition://IE
-o-transition://Opera

PHPeros · #6 (**permalink**) 02/09/2013, 14:56

Cita:

Iniciado por vick90

Puedes usar prefijos

Código CSS:

Ver original-webkit-transition://chrome
-moz-transition://Mozilla
-ms-transition://IE
-o-transition://Opera

Pero en IE cambian las propiedades y todo.

jor_0203 · #7 (**permalink**) 02/09/2013, 15:27

Cita:

Iniciado por PHPeros

Pero en IE cambian las propiedades y todo.

tu como lo arias
gracias

PHPeros · #8 (**permalink**) 03/09/2013, 05:10

Cita:

Iniciado por jor_0203

tu como lo arias
gracias

Directamente no lo haría. No está ni en el foro developer de microsoft...Hoy en día quien usa IE es porque no sabe xD.