Cambiar el tamaño del elemento dinámicamente con el tamaño de la ventana jquery

He examinado muchas preguntas sobre este tema y parece que no puedo encontrar el problema con mi código. ¡Cualquier ayuda sería muy apreciada!Cambiar el tamaño del elemento dinámicamente con el tamaño de la ventana jquery

$(window).resize(function(){ 
    var newwidth = $(window).innerWidth(); 
    var newheight = $(window).innerHeight();  
    $("#element").height(newheight).width(newwidth); 
     });

Estoy tratando de cambiar el tamaño de #element a la misma altura y anchura que la ventana si se cambia el tamaño de la ventana.

Fuente

2012-07-06 d-_-b

Esto funciona para mí. – Tyrsius

Vea este violín: http://jsfiddle.net/aBHRp/1/ – Tyrsius

Ayúdeme, http://stackoverflow.com/questions/33360273/window-disptachevent-resizing-issue –

Sobre .innerWidth(), desde docs:

Este método no es aplicable a los objetos de la ventana y de documentos; para estos, use .width() en su lugar.

Hay el mismo note para .innerHeight() también.

Así que hay que utilizar .width() y .height():

$(window).resize(function(){ 
    var newwidth = $(window).width(); 
    var newheight = $(window).height();  
    $("#element").height(newheight).width(newwidth); 
});

Fuente

2012-07-06 17:41:07 Engineer

gracias por la respuesta. Es interesante porque si alerta (newwidth) obtengo el ancho correcto. –

Tanto el ancho como el ancho interno funcionan para mí. – Tyrsius

@Tyrsius Tal vez haya un problema de compatibilidad entre navegadores. – Engineer

intente esto:

$(window).resize(function(){ 
    var newwidth = $(window).width(); 
    var newheight = $(window).height();  
    $("#element").css({"height": newheight, "width": newwidth }); 
});

Fuente

2012-07-06 17:41:30 undefined

gracias, esta es otra manera que ahora funcionó para mí! –

@iight eres bienvenido :) – undefined

siempre puede utilizar CSS:

#element {width:100%; height:100%; position:fixed; }

Fuente

2012-07-06 17:43:40

voto a favor? esto hace lo mismo que tiene Op en su código, excepto sin el jQuery. –

En la llanura Javascript que puede hacer esto:

var viewportwidth; 
    var viewportheight; 

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 

    if (typeof window.innerWidth != 'undefined') 
    { 
     viewportwidth = window.innerWidth, 
     viewportheight = window.innerHeight 
    } 

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 

    else if (typeof document.documentElement != 'undefined' 
    && typeof document.documentElement.clientWidth != 
    'undefined' && document.documentElement.clientWidth != 0) 
    { 
     viewportwidth = document.documentElement.clientWidth, 
     viewportheight = document.documentElement.clientHeight 
    } 

    // older versions of IE 

    else 
    { 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
     viewportheight = document.getElementsByTagName('body')[0].clientHeight 
    } 
    var mydiv = document.getElementById("element"); 
    mydiv.style.height=viewportheight'px'; 
    mydiv.style.width=viewportwidth+'px';

Fuente

2012-07-06 17:44:30

jsFiddle

$(window).resize(function(){ 
var newwidth = $(window).width(); 
var newheight = $(window).height();  
$("#element").height(newheight).width(newwidth); 
    });

ambas obras para mí

update

$(window).resize(function(){ 
var newwidth = $(window).innerWidth(); 
var newheight = $(window).innerHeight();  
$("#element").height(newheight).width(newwidth); 
    });

Fuente

2012-07-06 17:47:42

Cambiar el tamaño del elemento dinámicamente con el tamaño de la ventana jquery

Respuesta

Cuestiones relacionadas