¿Se puede vincular .resize() a $ (documento) en lugar de $ (ventana)?

Me pregunto si $(document).resize() debería tener sentido o no?

El problema es que cuando el documento se agranda (es decir, se extiende un div por algún motivo), el alto del documento cambia. Me gustaría ampliar mi imagen de fondo para que el área agregada al documento no quede en blanco. ¿Cuál sería la mejor manera de hacer esto?

Básicamente, ¿hay alguna manera de recibir una notificación cuando la altura del documento ha cambiado?

Para ser claro, no quiero que mi imagen se repita.

Fuente

2012-01-23 Roozbeh15

Sólo trata de ver? – mrtsherman

Lo hice y parece que no funciona. Pero, me imagino que debería, de ahí la pregunta. También estoy buscando una forma alternativa que haga lo que necesito hacer. – Roozbeh15

Usted puede hacer esto con CSS:

body { 
    background-image: url(yourImage.png); 
    background-size: cover; 
}

background-size es supported by all modern browsers.

La propiedad cover causará que la imagen sea lo más pequeña posible pero cubra completamente el elemento. Mantiene la relación de aspecto y recortará si es necesario.

Fuente

2012-01-23 20:34:13

Esta es una gran manera de hacerlo, pero pierde soporte para casi todas las versiones de IE (que desafortunadamente todavía son populares). Aún así, +1 porque no sabía sobre "cobertura". –

No hay una solución perfecta. Usaría CSS cuando fuera posible (por razones de rendimiento) y un polyfill para navegadores más antiguos. [Modernizr] (http://www.modernizr.com/) para detectar si se admite tamaño de fondo, [jQuery plugin como este] (http://nooshu.com/jquery-plug-in-scalable-background- imagen) cuando no lo es. @ Roozbeh15, podrías ver la fuente de ese complemento para ver cómo se hace. –

De acuerdo, CSS siempre es la mejor solución. Casi me olvido de Modernizr, que es increíblemente útil en casos como este. Buena sugerencia –

En resumen, sí, $(document).resize() detectará cambios en el tamaño del documento.

Fuente

2012-01-23 20:37:17

No existe un evento estándar document.resize que pueda enganchar.

Una técnica común es comprobar cuándo se modifica el árbol DOM, por lo tanto, es probable que cambie la altura del documento y luego ajuste todo lo que quiera ajustar allí: how to detect document size change in jquery. Se advirtió que puede no ser bueno hacer un buen rendimiento.

Firefox expone un evento Detecting document width and height changes, pero solo su FF.

Su mejor opción es utilizar una imagen de portada que se atenúe y utilice el color de fondo como color de fondo para el documento. Puede darle este efecto donde parece que la imagen continúa pero sin usar la imagen. Un buen ejemplo de esto es twitter.

Fuente

2012-01-23 21:10:23 Mrchief

Hah ... sí, hacer un seguimiento de las modificaciones en el árbol DOM definitivamente no es práctico para mi proyecto. ¿Cómo podría ayudar el color de fondo por cierto? El problema es que el tamaño del cuerpo no se actualiza cuando cambia el tamaño del documento. Por lo tanto, no sé cómo tener un color de fondo sería diferente de usar la propiedad de portada mencionada anteriormente. – Roozbeh15

No he usado la propiedad 'cover', así que no puedo decirlo. La función 'background-color' funciona en Twitter, donde agrega dinámicamente nuevos tweets a medida que se desplaza hacia abajo y hacia abajo. – Mrchief

Trate DOMSubtreeModified evento:

$(document).on('DOMSubtreeModified', function() { 
    ... 
});

Fuente

2013-11-26 16:16:39

¿Se puede vincular .resize() a $ (documento) en lugar de $ (ventana)?

Respuesta

Cuestiones relacionadas