Riempimento spazio vuoto cella di tipo immagine in modalità responsive
Автор: Rino D.Sto realizzando un progetto che è perfetto in modalità desktop e < 480 ma lascia a desiderare nei restanti intervalli della viewport .
Quindi sto cercando di compensare con jquery . Allego una preview per capirci meglio , praticamente ho
cella di sinistra con testo , cella adiacente destra con immagine .
Quando passo ad es in un intervallo >=720px;<11xxpx;
la cella che contiene l ' immagine rimane abbastanza vuota potrei per mettere delle patch nasconderla , potrei centrarla ... ma il mio obiettivo è quello di riempire parte dello spazio vuoto con un <div> o uno <span>
appeso dinamicamente ci sono riuscito , il problema che sposto la cella di sotto( che un codice html contenente un<hr/> in avanti Io vorrei riempire quello spazio (visto che c'è ) senza muovere nulla sotto...
Nella pagine interessata ho inserito nel tag
<head></head>
<script>
$(function(){
var screen = $(window);
if ((screen.width() >=720)&&(screen.width()< 1154)) {
/* $("#attentionGrabber").hide();*/
$('div#imCellStyle_1').append( "<span>sotto la campa la capra campa </span>" );
}
});
</script>
In allegato quello che succede.Eppure lo <span> e in-line e non dovrebbe creare l ' accapo .
Forse nell ' allegato avevo usato un floating div ma il risultato è ===
Автор
ho utilizzato anche
$( "<p>Test</p>" ).insertAfter( 'div#imCellStyle_1' ); il risultato è +- uguale
è come se l ' immagine occupa tutto lo spazio
parti dall'idea che deva avere la stessa disposizione di oggetti incolonnati come nella versione desktop. La filosofia del responsive è il contrario, alla minima risoluzione gli oggetti si mettono anche su una unica colonna, altrimenti diventa difficile renderli fruibili.
non entro nel merito di quello che chiedi e forse non è quello che chiedi ma ti consiglierei di creare il sito a 960 e di far predisporre gli oggetti nella risoluzione smartphone su una unica colonna. Mettere su due colonne su uno smartphone quello che hai postato come immagine, vuol dire non riuscire a vedere bene il sito.
ma è un mio parere.
Автор
hello people ho risolto
ho definito una max-height per la cella in modo da "bloccarla"
<script>
$(function(){
var screen = $(window);
if ((screen.width() >=720)&&(screen.width()< 1154)) {
$('div#imCell_1').css({'max-height':'320px'});
$('div#imCellStyle_1').append( "<h5>lorem ipsum</h5><span>sotto la panca la capra campa sotto la </span>" );
/* $( "<p>Test</p>" ).insertAfter( 'div#imCellStyle_1' );*/
}
});
</script>
In questo modo posso riempire il vuoto della cella ..... jquery fà miracoli!!!