Mostrar DIV en el bottom de la página

[xinxan22]

Buenas tardes,

me gustaría saber como puedo mostrar una DIV en el bottom de la página teniendo en cuenta el scroll actual que hay en la página.

Actualmente estoy mostrando una div con "bottom: 0" pero cuando la página tiene scroll no me lo muestra debajo del todo sino por el medio.

Gracias,

Saludos

[PHPeros]

Código Javascript:

elemento.style.top = document.body.offsetHeight+"px";
 

[Dalam]

Si utilizas JQuery mirate este enlace bottom footer con jquery/

[xinxan22]

Iniciado por Dalam

Si utilizas JQuery mirate este enlace bottom footer con jquery/

Gracias,

Aunque no estoy usando header ni footer, y a demás, és una DIV que muestro en varios sitios, varias páginas en la parte inferior derecha, como si fuera una notificación

[xinxan22]

Iniciado por PHPeros

Código Javascript:

elemento.style.top = document.body.offsetHeight+"px";
 

Gracias.

Me lo manda al final de todo de la página y me interesaría que me lo mostrará justo dónde estoy visualizando, es decir, algo que sea bottom + posición del scroll

[jonni09lo]

Hola no se como lo estas trabajando con css ni que propiedades tenga, pero puedes añadir estas propiedades al div que quieres posicionar:

Código CSS:

position:fixed;
bottom:0;
top:100%;
 

Saludos

[marlanga]

Para pegar el footer abajo del todo de la web, lo mejor es usar CSS puro.

Aquí explican cómo se hace. Se reuiqre tener una estructura de la web determinada.
http://www.cssstickyfooter.com/es/

[xinxan22]

CSS:

Código HTML:

#id_etiqueta_informativa{
  background: #EEE;
  border: 1px solid #CCC;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px; 
  bottom: 0;
  box-shadow: rgba(0,0,0,0.3) 5px 5px 10px;
  font: bold 16px 'Arial';
  margin: 20px; 
  opacity: 0;
  padding: 20px;  
  position: absolute;
  right: 0; 
  transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -khtml-transition: all 1.5s ease;
  z-index: 0;
}

Javascript:

Código HTML:

function muestra_div(texto){

  document.getElementById('id_etiqueta_informativa').innerHTML = texto;

  $("#id_etiqueta_informativa").css({ opacity: 1, "z-index": 999999 });

}

[xinxan22]

Este es el código que tengo


CSS:

Código HTML:

#id_etiqueta_informativa{
  background: #EEE;
  border: 1px solid #CCC;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px; 
  bottom: 0;
  box-shadow: rgba(0,0,0,0.3) 5px 5px 10px;
  font: bold 16px 'Arial';
  margin: 20px; 
  opacity: 0;
  padding: 20px;  
  position: absolute;
  right: 0; 
  transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -khtml-transition: all 1.5s ease;
  z-index: 0;
}

Javascript:

Código HTML:

function muestra_div(texto){

  document.getElementById('id_etiqueta_informativa').innerHTML = texto;

  $("#id_etiqueta_informativa").css({ opacity: 1, "z-index": 999999 });

}

[xinxan22]

Iniciado por marlanga

Para pegar el footer abajo del todo de la web, lo mejor es usar CSS puro.

Aquí explican cómo se hace. Se reuiqre tener una estructura de la web determinada.
http://www.cssstickyfooter.com/es/

Gracias.

como ves me gustaría que funcionara invocando a la función "muestra_div" y sin tener que crear otras divs en la página ya que lo usaré en varios sitios que no sé como será su contenido

[jonni09lo]

No dupliques mensajes, para ello esta la opcion de editar. Segundo no estás haciendo caso de lo que te dije ni de lo que dijo @marlanga, como quieres entonces avanzar? no vamos a darte código hecho

Aunque claro puede haber algún buen "samaritano" que lo haga

Revisa lo que se te sugiere y veras que aprendes mas.

Saludos

[xinxan22]

Iniciado por jonni09lo

Código CSS:

position:fixed;
bottom:0;
top:100%;
 

Saludos

Gracias.

No me funciona bien de esta manera. Tendría que ser algo como "top" + "scroll" o "bottom" + "scroll"

[xinxan22]

Iniciado por jonni09lo

No dupliques mensajes, para ello esta la opcion de editar. Segundo no estás haciendo caso de lo que te dije ni de lo que dijo @marlanga, como quieres entonces avanzar? no vamos a darte código hecho

Aunque claro puede haber algún buen "samaritano" que lo haga

Revisa lo que se te sugiere y veras que aprendes mas.

Saludos

Perdón por el post dubplicado, quería hacer una citación y editar/borrar el anterior pero no me ha dejado hacerlo


Volviendo al tema, estoy probando todo lo que me dais pero no me da el resultado que me interesa.


Lo que me interesa es mostrar esa div en un momento determinado llamando a la función que he puesto anteriormente y, si la página no tiene scroll, se muestra perfectamente en el botom = 0. El problema viene que si la página tiene scroll, y estoy abajo del todo (o en el medio...) la div se visualiza en la parte superior o a media pantalla.

Mi idea de lo que podría ayudarme es algo para sumarle a bottom = 0 ( o top) el scroll actual de la página.

He copiado el código CSS y JavaScript de como lo he estado haciendo hasta ahora pero no he incluido ningún código vuestro ya que al probarlo no me ha dado el resultado esperado y ya he ido poniendo cuales eran los resultados.

Perdón por las molestias.

Saludos

[marlanga]

Quítale el top:100% al código que te ha pasado jonni09lo. Añádele un z-indez:9999 para que el div siempre esté por encima de todos los demás. Debería funcionar, o tu código tiene algo raro.

[PHPeros]

Iniciado por marlanga

Añádele un z-indez:9999

z-index: 9999;

[xinxan22]

Iniciado por marlanga

Quítale el top:100% al código que te ha pasado jonni09lo. Añádele un z-indez:9999 para que el div siempre esté por encima de todos los demás. Debería funcionar, o tu código tiene algo raro.

Se muestra en la misma posición.


En realidad la div está oculta, con opacidad = 0, z-index: 0....

y luego la muestro:

Código HTML:

$("#id_etiqueta_informativa").css({ opacity: 1, "z-index": 999999 });

El problema es que se está mostrando en el mismo sitio fija

[jonni09lo]

La pregunta del millón SI cambiaste position:absolute por position:fixed ????

Saludos

[xinxan22]

Iniciado por jonni09lo

La pregunta del millón SI cambiaste position:absolute por position:fixed ????

Saludos

Sí hice primero lo que me dijiste y me lo mandó abajo del todo de la página independientemente si estaba arriba del todo.


Luego probé lo de marlanga y sale tal cual lo tengo actualmente.


Estoy probando lo siguiente que me funciona a medias:

Código HTML:

  scroll_pagina = $(window).scrollTop();
  nuevo_top = scroll_pagina + ($(window).height() - 200 );

  if(scroll_pagina==0) 
      $("#id_etiqueta_informativa").css({ opacity: 1, "z-index": 999999 });
  else                 
      $("#id_etiqueta_informativa").css({ opacity: 1, "z-index": 999999, top: nuevo_top });

Me da el resultado que quiero pero, el efecto visual no es el que me gustaría, es decir, me gustaría que apareciera en la parte inferior y haciendo esto lo que hace es moverse de la parte superior a la parte inferior (imagino que es porque en el CSS está declarado bottom:0 y con javascript le digo que top vale el scroll de la página, así que se mueve para abajo).

Debería hacer al revés, que esté abajo del todo y que suba, creo que con lo de top:100%

[xinxan22]

Ya tengo la solución.

La cosa quedaría así:

Javascript:

Código HTML:

function muestra_div(texto){

  document.getElementById('id_etiqueta_informativa').innerHTML = texto;

  margen_bottom = 150;

  nuevo_top  = $(window).scrollTop() + ( $(window).height() - margen_bottom );
  nuevo_top1 = $("#id_etiqueta_informativa").offset().top - margen_bottom;

  if($(window).scrollTop()==0) 
      $("#id_etiqueta_informativa").css({ opacity: 1, "z-index": 999999, top: nuevo_top1 });
  else                 
      $("#id_etiqueta_informativa").css({ opacity: 1, "z-index": 999999, top: nuevo_top });

}

Lo encontré de las páginas que me habeis ido pasando. Era lo que necesitaba saber la posición del scroll y la posición de la div y hacer el cálculo este para saber donde lo posicionaba. Realizo el cálculo del top dónde tiene que mostrarse la div y lo añado en el .css. Ahora solo me faltaría unificar y optimizar un poco el código, por ejemplo ahorrarme el if.

CSS:

Código HTML:

#id_etiqueta_informativa{
  background: #EEE;
  border: 1px solid #CCC;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px; 
  box-shadow: rgba(0,0,0,0.3) 5px 5px 10px;
  font: bold 16px 'Arial';
  margin: 20px; 
  opacity: 0;
  padding: 20px;  
  position: absolute;
  right: 0;  
  top: 100%;
  transition: opacity 1.5s ease;
  -moz-transition: opacity 1.5s ease;
  -webkit-transition: opacity 1.5s ease;
  -o-transition: opacity 1.5s ease;
  -ms-transition: opacity 1.5s ease;
  -khtml-transition: opacity 1.5s ease;
  z-index: 0;
}

He cambiado "bottom" por "top" y transition "all" por "opacity". El problema era que cuando hacía la transición de todo me hacía también el movimiento y ahora solo hace la transición de la opacidad. Y lo de top: 100% solo me sirve si lo modifico desde javascript, lo cual cuando lo cambiaba no veía buenos resultados porque no lo recalculaba desde el javascript

Gracias por vuestra ayuda.

Saludos

[marlanga]

Iniciado por PHPeros

z-index: 9999;

Caramba PHPeros, convertirte en el odioso clip de microsoft office es la forma que tienes de resarcirte por todas las veces que he tenido que intervenir para corregir tus numerosos errores de concepto, diseño y sintaxis de javascript con el osas aconsejar a los demás? Ya te dije que lo que tienes que hacer es darme las gracias, por todo lo que estás aprendiendo de mí.
Jajaja.