Media Query e Resize Window

[NLSweb]

Salve ,

chiedo consiglio alle persone piu' esperte di me ..

sto configurando un metodo per adattare il web site alla dimensione dello schermo , inserendo anche un listeners per il controllo del window resize.

da notare che non modifico solo gli stylesheet ma anche i js , questo perche' molti "comportamenti" variano in base alla dimensione della finestra.

facendo delle prove , noto che al modificare della dimensione della finestra e come se venisse eseguito un reload dell'intera pagina , ma mentre nell'esclusiva modifica dei stylesheet non vi sono problemi , quando vengo ricaricati i js sorgono alcuni problemi estetici e funzionali; il punto e' che l'utente che modifica la dimensione della finestra non vuole fare un reload (perdendo magari la posizione in cui era o il lavoro che stava facendo).

quindi la domanda (il consiglio) che chiedo , esiste un metodo "pulito" per eseguire l'aggiornamento dei js ad dimensionamento della pagina ?

attualmente l'unica soluzione che ho trovato e' piuttosto complessa e si tratta di inserire i controlli dell'aggiornamento del js (in base al resize) ad ogni singolo comportamento invece che a tutto il file js.

spero di essere stato chiaro nel esporre il problema e che ci siano persone gentili che mi possano aiutare.

Grazie.

Onestamente non ho del tutto capito il problema ma posso suggerirti il comando js per controllare la larghezza dello schermo in modo che puoi fare delle prove:

<script type="text/javascript">
if (document.documentElement.clientWidth >= 768) {
<!-- js esegue questa parte di codice se la finestra è larga più di 767px -->
}
if (document.documentElement.clientWidth >= 1024) {
<!-- js esegue questa parte di codice se la finestra è larga più di 1023px -->
}
</script>

[NLSweb]

grazie per la risposta , ma conoscevo gia' il codice js per il controllo della dimensione dello schermo

il problema che mi pongo e' un altro ..

avendo delle azioni che vengono svolte con js o jQuery (tipo animazioni o modifiche degli elementi , ecc.) , quando l'utente cambia la risoluzione della finistra (il ridimensionamento) automaticamente determinati script si riavviano .

cio' implica che determinati comportamenti ed azioni si attivino (cose se si facesse un reload della pagina)

ed e' questo il problema .. vorrei che non si attivassero !

per esempio: apro il sito e con uno script eseguo una animazione di intro ; l'animazione si adatta alle dimensioni dello schermo
quindi quando modifico la dimensione dello schermo , l'animazione riparte

attualmente ho risolto il problema inserendo codici di controllo per ogni evento / azione eseguita , ma e' un processo lungo e complicato
quindi cercavo una soluzione piu' "elegante" ..

premetto che senza il codice non posso dare una risposta completa e definitiva ma hai provato a scrivere l'animazione usando i css3 invece di jquery?
Il risultato potrebbe essere molto più leggero (visto che si parla di media query, gli utenti mobile ringrazieranno) e l'animazione si stopperebbe dopo la prima eseguzine semplicemente inserendo il comando animation-iteration-count:1;

[NLSweb]

Il tipo di animazioni che creo sono molto complesse e non basta CSS ..

attualmente ho risolto usando un sistema molto complesso di controlli , quello che sto cercando e' un modo per semplificare il procedimento.

comunque per avere un idea di quello che faccio puoi vedere qui uno dei miei lavori:
http://nlsweb.altervista.org/walmsley/