Sticky footer in Ant Design

Ant Design è una libreria UI per React; ne abbiamo già parlato in qualche altro articolo.

Oggi vediamo un semplice tips per rendere il componente Footer sticky.

Creare un template per Wordpress

Ho scoperto che creare un template per Wordpress non è una cosa molto difficile.

Quanto meno a livello basico.

Vediamo i passi da seguire, mettendoci dentro Twitter Bootstrap 4.

Considerate che avremo un misto di HTML, CSS e PHP.

Do per scontato che abbiate già installato Wordpress; nella cartella di installazione, andate in wp-content/themes, e create una directory che conterrà tutto il necessario (test ad esempio).

Sommare le colonne in jQuery DataTables

jQuery DataTables è uno dei plugin jQuery più apprezzati in circolazione.

Le motivazioni del suo successo sono tante, e tra queste ci stanno sicuramente la sua flessibilità e possibilità di configurazione.

Oggi vediamo come sommare il valore di una colonna, mettendo il risultato nel footer.

Vedremo due esempi:

• in uno il valore cambia al cambiare dei filtri impostati
• nell'altro il valore rimane fisso

Sticky footer con jQuery

Per impostare il cosidetto sticky footer (il footer fisso a fondo pagina) sono solito usare i CSS.

Su un progetto ho dovuto usare jQuery per impostarlo.

La soluzione è meno efficace e più lenta, ma come si dice spesso a "mali estremi, estremi rimedi".

Partiamo dall'HTML del footer:

<div id="footer">
    FOOTER
</div>
</body>
</html>

In sostanza è l'ultimo componente prima della chiusura del body.

jQuery Mobile sticky footer

Per un progettino sto usando jQuery Mobile, e come ogni volta mi ritrovo con qualche problematica che vedo essere richiesta anche in giro per il web.

In questo caso parliamo di come impostare il footer a fondo pagina.

Perchè di fatto, di default, il footer di JQM non è fisso, e sulle pagine non è bello vedere il footer che sta a metà schermata.

Impostare le icone in jQuery Mobile Navbar

In un articolo precedente avevo mostrato come usare Navbar per creare un menu a tab in una pagina con jQuery Mobile.

Oggi vediamo come sia semplice impostare le icone e anche come usare quelle personalizzate piuttosto che quelle standard.

Senza ricominciare da capo, partiamo direttamente da un normale footer con navbar:

<div data-role="footer" data-position="fixed">

  <div data-role="navbar">

   <ul>

    <li><a href="#home">Home</a></li>

    <li><a href="#adv">Advertising</a></li>

   </ul>

  </div>

</div>

Per le icone abbiamo due impostazioni:

• la posizione
• l'icona

Di default la posizione è impostata su TOP, ma possiamo cambiarla così:

<div data-role="navbar" data-iconpos="bottom">

Per impostare l'icona invece:

<li><a href="#home" data-icon="home">Home</a></li>

<li><a href="#adv" data-icon="grid">Advertising</a></li>

Usiamo data-icon indicando un'icona.

Qui la lista di quelle standard.

Se invece vogliamo usarne una personale dobbiamo fare un pò di lavoro in più.

Create un nuovo file CSS e includetelo nell'header.