È possibile associare .resize() a $ (documento) anziché $ (finestra)?

Mi chiedo se $(document).resize() dovrebbe avere senso o no?

Il problema è che quando il documento diventa più grande (ad esempio un div viene esteso per qualche motivo) l'altezza del documento cambia. Mi piacerebbe allungare la mia immagine di sfondo in modo che l'area aggiunta al documento non sia vuota. Quale sarebbe il modo migliore per farlo?

Fondamentalmente, c'è un modo per ricevere una notifica quando l'altezza del documento è cambiata?

Per essere chiari, non voglio che la mia immagine si ripeta.

fonte

2012-01-23 Roozbeh15

Basta provare e vedere? – mrtsherman

Ho fatto e sembra non funzionare. Ma immagino che dovrebbe, quindi la domanda. Sto anche cercando un modo alternativo per fare ciò che ho bisogno di fare. – Roozbeh15

È possibile farlo con i CSS:

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

background-size è supported by all modern browsers.

La proprietà cover farà sì che l'immagine sia il più piccola possibile ma continua a coprire completamente l'elemento. Mantiene le proporzioni e si ritaglia se necessario.

fonte

2012-01-23 20:34:13

Questo è un ottimo modo per farlo, ma si perde il supporto per quasi tutte le versioni di IE (che sono purtroppo ancora popolari). Ancora, +1 perché non sapevo di "copertura". –

Non esiste una soluzione perfetta. Userei i CSS quando possibile (per motivi di prestazioni) e un polyfill per i browser più vecchi. [Modernizr] (http://www.modernizr.com/) per rilevare se è supportata la dimensione di sfondo, [plugin jQuery come questo] (http://nooshu.com/jquery-plug-in-scalable-background- immagine) quando non lo è. @ Roozbeh15, potresti vedere la fonte di quel plugin per vedere come è fatto. –

D'accordo, i CSS sono sempre la soluzione migliore. Mi sono quasi dimenticato di Modernizr, che è incredibilmente utile in casi come questo. Bel suggerimento –

In breve, sì, $(document).resize() rileverà i cambiamenti nella dimensione del documento.

fonte

2012-01-23 20:37:17

Non è presente un evento standard document.resize da collegare.

Una tecnica comune consiste nel controllare quando l'albero DOM viene modificato, quindi è probabile che cambi l'altezza del documento e quindi aggiusti tutto ciò che desideri regolare lì: how to detect document size change in jquery. Essere avvertito che potrebbe non essere una buona cosa da fare in termini di prestazioni.

Firefox espone un evento Detecting document width and height changes, ma solo FF.

La soluzione migliore è utilizzare un'immagine di copertina che si assottiglia e utilizzare il colore finale come colore di sfondo per il documento. Può darti questo effetto dove sembra che l'immagine continui ma senza usare l'immagine. Un buon esempio di questo è twitter.

fonte

2012-01-23 21:10:23 Mrchief

Hah ... sì, tenere traccia delle modifiche nell'albero DOM non è assolutamente pratico per il mio progetto. Come può aiutare il colore di sfondo? Il problema è che la dimensione del corpo non si aggiorna quando le dimensioni del documento cambiano. Quindi, non so come avere un colore di sfondo sarebbe diverso dall'usare la proprietà di copertina di cui sopra. – Roozbeh15

Non ho usato la proprietà 'cover', quindi non posso dire per quello. La cosa 'background-color' funziona su Twitter, dove aggiunge dinamicamente nuovi tweet mentre scorri verso il basso. – Mrchief

Prova DOMSubtreeModified evento:

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

fonte

2013-11-26 16:16:39

È possibile associare .resize() a $ (documento) anziché $ (finestra)?

risposta

Problemi correlati