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!
grazie, l’hai fatta facile da capire il codice di cui sopra
ciao poichè sto iniziando a studiarlo il jquery, per un lavoro che sto inziando a sviluppare sto cercando di implementare questa condizione con un script che nn fa altro che aprirmi un popup in modo responsive solo che non capisco dove sbaglio. Ti posto una parte di codice per farti capire. Grazie in anticipo
TITOLO POPUP
SI
Chiudi
$(document).ready(function () {
if ((screen.width1024)) {
$(‘#slidein’).hide();
}
});
Ti consiglio di usare i CSS per dimensionare responsive il box…
Ciao Riccardo,
purtroppo lo script non mi funziona.
ecco il mio script che mi permette lo scroll e blocca la navigazione del portfolio ad una certa altezza.
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() > 994) {
$(‘#cont-scroll-graphic’).css( “position”, “fixed” );
$(‘#cont-scroll-graphic’).css( “top”, “0” );
} else {
$(‘#cont-scroll-graphic’).css( “position”, “absolute” );
$(‘#cont-scroll-graphic’).css( “top”, “994px” );
}
if(jQuery(window).scrollTop() > 6500) {
$(‘#cont-scroll-web’).css( “position”, “fixed” );
$(‘#cont-scroll-web’).css( “top”, “0” );
} else {
$(‘#cont-scroll-web’).css( “position”, “absolute” );
$(‘#cont-scroll-web’).css( “top”, “6500px” );
}
if(jQuery(window).scrollTop() > 10000) {
$(‘#cont-scroll-photo’).css( “position”, “fixed” );
$(‘#cont-scroll-photo’).css( “top”, “0” );
} else {
$(‘#cont-scroll-photo’).css( “position”, “absolute” );
$(‘#cont-scroll-photo’).css( “top”, “10000px” );
}
if(jQuery(window).scrollTop() > 13500) {
$(‘#cont-scroll-terzad’).css( “position”, “fixed” );
$(‘#cont-scroll-terzad’).css( “top”, “0” );
} else {
$(‘#cont-scroll-terzad’).css( “position”, “absolute” );
$(‘#cont-scroll-terzad’).css( “top”, “13500px” );
}
});
});
e lo puoi vedere in funzione sul mio sito:
http://www.michelemerone.it/portfolio.html
sto lavorando al css responsive per una migliore visualizzazione sugli smartphone, e dovrei utilizzare questa funzione con valori diversi a risoluzione minore…
Puoi darmi qualche dritta per utilizzare il tuo script.(non capisco dove sbaglio)
Grazie
Ciao, con la funzione mostrata è possibile richiamare un file javascript che sostituisca un altro file javascript? Per esempio sostituire slidedesktop.js con slidemobile.js? Mi servirebbe per impostare, quando si è su mobile, delle slide a bassa risoluzione sullo sfondo anziché quelle ad alta risoluzione presenti nella versione desktop. Tali immagini in hd sono contenute in slidedesktop.js e quindi non posso sostituirle con le MQ, dovrei per forza sostituire righe di codice. Grazie