Ordinamento oggetti responsive 
Autore: Esse Di
Visite 2900,
Followers 3,
Condiviso 0
Posseggo la versione Evolution 15.2.2
Ho una pagina con tre oggetti HTML disposti come da figura
Gli oggetti 1 e 2 occupano 4 colonne, l'oggetto 3 occupa 8 colonne.
Avrei necessità di ordinare gli oggetti nella sequenza 1-3-2, ma non ci riesco. Le uniche sequenze che mi permette sono 1-2-3 (l'orginale) e 3-1-2.
Non esiste nessuna possibilità di ottenere la sequenza 1-3-2 senza passare alla versione PRO?
Postato il
appena provato, e sinceramente, io non riesco a fare quello che chiedi neanche con la Pro...
Autore
Pensavo, evidentemente sbagliando, che con le interruzioni di riga della Pro si potesse fare.
Lascio la discussione aperta ancora per un po', nel caso che qualcun altro voglia intervenire
al momento, l'unico modo per inserire le interruzioni di riga fra tutti gli oggetti è non intersecare gli stessi fra loro... anche se è inteso che se non è possibile non intersecare per mantenere il layout scelto, non si può inserire l'interruzione...
Autore
Per il desktop io ho bisogno che l'altezza complessiva degli oggetti 1 e 2 sia pari all'altezza dell'oggetto 3. Credo che quello della figura del post di apertura sia l'unico layout possibile.
si, appunto... è quello che dicevo... se non si può fare altrimenti che intersecare, purtroppo poi non è possibile separare i due oggetti 1e2, che si separano poi automaticamente, ma sempre nell'ordine 1-2-3 alla risoluzione più bassa, ponendosi uno per riga... peccato...
Autore
Come dicevo all'inizio è possibile anche la sequenza 3-1-2. Comunque grazie per le conferme.
Autore
Avevo chiuso la discussione ma la riapro per avvenuti progressi.
Sono riuscito nel mio intento.
Scelgo la sequenza 3-1-2 e, tramite codice jquery, scambio tra loro il contenuto degli oggetti 1 e 3. In questo modo è come se avessi, almeno come contenuto, la sequenza 1-3-2.
Però questa sequenza simulata mi occorre solo quando gli oggetti vengono linearizzati, cioè per risoluzioni tra 720 e 480 pixel. Per le risoluzioni maggiori deve restare la sequenza originale 1-2-3.
Come faccio ad eseguire delle istruzioni piuttosto che delle altre ogni volta che avviene un break point?
Si può fare in diversi modi, questopotrebbe essere uno (usato più volte nei template ed esempi pubblicati con stesil):
<script>
function miaFunzione() {
if ($(window).width() < 720) {
$('#imHeader').text('inferiore ai 720px');
} else {
$('#imHeader').text('superiore ai 720px');
}
}
$(window).on("resize load", miaFunzione);
</script>
Ovviamente il codice nelle condizioni dovrai sostituirlo con il tuo.
Questo in linea generale, non conoscendo il codice che stai usando.
Autore
Grazie Lemonsong. Il tuo codice funziona, come al solito.
La prova che sto effettuando io è molto semplice.
L'oggetto 1 contiene il codice <div id="elemento1"> </div>
L'oggetto 3 contiene il codice <div id="elemento2"> </div>
L'oggetto 2 contiene una foto
Il codice jq inserito è
<script>
$(document).ready(function() {
function miaFunzione() {
var sdHtml1 = '<p align="center">Testo n° 1</p>' +
'<p align="justify">' +
'Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1' +
'Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1' +
'Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1 Testo 1' +
'</p>'
var sdHtml2 =
'<p align="center">Testo n° 2</p>' +
'<p align="justify">' +
'Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2' +
'Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 ' +
'Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 Testo 2 ' +
'</p>'
if ($(window).width() < 720) {
$("#elemento1").html(sdHtml2)
$("#elemento2").html(sdHtml1)
} else {
$("#elemento1").html(sdHtml1)
$("#elemento2").html(sdHtml2)
}
}
$(window).on("resize load", miaFunzione);
});
</script>
Per ora funziona. Approfondirò la prova, nell'ottica di inserirlo nel mio sito effettivo, che non posso pubblicare essendo strettamente personale e lo faccio girare solo in locale. Se serve posso pubblicare il sito di prova
Invece di inserire i contenuti nello script, potresti usare il metodo .insertBefore() per spostare gli oggetti.
Se ho capito bene il tuo intento e se da programma (con quella disposizione) non si può proprio ottenere la sequenza 1-3-2 quando si linearizzano gli oggetti, prova a vedere se questo esempio può andare bene come spunto:
http://quellidelcucuzzolo.altervista.org/appunti/ws-insertBefore/
Non l'ho testato più di tanto...
Autore
Non conoscevo il metodo insertBefore().
Mi tocca provarlo per forza perché il mio codice non funziona proprio come dovrebbe. All'apertura della pagina, su tablet e smartphone i riquadri dei testi sono vuoti. Solo effettuando una qualsiasi operazione vengono popolati, dopodiché va tutto bene. È come se non intercettasse l'evento load, ma solo il resize
Qui c'è il mio esempio
http://www.essedi.altervista.org/_EVO15/_prova_resp/pagina-1.html
Rimuovi il codice:
$(document).ready(function() {
//lascia il resto che sta qui
});
Inoltre qui è meglio "chiudere" con un punto e virgola (;):
Autore
E dire che lo sapevo che $(document).ready(function() e $(window).load xso n o alternativi tra di loro!
Comunque ora stto prrovando il tuo metodo con insertBefore, anche perché, come esposto nel mio post di apertura, era quello che volevo fare
Autore
Ho aggiornato il mio sito di prova con il sistema insertBefore, che funziona a meraviglia.
Grazie Lemonsong, ma chiedo ancora un aiuto.
Fino ad ora io ho utilizzato il metodo "$(document).ready(function()" { ecc
Posso tranquillamente sostituirlo con $(window).on("load", function() { ecc
Il fatto è che normalmente l'ecc. contiene altro codice ed altre funzioni oltre a insertBefore.
Al caricamento della pagina deve essere eseguito sia insertBefore che il resto del codice, mentre quando varia la risoluzione deve essere eseguita solo insertBefore
Io avrei pensato ad una soluzione così:
<script>
$(window).on("load", function() {
function moveObj() {
if ($(window).width() < 720) {
$('#imCell_18').insertBefore('#imCell_19');
} else {
$('#imCell_18').insertBefore('#imCell_17');
}
}
moveObj();
$(window).on("resize", moveObj);
.......................................................
.............. altro codice ..................
.......................................................
});
</script>
Può andare o c'è una soluzione migliore?
Tutte le soluzioni che funzionano possono andare
L'uso di window load è indispensabile nei casi in cui abbiamo bisogno di avere caricato tutta la pagina, immagini e altri "oggetti" compresi, prima di far agire il nostro script.
document ready invece va bene nella maggior parte dei casi.
Rimando a questo articolo per maggiori info (in Rete ne puoi trovare di migliori e più esaustivi).
Premesso che nell'esempio che ho postato ho fatto uso di window load per "semplificare" lo script, puoi usare $(document).ready(function() { al posto di $(window).on("load", function() { e "semplificare" $(window).on("resize", moveObj); con $(window).resize(moveObj);
Ho aggiornato l'esempio con questa alternativa.
Autore
La mia domanda tendeva ad appurare se era corretto il sistema da me utilizzato per richiamare inseretBefore una prima volta al caricamento della pagina e poi ogni volta che varia la risoluzione.
Inserendolo nel tuo esempio mi hai fornito la migliore conferma possibile.
Per il resto, conoscevo già la differenza tra $(document).ready(function() { e $(window).on("load", function() {
Ma, al di là di questa differenza, secondo quest'altro articolo, $(document).ready(function() { sarebbe deprecato e bisognerebbe utilizzare solo $(function()
Ti risulta?
Ho altri dubbi sul responsive, ma credo di aprire altri topic.
Ancora grazie per l'intera consulenza.
Sì certo è un sistema tradizionale che si può scrivere in vari modi.
In "casa jQuery" leggo che è stato deprecato e rimosso nella 3.0 $(document).on( "ready", handler ) e consigliano di usare la forma "contratta" $(function() { }); al posto di$(document).ready(function() { });
Probabilmente avranno in mente di rimuoverla in futuro.
Ancora grazie per l'intera consulenza.
Prego ma non chiamarla consulenza... se non è una battuta