1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda ¿Como posicionar un div?

Tema en 'HTML y CSS' comenzado por hask, 6 de Enero de 2017.

  1. hask

    hask Nuevo Miembro

    Se incorporó:
    26 de Noviembre de 2015
    Mensajes:
    21
    Me gusta recibidos:
    0
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    estudiante
    Página web:
    Saludo amigos :)
    Tengo una duda si tengo un div con position fixed, left 0 y bottom 0 que encierra a un textarea
    HTML:

    <style>
    .box {
      position:fixed;
      left:0px;
      bottom:0px;
    }
    </style>
    <div class="box">
    <textarea></textarea>
    </div>
    ¿Como hacer para cuando alguien intente escribir en el textarea, el div q lo contiene se posicione arriba del teclado del celular?
    igual al de la imagen que dejo ↓↓
    Creo que esto se hace con css? o se utiliza jquery?
    Ayuda!! :/
     

    Archivos adjuntos:

  2. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    214
    Me gusta recibidos:
    162
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Podrías anexar dentro de la clase .box > textarea un + div con clase teclado en un ejemplo más simple es:

    HTML:

    <div class="box">
    <textarea></textarea>
    <div class="teclado"> ABCDFE... </div>
    <!-- Este seria el signo + que menciones el cual se utiliza para colocar despues del elemento
         específico no dentro del elemento como puede observa... El cual sabes me imagno que
         conoces que aplica para CSS, sino ntp ya te lo mencione -->
    </div>
     
    Bueno, dado a lo anterior no se como tenga tu estructura HTML, sin embargo este una idea el cual anexe un elemento div seguido después del textarea
    lo cual puedes hacer lo siguiente:
    • Ocultar la clase teclado (div) con la propiedad display: none o puedes utilizar utilizar las prpiedades opacity: 0 y visibility: hidden y la propiedad transform: tralasteY(100%)
    • Puedes crear la funcion con JS o jQuery con el eventos click(). (este es un poco mas eficiente de utilizar ya que proporciona la funcion slideToggle(), Toggle() entre otras).
    • Posteriormente al ser clikeado el textarea tienes que mostrar el div de la clase teclado colocando lo opuesto de las propiedades que lo oculto ya sea en JS o CSS.
    • El cual tienes que establecer a la propiedad transform: tralasteY(0%) para que regrese a su posicion normal y opacity: 1 y visibility: visible. Además puedes agregarle la siguiente propiedad que te servirá para animar sino quieres utilizar que te proporcionar jQUERY, tales como la propiedad transition: all .3s ease-in-out el cual puedes variar el tiempo de animación.
    Bueno esto es una idea solamente como lo puedes hacer, no se si mencione bien o talvez :confused: tenga un error jejeje :D... Cualquier cosa mas tarde trataré de colocar un ejemplo.

    Puedes compatir el avance que tienes de tu código JS, HTML, CSS para que la comunidad pueda observar y darte una solución mejor.
     
    A hask le gusta esto.
  3. hask

    hask Nuevo Miembro

    Se incorporó:
    26 de Noviembre de 2015
    Mensajes:
    21
    Me gusta recibidos:
    0
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    estudiante
    Página web:
    te has fijado en la aplicación de messenger??
    tiene su textarea y barra de acciones abajo (subir fotos, emojis,stickers..etc)
    todo esto esta al bottom:0 de tu pantalla movil pero al querer escribir algo .. como es normal aparece el teclado de tu celular Android y arriba de este se posiciona el textarea y sus elementos y cuando quitas el focus del textarea desaparece el teclado y el textarea vuelve a su posicion normal! ! es algo confuso de explicar :(
     
  4. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    214
    Me gusta recibidos:
    162
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Si así es observe que es lo quieres hacer por ejemplo como el whatsapp cuando vas a escribir te aparece el cuadro para seleccionar las letras ..., con lo que te mencione anteriormente lo puedes realizar, usando la propiedad traslateY(100%), además mas que nada el teclado que mostrarás puedes colocarlo dentro de la clase box como mencione puedes utilizar mas elementos div si es necesario por ejemplo.

    HTML:
    <div class="box">

    <!-- position:fixed;  left:0px;  bottom:0px; -->

      <div >
           <textarea> Escriba aquí </textarea>
         <!-- Al hacer clic aquí por medio de Js puedes buscar el elemento y animar la clase teclado a traslateY(0%) -->
      </div>

      <div class= teclado>
          <!-- contenido del teclado. Puedes definir en css para esta clase el traslateY(100%)-->
      </div>

    </div>
    Además fixed es una propiedad que nunca he usado más que una vez y no recuerdo
    pero este link puede ayudarte http://www.w3schools.com/cssref/pr_class_position.asp
    y verás los ejemplo de position de esta propiedad
     
    A hask le gusta esto.
  5. hask

    hask Nuevo Miembro

    Se incorporó:
    26 de Noviembre de 2015
    Mensajes:
    21
    Me gusta recibidos:
    0
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    estudiante
    Página web:
    gracias intentaré a ver si sale lo que quiero
     
  6. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    214
    Me gusta recibidos:
    162
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    En simple vista debe de funcionar, pero talvez haga un pequeño ejemplo mas tarde no estoy seguro, u otra de la comunidad te podrá brindar otra posible solución....
     
    A hask le gusta esto.

Comparte esta página