ciao a tutti ho il seguente problema,
devo creare uno script che conti delle immagini disposte in un lista...
in pratica io devo fare a livello teorico uno script che dica:
se nella lista ci sono 4 o - di 4 immagini disponiti con un margin-top:35px;
altrimenti disponiti con un margin-top:0;allego immagine spiegazioni
devo ammettere che di jQuery so ben poco, spostare div animare e alcune cose, ma mai programmato con if else
se fai con una vista temizza la vista e conti il numero di righe in php.
http://www.chromeos.eu
sto già temizzando la vista e questa è una field immaginedi un contenuto.... e non riesco a mettere le righe.... quindi non posso contarle...
è una lista alla fine.... quindi è
<ul><li><img>con float:left; per affiancarle e dei margini ovviamente....sulla vista puoi temizzare l'output dello stile che usa un foreach, da li intendo.
http://www.chromeos.eu
come si fa a farlo??? scusami ma sono un niubbo ;P
ahhh uso drupal 7
Metti una variabile i che si incrementa ogni ciclo per poi poterla sfruttare per mettere una tua classe nel caso sia <=4 che sposta in basso (margin-bottom:-25px) il tutto, ad esempio oppure copi il ciclo senza il print e conti li la tua variabile per poi aggiungere la classe al div inferiore con un if e spostarlo, sono 2 metodi poco ortodossi ma funzionano.
http://www.chromeos.eu
ti giuro che ho capito solo che devo fare una cosa che non ho capito cosa sia.... hai un esempio di codice cosi ci smanetto sopra e vedo che vien fuori????
Ciao,
se vuoi provare con questo codice...
Poniamo che il tuo html sia questo:
<ul id="my-list"><li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
lo script JS potrebbe essere questo:
var maxItem = $('#my-list li').size();if(maxItem <= 4){
$('#my-list').css('margin-top', '35px');
}
Potresti provare anche con un vertical-align, con cui potresti tiuscire a fare la stessa cosa, ma dovresti impostare il contenitore della lista come display:table-cell e a quel punto potresti dargli un vertical-align: middle... fai alcune prove!
;)
grazie.... adesso provo e vi dico se funzia
non funziona..... sto provando in 10.000 modi ma non funziona.... può essere che vada in comflitto con un'altro script che interagisce con lo stesso elemento con fadeIn e fadeOut????
l'id della lista lo cambi? E' effettivamente una lista? Da errori javascript?
http://www.chromeos.eu
ovvio che cambio l'id della lista da lei datami con quella che ho io ma non vuole andare....
sicuro al 100% che è una lista dato che anche nel css ho messo il list-style a none....
no javascript con firebug non dice nulla
ho trovato un'altro codice che non so quanto possa andare bene ma funziona a metà... mi sposta indistintamente se + o - di 4 le immagini....
$('#my-list').each(function() {if($(this).children().length <=4) {
$(this).children().css('margin-top', '35px');
}
else {
$(this).children().css('margin-top', '0px');
}
});
funziona....
il codice che ho usato è il seguente....
var riga1 = $('.views-row-1 .img_post img').size();if(riga1 <= 4){
$('.views-row-1 .img_post img').css('margin-top', '35px');
}
else if(riga1 >= 5){
$('.views-row-1 .img_post img').css('margin-top', '0px');
}
praticamente non ho capito minimamente il perchè se si usa else if funziona ovviamente dandogli i parametri da"if"
mentre se si usa solo else non funziona....
se qualcuno sa spiegarmi il perchè mi fa un favore....
Ciao,
io non avevo messo else perchè, solitamente, la posizione di default la andrei a definire nel css (per cui il margin-top lo metto nel css e via javascript vai a sovrascrivere il valore). Domanda: vai a mettere un margin a ogni immagine? A livello di performance sarebbe meglio agire sul contenitore, piuttosto che su ogni singolo elemento!
;)
per logica hai totalmente ragione... se lo avessi messo sul contenitore probabilmente andrebbe meglio, ma il contenitore, non chiedermi il perchè è sopra alle immagini.... e le immagini di conseguenza non sono al suo interno... anche se in realtà lo sono.... pernso che sia il browser (da internet explorer a firefox) che lo renderizza male....
Se usi un float per affiancare gli elementi di lista è normale che il contenitore si annula. Il float fa uscire l'elemento dal normale flusso di esecuzione dell'html, un pò come succede con un position:absolute. Per rimettere le cose apposto, basta dare all'elemento che segue la lista un clear:both e dovrebbe ripendere le sue misure (occhio che le'lemento deve essere un tipo block).
;)
big up, +1 per te su google plus.... mi hai risolto tutto.... grandissima... ora va tutto perfetto come dovrebbe andare....