Funzione jQuery che agisce al resize della pagina

Oggi vediamo come realizzare una funzione jQuery che agisce al resize della pagina web, ideale per far accadere determinati eventi a particolari screen-size della pagina.

Ecco un esempio di codice della funzione resize di jQuery.

$(window).resize(function() {

	// Funzione cicla il contenuto ogni volta che la pagina viene ridimensionata
	if($(window).width() > 1024) {

		$(".trigger").click(
		function(){

		alert("Width Alta >1024");

		});//1024

	} else if($(window).width() >= 769 && $(window).width() <= 1024) {

		$(".trigger").click(
		function(){

		alert("Width Media 769-1024");

		});//769-1024px

	} else if($(window).width() <= 768) {

		$(".trigger").click(
		function(){

		alert("Width Minore <768");

		});//minore 768px

	}//else

}).resize(); //reinizializza al cambio di width del browser/device

Come vedete la funzione agisce e viene divisa per comodità in 3 breakpoint (come avviene con i media queries per intenderci):

• width alta (dimensione schermo maggiore di 1024px)
• width media (dimensione device compreso tra 768 e 1024)
• width bassa (dimensione schermo minore di 768px)

Ovviamente nulla vieta di aggiungere o modificare breakpoints a seconda delle vostre esigenze specifiche. Dentro a ogni “fascia” possiamo facilmente impostare un’action da eseguire, in questo esempio ho fatto in modo che al click sulla classe .trigger si aprisse un alert di volta in volta diverso a seconda dello screen size del dispositivo di visualizzazione. Ovviamente possiamo anche eseguire determinati script al load dalla pagina mettendo semplicemente il codice dentro le tre aree.

NOTA BENE: non usate assolutamente la funzione IN SOSTITUZIONE ai media queries, ma usate questa soluzione per rendere dinamico il sito in particolari situzioni (l’esempio di questo articolo è lampante e apre la strada a numerose idee di utilizzo).

L’articolo ti è stato utile? condividi l’articolo sui tuoi social network preferiti!