Altezza relativa e larghezza ma posizione assoluta x, y

Question

Ho un enorme sito Web a scorrimento orizzontale. Pensa a un Mario World, ad esempio. Ogni "asset" è posizionato in modo assoluto.

mi piacerebbe avere le dimensioni (altezza e larghezza) degli elementi per essere relativo alla viewport del browser (in modo da utilizzare le percentuali), ma è necessario posizionare gli elementi utilizzando pixel reali del ecc sinistra

Quando Lo faccio, ovviamente, le risorse vengono ridimensionate correttamente mentre ridimensiono la finestra del mio browser. Ma le posizioni degli oggetti sono in pixel, quindi le cose si muovono fuori posto rispetto allo sfondo.

Esiste una semplice soluzione CSS per questo problema? Usare le percentuali per definire la posizione (a sinistra: 50% per esempio) non è davvero una buona soluzione dato che non è molto accurata (vedi jsfiddle sotto). O dovrei guardare l'evento di ridimensionamento usando JS e fare qualcosa in questo modo? Se é cosi, come?

Non sono sicuro di aver senso in questo momento .. quindi fammi sapere se ci sono domande.

Modifica

Ecco un JSFiddle: http://jsfiddle.net/BZ77t/

Si noti che quando si ridimensiona la finestra, il blocco nero (#blockpx) è posizionato utilizzando pixel e per questo non è influenzato durante il ridimensionamento. Il blocco rosso (#blockpercentage), tuttavia, viene ridimensionato e posizionato utilizzando le percentuali, ottenendo l'effetto desiderato: attenersi alla posizione desiderata (che è la posizione dell'immagine di sfondo). Tuttavia, non è molto preciso, il che non importa molto in questo esempio, ma in un'impostazione più ampia (larghezza più ampia), la differenza diventa piuttosto elevata.

Answer 1

La soluzione è quella di utilizzare una combinazione di un elemento di contenimento e javascript: http://jsfiddle.net/KaaXg/3/

Questo violino include questa funzionalità javascript:

$(document).ready(function(){ 
    $(".container").css("width", $(".image").width());   
    $(window).resize(function(){ 
     $(".container").css("width", $(".image").width());   
    }); 
}); 

La cosa più importante da notare qui è che left e width i valori venivano calcolati rispetto all'elemento body, che non era previsto.

Per contrastare questo, abbiamo aggiunto un elemento contenente che contiene l'immagine e altri tag div utilizzati per la grafica del blocco rosso nella pagina.

Tuttavia, senza javascript, l'attributo left è ancora solo "aggiornato" quando la pagina viene ricaricata dopo il ridimensionamento della finestra. Gli elementi a livello di blocco non si aggiornano orizzontalmente da soli.

Quindi si desidera che lo left e il width siano proporzionali all'immagine di sfondo, ma non si aggiorneranno in quanto la pagina viene ridimensionata o spostata utilizzando solo CSS. La soluzione javascript sopra aggiorna la larghezza dell'elemento che contiene dinamicamente mentre la pagina viene ridimensionata, risolvendo questo problema.

Ho lasciato da solo gli stili bottom e height css, poiché funzionano come previsto per gli scopi del sito Web, il contenitore si sviluppa in altezza per contenere l'immagine al suo interno.

Non sono esattamente sicuro di cosa si voglia fare con il blocco nero a pixel fissi nella pagina, quindi l'ho lasciato così com'è.

EDIT: Ho seriamente revisionati questo progetto, ha fatto una fabbrica di oggetti per creare una nuova grafica e aggiornato il codice della pagina. Questa soluzione non richiede quasi alcun HTML o CSS, ha un po 'più di codice javascript, ma renderà molto più semplice l'implementazione della grafica dinamica sulla pagina/aggiunta funzionale di nuovi elementi. http://jsfiddle.net/RnCWN/9/

La soluzione javascript mi ​​è venuta qui con la utilizza in tempo reale l'aggiornamento percentuali per impostare i width e left attributi del blocco percentuale basata, così come l'inizializzazione delle statiche height e bottom attributi.

Con questa revisione, è possibile utilizzare il metodo PercentageBasedGraphic per creare una casella mobile sulla pagina. Ecco un esempio:

PercentageBasedGraphic(25, 10, 4, 30, "block1"); 

Questa funzione aggiunge un div con un attributo id = "block1", con corrispondenti width, height, left e bottom valori (tutti in percentuali). Restituisce anche un oggetto che contiene tutte le informazioni necessarie per ridimensionare e riposizionare lo div appena creato. È possibile facilmente espandere questa funzione aggiungendo classi diverse a ciascuna div. Ad ogni modo, come possiamo finalmente utilizzare il nostro oggetto restituito?

addGraphic(graphicArr, PercentageBasedGraphic(25, 10, 4, 30, "block1")); 

La funzione addGraphic aggiunge ogni nuova scatola mobile a un array. Successivamente, eseguiamo l'iterazione di questo array alla ridimensionamento della finestra per riposizionare tutte le caselle mobili definite.

Sarò onesto con voi, la grafica di Super Mario ha reso questo molto divertente su cui lavorare.

Answer 2

si può provare a controllare la differenza tra il vecchio (prima del ridimensionamento) e nuovi (dopo) larghezza e l'altezza della finestra e utilizzare questa differenza di cambiare posizione basso e da sinistra:

$(document).ready(function(){ 
    var width = $(window).width(); 
    var height = $(window).height(); 
    var blockLeft = parseInt($('#blockpx').css('left')); 
    var blockBottom = parseInt($('#blockpx').css('bottom')); 
    $(window).resize(function(){ 
     var difWidth = width - $(this).width(); 
     var difHeight = height - $(this).height(); 
     if (difHeight>0) { 
      $('#blockpx').css('bottom',blockBottom-difHeight + 'px'); 
     } else { 
      $('#blockpx').css('bottom',blockBottom+difHeight + 'px'); 
     } 
     if (difWidth>0) { 
      $('#blockpx').css('left',blockLeft-difWidth + 'px'); 
     } else { 
      $('#blockpx').css('left',blockLeft+difWidth + 'px'); 
     } 
    }); 
}); 

prova su jsfiddle.

è una variante jquery, puoi fare lo stesso con semplice javascript.