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!
Ciao, in questo script come posso aggiungere un cambio di un logo al cambio della risoluzione? Esempio: logo1.jpg a piena risoluzione, logo2.jpg appena la risoluzione cambia? Grazie