jQuery: eseguire una funzione a determinate risoluzioni dello schermo

Oggi vediamo come eseguire determinate funzioni a seconda della risoluzione dello schermo dei nostri visitatori. Un buono strumento anche per adattare layout grazie a jQuery.

Molte volte capita di dover far apparire qualcosa a determinate risoluzioni del monitor. Oppure , più semplicemente si ha la necessità di adattare design complessi o molto dinamici in modo da rendere fruibile il sito a diverse risoluzioni. Se proprio i css vi vanno stretti (ricordatevi anche che con i css3 potete impiegare i media queries!), potete provare questa soluzione.

Teoria basilare: Width() e Height()

La teoria parte dalla funzione jQuery .width() e .height() che permettono di recuperare la larghezza e l’altezza di un elemento web. In linea prettamente teorica ad esempio width e height vengono usati per centrare elementi sullo schermo o comunque per effettuare adattamenti di layout particolari con jQuery.

esempio1: centrare un elemento al centro dello schermo.

Ne avevamo già parlato in questo mio articolo dove spiegavo come centrare il popUp esattamente al centro dello schermo tramite una semplice funzione matematica. Ecco il codice nel particolare con una panoramica veloce dell’impiego di width() e height().

var top = ($(window).height() - $("#popup").height()) /2;
var left = ($(window).width() - $("#popup").width()) /2;

$("#popup").css("left":left); //inserisco il popup esattamente al centro
$("#popup").css("top":top); //setto anche l'altezza esatta del centro.

Come vedete ho per prima cosa creato due variabili trovando il centro esatto dello schermo. Ovviamente le variabili trovano il centro di qualsiasi schermo, dal 1024 al 1600 (etc.). In secondo luogo sempre con jQuery ho piazzato il nostro elemento al centro, usando i valori recuperati in precedenza. Un funzionamento molto facile ma molto utile!

NOTA: Lo sapevi che puoi applicare questo codice al mio popUp in overlay dinamico?

Script per individuare la larghezza dello schermo ed eseguire funzioni specifiche

Come fare ad eseguire determinate azioni a seconda della dimensione dello schermo dei nostri visitatori? Lo script è più semplice di quanto vi starete immaginando 😉

 <script type="text/javascript">
    $(document).ready(function() {

		if ((screen.width>=1024)) {
		alert('Informazioni: Schermo 1024x768 o superiore');

                //inserisci qui altre azioni o script a seconda delle esigenze		

		}

		else  {
		alert('Informazioni: Monitor con risoluzione inferiore a 1024x768');

                //Dopo l'alert in questo caso carico il file css ad hoc per dimensioni
                // di schermo inferiori a 1024

		$("link[rel=stylesheet]:not(:first)").attr({href : "stile_1024.css"});

		}

    });//FINE DOM
    </script>

Come vedete grazie a screen.width riesco a costruire facilmente uno switch nel caso la risoluzione dello schermo sia inferiore a 1024px. Al posto del semplice alert ovviamente potete inserire quello che più desiderate  a seconda delle proprie esigenze.

Nel caso di un monitor inferiore a 1024 avete sicuramente notato:

$("link[rel=stylesheet]:not(:first)").attr({href : "stile_1024.css"});

La stringa serve a caricare un css diverso da quello “standard” utile da usare al posto dei media queries (anche se vi consiglio di usare quest’ultimi ormai.).

Spero vi sia utile per i vostri progetti, Stay tuned on Targetweb.it!