Proprietà css poco usate

Ci sono deverse proprieta css poco diffure che possono rivelarsi molti utili:

box-sizing: border-box;

box-sizing: border-box; consente di costruire un bordo il cui spessore è interno alla dimensione del div: ad esempio un div largo 300px con bordo 10px rimane largo 300px, non diventa 320px.

.somediv {
border:10px solid #000;
width:300px;
box-sizing: border-box;
}

CALC

.somediv {
width:calc(50% - 10px);
}

vh e vw

Con height:100vh; si può ottenere un div alto quanto la finestra del browser. vh ha come riferimento sempre e solo l’altezza della finestra. vw funziona in modo analogo ma ha come riferimento la larghezza.

.somediv {
width:100vw;
height:100vh;
}

vmin e vmax

le unità di misura vmin e vmax sono la più piccola tra larghezza e altezza del broser (vmin), la più grande tra larghezza e altezza del broser (vmax).

.somediv {
width:100vmin; /*larghezza pari alla più piccola tra altezza e larghezza della finestra del browser*/
}

Div di dimensioni proporzionali

Ci sono diversi metodi che consetono via css o via jQuery di gestire div che devono mantenere una certa proporzione e adattarsi al proprio contenitore o alla dimensione della pagina.

Div con dimensioni proporzionali di altezza larghezza

In questo articolo viene illustrato un ingegnoso metodo che consente di produrre dei div con un aspect ratio costante. Il metodo ha il pregio di utilizzare un codice html molto pulito
Markup HTML:

<div class='box'> <div class='content'>Aspect ratio of 1:1</div> </div>

CSS:

.box{
	position: relative;
	width: 50%;		/* desired width */
}
.box:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.content{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
/* Other ratios */
.ratio2_1:before{
	padding-top: 50%;
}
.ratio1_2:before{
	padding-top: 200%;
}
.ratio4_3:before{
	padding-top: 75%;
}
.ratio16_9:before{
	padding-top: 56.25%;
}

Query su tabelle custom in wordpress

Di seguito alcuni esempi di query su tabelle custom in wordpress. Questo tipo di interrogazione ovviamente può essere utilizzato anche sulle tabelle wp.
%d, %s sono placeholder nelle query utilizzati per indicare rispettivamente un numero e una stringa.

Query per select e loop

$movies = $wpdb->get_results(
		$wpdb->prepare(
			"SELECT titolo_film, idtmdb_film, idimdb_film, id_film, serie_film, nazione_film
			FROM mo_film  
			WHERE id_film > %d AND nazione_film = %s AND serie_film = %s ORDER BY id_film LIMIT 0, 10", $start_id, $nazione_film, $serie
		)
	);
foreach ($movies as $movie) {
        $titolo_film = $movie->titolo_film;
        echo $titolo_film.'<br>';
}

Query per select di una riga

$row_film = $wpdb->get_row(
		$wpdb->prepare(
			"SELECT titolo_film, idimdb_film, id_film, data_film, serie_film, nazione_film
			FROM mo_film  
			WHERE idtmdb_film = %d AND serie_film = %s", $idfilm, $serie
		)
);

$nazione_film = $row_film->nazione_film;

Query per update/delete

 $wpdb->query( 
                   $wpdb->prepare( 
                        "UPDATE mo_film
                        SET nazione_film = %s
                        WHERE id_film = %d", $string_prod_country, $id_film
                    )
                );

Query per insert

(esempio del codex)

$wpdb->insert( 
	'table', 
	array( //Array dei contenuti
		'column1' => 'value1', 
		'column2' => 123 
	), 
	array( //Array dei tipi di dati
		'%s', 
		'%d' 
	) 
);

Sul codex: http://codex.wordpress.org/wpdb/
Interessante anche l’articolo di html.it

Elementi css di bootstrap

Ecco gli elementi css principali in Bootstrap; Bootstrap segue il principio mobile first, pertanto lo schema delle media query del css default segue questo principio; lo stesso principio si deve seguire se si rende necessario eseguire delle modifiche di comportamento secondo il layout da costruire e il relativo comportamento responsivo.

/* Schermi fino a 767px */
/* Nessuna media query  */
....

/* Schermi larghi da 768px in su */
@media (min-width: 768px) {
....
}
 
/* Schermi larghi da 992px in su */
@media (min-width: 992px) {
....
}
 
/* Schermi larghi da 1200px in su */
@media (min-width: 1200px) { 
....
}

Lo schema base è composto da 12 colonne.
A ciascuna media query è associato un prefisso nella definizione delle classi:

  • col-xs-* (extra-small) => Smartphone
  • col-sm-* (small) => Tablet
  • col-md-* (medium)
  • col-lg-* (large)

Segue un esempio di “griglia” dove .row è la riga,

<div class="container">
  <div class="row">
    <div class="col-sm-6">
     ...
    </div>
    <div class="col-sm-3">
     ...
    </div>
    <div class="col-sm-3">
     ...
    </div>
  </div>
</div>

Tra le colonne ci sono 30 px, 15 di padding sinistro e 15 di destro.

Per nascondere o mostrare elementi in ragione della mediaquery si posso no usare le classi .hidden-* (esempio .hidden-sm) e .visible-* (esempio .visible-sm).

Esistono anche una pressochè infinita di classi “verbose” tipo: text-left, text-justif, text-justify, text-nowrap, text-center, text-lowercase, text-uppercase, text-capitalize ed altre…

Fonti: Guida di Html.it, Documentazione bootstrap.

Ricavare la custom taxonomy nel loop di un post

Suppongo di avere un post type a cui sono associate una o più custom taxonomy. Mi si presenterà sicuramente la necessità di mostrare nel loop del post i relativi valori di taxonomy:

...loop post ....

$term_list = wp_get_post_terms($post->ID, 'area-geografica', array("fields" => "all"));
        $meta .= '<a href="'.get_option('home').'/'.$term_list[0]->taxonomy.'/'.$term_list[0]->slug.'/">' .$term_list[0]->name.'</a>';

...loop post....

Bordo multiplo su div

Come gestire un bordo multiplo su div con i css
Metodo 1: “Border and Outline”

.one {  
    border: solid 6px #fff;  
    outline: solid 6px #888;      
}

Metodo 2: “Pseudo-Element”

.two {
	border: solid 6px #fff;
	position: relative;
	z-index: 1;
}

.two:before {
	content: "";
	display: block;
	position: absolute;
	top: -12px;
	left: -12px;
	border: solid 6px #888;
	width: 312px;
	padding-bottom: 12px;
	min-height: 100%;
	z-index: 10;
}

Metodo 3: “Box Shadow”

.three {
	box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}

Metodo 4: “Extra Div”

.four {
	border: solid 6px #888;
	background: #fff;
	width: 312px;
	min-height: 312px;
}

.four div {
	width: 300px;
	min-height: 300px;
	background: #222;
	margin: 6px auto;
	overflow: hidden;
}

Metodo 5: “Border Image”

.five {
	border-width: 12px;
	-webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
	-moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
	border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */
}

Fonte

Galleria fotografica wordpress

Trovo molto interessante come sono state sviluppate le gallery fotografiche ne IL POST. Il metodo utilizzato ha diversi vantaggi primo fra tutti quelli di generare molte page view; nonostante ogni foto abbia la sua pagina sfogliare una gallery è un’operazione molto veloce, infatti tra una pagina e l’altra l’utente apparentemente cambia pagina (url cambia nel browser) ma in realtà via ajax vengono sostituite l’immagine, il contenuto della pagina e la url.
Volendo riprodurre la dinamica di funzionamento la cosa più semplice per me è stata pensare a una chiamata ajax della pagina (dedicata alla foto) successiva (o precedente), recuperare la risposta ricevuta, recuperare gli elementi da sostituire della vecchia pagina con quelli della nuova.

Di seguito il codice che ho scritto:

//bottoni next/prev gallery
	jq(".gallery-next-image a, .gallery-previous-image a, div.attachment a").live( "click", function(e) {		
		pageurl = jq(this).attr('href');
		jq('div.attachment').fadeOut();
		jq('div.loading-attachment').fadeIn();
		
		if(pageurl!=window.location){
			window.history.pushState({path:pageurl},'',pageurl);	
		}
		jq.ajax({
				type: "GET",
				url: pageurl,
				contentType: "charset=utf-8",
				success: function(data, status, xhr) {
					console.log(data);
					jq('div.loading-attachment').fadeOut();
					jq('title').text(jq( data ).find('title').text());
					jq('h2.pagetitle').html(jq( data ).find('h2.pagetitle').text());
					jq('div.attachment').html(jq( data ).find('div.attachment').html());
					jq('#image-navigation').html(jq( data ).find('#image-navigation').html());
					Cufon.replace('h2.pagetitle', { fontFamily: 'Trade Gothic LT Std' });
					jq('div.attachment').fadeIn();
				},//success
				error: function(xhr, status, error) {
					 alert('qualcosa non ha funzionato, potresti fare il cambio pagina js normale')
				}//error
		});//jq.ajax
		e.preventDefault();
	})

Analizzando con Fiddler2 mi sono accorto che la chiamata ajax alla successiva/precedente pagina della photogallery non c’è. Il metodo è anche più furbo, infatti al primo caricamento della pagina viene generato un codice js scritto in pagina contenete le informazioni di tutte le pagine (precedenti e successive). A questo punto è “solo” un problema di manipolazione del DOM.

A presto l’aggiornamento dell’articolo…

 

 

Paginazione del testo di post molto lunghi

Se un post di wordpress è molto potrebbe essere utile dividere il contenuto su più pagine. Questa operazione è molto semplice inserendo <!–nextpage–> dove deve essere diviso l’articolo; inoltre per far mostrare la paginazione (nel frontend) è sufficiente aggiungere il seguente codice nella function.php del tema di wordpress:

add_filter( 'the_content', 'pagination_after_post', 1 );
function pagination_after_post( $content ) {
            $content .= wp_link_pages( $args = array( 
                'pagelink' => ' % ', 
                'before' => '<div class="post-pagination">' . __( 'Pages:' ),   
                'after' => '</div>', 
                'echo' => 0 ) 
            );
        return $content;
}

Fonte: paginazione testo post lunghi

Modificare l’aspetto di una dropdownlist solo con i css

Poche righe con massima compatibilità di borwser.dropdown

 

Markup HTML

<div class="styled-select">
<select><option>Here is the first option</option></select>
<select><option>The second option</option></select>
</div>

Codice CSS

body {
 
    background-color:#50c2fe;
	
}

.styled-select {
	width: 240px;
	height: 30px;
	overflow: hidden;
	background: url(dropdownarrow.png) no-repeat right #FFF;
	border: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 
 .styled-select select {
	background: transparent;
	width: 268px;
	padding: 5px;
	font-size: 14px;
	border: 0;
	border-radius: 0;
	height: 30px;
	-webkit-appearance: none;
}

articolo originale

Mouse Over/Leave jQuery con ritorno alla situazione iniziale

Voglio produrre la situazione descritta con l’aiuto delle immagini seguenti: ci sono due bottoni (btn01 e btn02), la situazione iniziale prevede la pagina con il background giallo; al mouse over sul bottone btn01 lo sfondo diventa bianco, al mouse over sul bottone btn02 lo sfondo diventa nero; uscendo dall’over sui due bottoni il background non diventa immediatamente giallo (situazione di partenza) ma c’è un ritardo (delay) di 1,3 secondi in modo da evitare cambi di sfondo troppo repentini e fastidiosi.

 

var delay=1000, setTimeoutConst;

$('#batt02btn').hover(

function() {

$('body').css('background-color','#000000')
clearTimeout(setTimeoutConst );

}, function() {

setTimeoutConst = setTimeout(function(){
//fa qualcosa
$('body').css('background-color','#FFCC00')
}, delay);

}
);

$('#batt01btn').hover(
function() {

$('body').css('background-color','#FFFFFF')
clearTimeout(setTimeoutConst );

}, function() {

setTimeoutConst = setTimeout(function(){
//fa qualcosa
$('body').css('background-color','#FFCC00')
}, delay);

}
);

 

overleave_iniziale
Situazione iniziale
overleave_over01
Mouse Over sul primo bottone
overleave_over02
Mouse Over sul secondo bottone

Scarica il file di esempio