Appuntamento con i tutorial jQuery più WordPress, dove oggi voglio condividere con te un piccolo trucchetto che ho utilizzato in un blog che sto sviluppando per un cliente.
Veniamo subito al dunque.
Il problema
Nell’home page del blog devo visualizzare i tre post più rilevanti rispetto alle tre categorie principali, disposti uno di fianco all’altro.
Il codice html/php riguardante una tab è il seguente
Per disporre i post uno di fianco all’altro si è utilizzata la proprietà float:left, associata alla classe home-article, come puoi vedere nel codice CSS.
Il problema è che il margine destro di 60 px viene assegnato anche all’ultimo post, e di conseguenza va a capo. Se fossimo in una situazione “statica”, basterebbe aggiungere una classe all’ultimo elemento e assegnare nel css margin-right:0.
Un’altra soluzione che può venire in mente è di utilizzare il selettore last-child, che però non è cross-browser.
La soluzione. jQuery e metodo last()
Quindi la soluzione è utilizzare jQuery e tramite il metodo last() prendere l’ultimo elemento della lista e assegnare la proprietà css voluta.
In questo modo verrà assegnato lo stile margin-right:0, solo all’ultimo elemento della lista.
Conoscevi questo metodo? Ti sei mai trovato in una situazione simile a quella descritta?
11 aprile 2011 at 23:01
Uuu bravo fede! Certo che mi sono trovato in una situazione simile! Non conoscevo questa soluzione in jquery.
Ho aperto anche io un blog, vieni a lasciarmi qualche critica?? =)
Ciao!
12 aprile 2011 at 17:11
Ciao Daniele e benvenuto nel blog
Bene spero ti sia utile! Appena trovo un’attimo di tempo vengo a farci una visita
3 giugno 2011 at 18:31
molto utile!!!
28 giugno 2011 at 18:22
Ciao Fede forse vado fuori tema ma ho un problema e non so bene dove cercare istruzioni (affidabili).
Il mio problema è il seguente: nella schermata category dove vengono visualizzati thumb excerpt e alcuni custom field ho esigenza di mettere un link sotto ogni post che apra una pop up in jquery (modal). All’interno di questo pop up va inserito il titolo del post corrispondente (più altre cose che non sono rilevanti per il mio problema).
In breve quando clicco sul link la pop up si apre ma prende sempre il titolo del primo post (ovviamente).
Il div della pop up sta inizialmente su display:none; e poi viene visualizzata con il metodo modal() del plugin.
Il problema è più comprensibile con il metodo toggle()… agisce su una classe e se clicco sul link apre tutti i div nascosti non quello del post corrispondente. Dovrei assegnare una classe in maniera dinamica col nome del post ma non so come richiamarla nella funzione jquery.
Se già ci sei passato basterebbe anche solo un link per indirizzarmi.
Ti ringrazio e mi scuso per l’utilizzo “a sbafo”…
4 luglio 2011 at 23:29
Ciao Daniele e benvenuto nel blog
Mmmm non è una cosa banale..sinceramente non ho mai avuto per fortuna l’esigenza di dover fare qualcosa di simile..provo a ragionarci un po’ su e vedo se riesco a darti una risposta
5 luglio 2011 at 15:37
Grazie fede, googlando ho trovato questo e ho risolto
http://jsfiddle.net/mattball/X7p28/
alla prossima
6 luglio 2011 at 18:33
Ottimo! mi fa piacere ciao!
24 dicembre 2011 at 05:47
ciao federico,
il tuo blog è molto interessante e utile davvero!
da poco mi sono avvicinato a html / php quindi spero mi scuserai se la
mia domanda è banale o per certi versi insensata… il fatto pero’ è che non capisco perche’ per ottenere quel layout io debba per forza usare
margin-right: 60px
non è che è possibile ottenere la stessa soluzione con
margin-left: 30px
margin-right: 30px
?
in questo modo nel loop php avrei tre blocchi identici
e l’ultimo articolo non mi potrebbe andare a capo. ..
mi sbaglio?
mi piacerebbe capire perche’ questa non potrebbe essere una soluzione…
grazie per l’aiuto!
1 febbraio 2012 at 23:28
Ciao Fede già abbiamo avuto modo di conoscerci perchè il mio sito era nella rubrica raggi x. Ho un problema con i Costum post type e spero che tu mi possa dare una mano….
Ho usato Custom Content Type manager per la realizzazione di unun Custom type chiamato “Espositori” , per un sito di una fiera , dove ho creato i dettagli dell’espositore come:
-Tipologia
-Categoria
-N° Stand
-Inserimento foto
etc…
Ho necessita di far visualizzare in modo corretto in una pagina personalizzata tutti gli espositori di un certa tipologia esempio:
Motorizzazioni
n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
Fiori
n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
etc…..
in più se è possibile chreare a inzio pagina un search per Tipologia – Nome – Categoria
come posso settare queste cose con WP_Query ?
AIUTAMI!!!! Ti Ringrazio anticipatamente ciao Luigi
2 febbraio 2012 at 09:37
Ciao Luigi si mi ricordo di te!
Esattamente di cosa avresti bisogno? Comunque utilizzerei le tassonomie per distinguere i diversi espositori.
Per la ricerca il discorso è più complesso..
2 febbraio 2012 at 12:31
Ciao Fede
Grazie per la risposta
avrei bisogno di sistemare la mia lista attualmente è così disposta:
Motorizzazioni
n° stand Nome Espositore(non riesco a puntare alla sua pagina)
Fiori
n° stand Nome Espositore (non riesco a puntare alla sua pagina)
Motorizzazioni
n° stand Nome Espositore (non riesco a puntare alla sua pagina)
si dispone in maniera casuale e in ordine di inserimento poi non riesco ad inserire il link che mi porti alla sche da me fatta precedentemente
‘espositori’, ‘orderby’ => ‘tipologia’, ‘order’ => ‘DESC’ );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
print_custom_field(‘tipologie’);
echo ”;
print_custom_field(‘stand’);
the_title(‘‘,’‘);
echo”;
endwhile;
?>
non so come sistemare ….. per il search hai un link o qualche esempio da vedere?
CIAO E GRAZIE!!!
2 febbraio 2012 at 12:32
il codice scritto non si visualizza bene….. se vuoi ti mando una mail
2 febbraio 2012 at 12:34
Si manda pure per e mail
2 febbraio 2012 at 16:15
SPEDITA!!
7 febbraio 2012 at 10:13
Ciao fede
Ho sistemato il tutto in maniera diversa ma ci son riuscito…..
Ho un’altro problema dovrei aggiungere altre 3 sidebar nel footer praticamente nell’area description dove l’ho rinominata supplementary-2, il problema non è tanto a realizzarle ma a gestirle con i css oppure sbaglio qualcosa a crearle hai un tutorial dove spiega bene il tutto?
CIAO GRAZIE
9 febbraio 2012 at 11:06
Ciao Luigi,
sono contento che hai risolto, ti avrei risposto a giorni.
Per quanto riguarda l’altro problema, non capisco che difficoltà ci siano con i css. Per caso è on line il sito che stai realizzando, o comunque una versione di prova?
11 febbraio 2012 at 10:18
Ciao Fede
Ti ringrazio per la disponibilità ma anche questo problemino ci son riuscito….
grazie lo stesso. CIAO
28 febbraio 2012 at 00:26
Problemi dopo aggiunta nuovo blocco css
Ragazzi ho fatto delle modifiche
al mio tema WordPress aggiungendo una sidebar in più
quella in questione è #blocco.
Ho raggiunto il risultato che cercavo cioè
quello di inserire un nuovo blocco di larghezza maggiore
sopra le due sidebar native.
Ora pero’ riscontro un problemone se aggiungo widget
alle due sidebar queste si sviluppano in verticale andando
sopra il footer, in poche parole non allungano la pagina
ma passano sopra al footer.
Il codice nei css originario è il seguente:
Sapete dirmi cosa sbaglio per far funzionare al meglio????
Gli ultimi articoli in Tutorial Jquery
Gli ultimi articoli in Wordpress
I più commentati
Gli articoli più letti del mese
Quanti siamo on line?
Iscritto a
Partnership