Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113

    Impedire l'esecuzione di uno script al di sotto una certa media query

    Salve a tutti,
    spero di riuscire a spiegare bene quello che sto cercando di fare.

    In pratica ho realizzato questo semplice menu che deve scomparire allo scroll-down del mouse e riapparire allo scroll-up ma tutto ciò deve avvenire solo nella versione mobile del sito, non in quella desktop.

    Al momento nel mio markup è presente questo script che ovviamente però funziona sempre, non solamente quando la media query della width è impostata su al di sotto dei 480px.

    codice:
    	$(window).scroll(function() {
    		if ($(this).scrollTop()>100)
         	{
            	$('.menu, .menu-hamb').fadeOut();
         	}
    	else
         	{
          		$('.menu, .menu-hamb').fadeIn();
         	}
     	});

    Leggendo in giro su questo forum ho trovato una soluzione che forse non ho compreso o riportato bene, a questo punto ve la scrivo vuota così come l'ho trovata, senza il pastrocchio inserito da me

    codice:
    var mql = window.matchMedia('@media all and (max-width: 500px)');
    if(mql.matches) {
        // regola per larghezze superiori ai 500px
    } else {
        // regola per larghezze inferiori ai 500px
    }
    Grazie a chi deciderà di aiutarmi nonostante questo caldo africano.
    Che il fresco sia con voi!

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,042
    Qui https://developer.mozilla.org/it/doc...dow/matchMedia c'è un altro esempio prova quello
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Qui https://developer.mozilla.org/it/doc...dow/matchMedia c'è un altro esempio prova quello
    Sì, mi pare questa pagina mostri lo stesso codice postato da me... ok, ti faccio vedere come implemento il mio script all'interno del mio markup e mi dici tu dov'è che sbaglio, ok?

    codice:
    		
    <script>
    mql = window.matchMedia(mediaQueryString)		
    	if (window.matchMedia("(max-width: 480px)").matches) {
    		$(window).scroll(function() {
    			if ($(this).scrollTop()>72)
         		{
           		$('.logo, .menu').fadeOut();
         		}
    	} else {
    		{
          		$('.logo, .menu').fadeIn();
         		}
    	}
    </script>

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,042
    Prova così da quello che vedo il tuo codice ha problemi sulle parentesi
    codice:

    <script>
    mql
    = window.matchMedia(mediaQueryString)// questa variabile globale se non è necessaria meglio toglierla
    if(window.matchMedia("(max-width: 480px)").matches){//apro if matchMedia
    $
    (window).scroll(function(){//apro scroll
    if($(this).scrollTop()>72){//apro if scrollTop
    $
    ('.logo, .menu').fadeOut();
    }else{// else if scrollTop
    $
    ('.logo, .menu').fadeIn();
    }// chiudo if scrollTop
    })// chiudo scroll
    }//chiudo if marchMedia
    </script>
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    113
    Ho appena provato e se lascio la prima stringa non succede niente, né su desktop né su mobile; se la tolgo siamo al punto di partenza, cioè le classi indicate scompaiono sempre allo scroll, anche sulla versione desktop

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,042
    Boh... andrebbe visto il contesto, prova a racchiudere tutto script nel onload
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.