La función jQuery se activó en el tamaño de la ventana pero no en la carga de la página

resize onload

Question

Encontré este código jQuery que permite centrar un div que no tiene dimensiones fijas tanto horizontal como verticalmente. Funciona con la altura y el ancho de la ventana. Entonces cuando cambio el tamaño de la ventana, el div aún está centrado dentro de la ventana.

Mi problema es que, en este momento, no funciona a menos que cambie el tamaño de la ventana primero. Entonces, si solo cargo la página, la div no estará centrada a menos que cambie manualmente el tamaño de la ventana.

Esto, por supuesto, no es ideal. Así que estoy tratando de encontrar una forma de evitarlo. Pero mis habilidades de jQuery son muy limitadas. Estoy atrapado en este momento.

Aquí está la página en la que estoy trabajando: http://dev.manifold.ws/test2/ (intente cambiar el tamaño de la ventana para ver lo que estoy describiendo)

Y aquí está el jQuery que estoy usando:

$(document).ready(function(){

$(window).resize(function(){

    $(''.img-holder'').css({
        position:''absolute'',
        left: ($(window).width() - $(''.img-holder'').outerWidth())/2,
        top: ($(window).height() - $(''.img-holder'').outerHeight())/2
    });

});
// This is suppose to initially run the function but it doesn''t seem to work
$(window).resize();

});

¿Alguien tiene una idea de cómo solucionar esto? ¡Gracias!

-Thom

Answer 1

Por qué no

$(document).ready(function() { 
    resize();
});

$(window).resize(function(){
    resize();    
});

function resize() {
    $(''.img-holder'').css({
        position:''absolute'',
        left: ($(window).width() - $(''.img-holder'').outerWidth())/2,
        top: ($(window).height() - $(''.img-holder'').outerHeight())/2
    });
}

Answer 2

Prueba esto. No puede llamar a una función de devolución de llamada como esta.

$ (document) .ready (function () {

$ (ventana) .resize (function () {

$(''.img-holder'').css({
    position:''absolute'',
    left: ($(window).width() - $(''.img-holder'').outerWidth())/2,
    top: ($(window).height() - $(''.img-holder'').outerHeight())/2
});

});

$(''.img-holder'').css({
    position:''absolute'',
    left: ($(window).width() - $(''.img-holder'').outerWidth())/2,
    top: ($(window).height() - $(''.img-holder'').outerHeight())/2
});

});

Answer 3

Prueba esto:

function adoptToSize() {
    $(''.img-holder'').css({
        position:''absolute'',
        left: ($(window).width() - $(''.img-holder'').outerWidth())/2,
        top: ($(window).height() - $(''.img-holder'').outerHeight())/2
    });
}

$(document).ready(adoptToSize);
$(window).resize(adoptToSize);

Answer 4

Pruebe algo como:

+function($, window){
  var resizeWin = function(){
      $(''.img-holder'').css({
          position:''absolute'',
          left: ($(window).width() - $(''.img-holder'').outerWidth())/2,
          top: ($(window).height() - $(''.img-holder'').outerHeight())/2
      });
  }

  $(function(){ resizeWin() });
  $(window).bind(''resize'',resizeWin);
}(jQuery, window, undefined);

Answer 5

Recuerde que $(document).ready sucede después de que el DOM esté listo, pero antes de que se cargue todo el contenido .

Puede que tu <img /> no se haya cargado la primera vez que disparas la función de cambio de tamaño ...
Intente utilizar el evento de load del documento o el evento de carga de la imagen.

La mejor solución aquí, sin embargo, es darle a la imagen un tamaño fijo:

<img src="img/test.jpg" style="width:800px;height:519px;" />

o:

.img-holder img {width:800px;height:519px;}

Answer 6

Vincula el evento de carga y cambio de tamaño al mismo tiempo que a continuación:

$(window).on(''load resize'', function () {
// your code
});

Espero que esto ayude.

Answer 7

$(document).ready(function(){
    doResize();
    $(window).on(''resize'', doResize);
});

function doResize() {
    $(''.img-holder'').css({
        position:''absolute'',
        left: ($(window).width() - $(''.img-holder'').outerWidth())/2,
        top: ($(window).height() - $(''.img-holder'').outerHeight())/2
    });
}

VIOLÍN