Obtener ancho y alto del navegador agregar divs jQuery

Estoy tratando de obtener el ancho y la altura del navegador y agregar dos DIV diferentes a dos posiciones diferentes usando jQuery.

DIV ONE debe estar en una posición absoluta, 40 px desde la izquierda y 40 px desde la parte inferior de la ventana del navegador, mientras que DIV TWO debe estar a 40 px desde la derecha y 40 px desde la parte inferior, sin importar qué dispositivo esté mirando la página web (así que debe funcionar en iPad , iPhone, etc.).

También tengo contenido (imágenes, divisiones secundarias y texto) dentro de ambas divisiones, pero no tengo ni idea de cómo abordar esto, ya que soy inútil con jQuery.

¿Alguien podría ayudarme con esto?

preguntado el 12 de junio de 12 a las 11:06

Usa $(ventana).height(); $(ventana).ancho(); para encontrar el ancho y el alto de la ventana del navegador -

3 Respuestas

No necesita jQuery para eso (el posicionamiento, al menos). CSS tiene suficientes trucos.

No use fotometría absoluta) posicionamiento, uso fijo:

#div-1, #div-2 {position:fixed;}
#div-1 {left:40px; bottom;40px;}
#div-2 {right:40px; bottom;40px}

Contamos con position:fixed, las propiedades izquierda, derecha, superior e inferior se refieren a la distancia entre el borde respectivo del objeto de posición fija y el borde respectivo de la ventana gráfica.

... Por lo tanto, no importará dónde aplicó sus divs. Simplemente agréguelos al cuerpo:

var myDivsHtml = howeverYouGetYourDivs();
$('body').append(myDivsHtml)

Respondido el 12 de junio de 12 a las 11:06

He hecho un booboo serio con esta pregunta y he aceptado su respuesta porque en esencia la ha respondido, sin embargo, no es completamente lo que estaba buscando porque escribí mal la pregunta, verifique esta pregunta para ver mi problema completo: stackoverflow.com/questions/10995356/… - egr103

Creo que buscas un posicionamiento fijo y no absoluto.

Solo usa CSS para esto

.div1{
   position:fixed;
   bottom:40px;
   left:40px;
}
.div2{
   position:fixed;
   bottom:40px;
   right:40px;
}

Respondido el 12 de junio de 12 a las 11:06

Prueba esto:

$(function(){
    var $body = $("body");
    $("<div/>").css({
        "position":"fixed",
        "bottom":"40px",
        "left":"40px"
        }).appendTo($body);
    $("<div/>").css({
        "position":"fixed",
        "bottom":"40px",
        "right":"40px"
        }).appendTo($body);
});

Respondido el 12 de junio de 12 a las 11:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.