Reklama
Pokazuje wyniki od 1 do 14 z 14

Temat: jQuery rozwijane menu na telefonach

  1. #1
    Avatar Bazan
    Data rejestracji
    2008
    Wiek
    31
    Posty
    1,909
    Siła reputacji
    18

    Domyślny jQuery rozwijane menu na telefonach

    Tworzę właśnie stronę responsywną z rozwijanym submenu. Na desktopie po prostu pojawia sie po najechaniu, na telefonie musi sie rozwinac po kliknieciu w rodzica.

    I niestety na desktopie działa, a na telefonie już zamiast rozwinąć podmenu przechodzi w strone z linku.
    Wiecie może co z tym zrobić?

    Strona aktualnie znajduje sie na http://test7.stronademo.pl/

    kod js odpowiedzialny za rozwijanie:

    Kod:
    
    // media query event handler
    		if (matchMedia) {
    			var mq = window.matchMedia("(max-width: 759px)");
    			mq.addListener(WidthChange);
    			WidthChange(mq);
    		}
    
    		// media query change
    		function WidthChange(mq) {
    
    			if (mq.matches) {
    				$('.main-nav > ul > li.menu-item-has-children > a').on('click',function(e){
    						e.preventDefault();
    						$this = $(this);
    						ul = $($this).next('ul');
    						ul.slideToggle();
    						return false;
    					
    				});
    			}
    			else {
    					$('.main-nav > ul > li ul').slideUp();
    			}
    
    		}
    Ostatnio zmieniony przez Bazan : 27-11-2013, 17:53
    Dreaming by drumming. ˆˆ™

  2. #2

    Data rejestracji
    2009
    Położenie
    Rybnik
    Wiek
    28
    Posty
    451
    Siła reputacji
    15

    Domyślny

    u mnie chyba działa poprawnie? #ios7


  3. Reklama
  4. #3
    Avatar Bazan
    Data rejestracji
    2008
    Wiek
    31
    Posty
    1,909
    Siła reputacji
    18

    Domyślny

    Tak, na jakims tablecie z orange tez dziala, na moim samsung galaxy gio nie dziala, u brata na htc jakims tam, tez nie dziala.

    Moze chodzi cos o androidzie. Robilem rozne kombinacje z e.preventDefault(), stopPropagation itp, ale nic nie dziala :/
    Dreaming by drumming. ˆˆ™

  5. #4

    Data rejestracji
    2009
    Posty
    215
    Siła reputacji
    16

    Domyślny

    na LG 4X HD z andkiem 4.1.2 i operą śmiga dobrze

  6. #5
    Avatar Mari
    Data rejestracji
    2006
    Położenie
    Poznań / Mogilno
    Wiek
    31
    Posty
    788
    Siła reputacji
    18

    Domyślny

    U mnie chyba dobrze, tak? #sgs3 #cm10.2 (4.3) #dolphin_drowser

  7. #6
    Avatar Dio Paladin
    Data rejestracji
    2007
    Wiek
    28
    Posty
    959
    Siła reputacji
    17

    Domyślny

    HTC One S, Andek 4.1.2, Opera (ta nowa, znienawidzona przez większość) - działa dobrze, wszystko rozwija się jak powinno.

  8. #7
    Avatar Messer
    Data rejestracji
    2004
    Położenie
    Płock
    Wiek
    32
    Posty
    499
    Siła reputacji
    20

    Domyślny

    Dodaj testowo oprócz/zamiast preventDefault() stopImmediatePropagation() i daj znać jak się zachowuje.

    Logowałeś, czy JS poprawnie wchodzi do przypadku z media query?

  9. #8
    Avatar Bazan
    Data rejestracji
    2008
    Wiek
    31
    Posty
    1,909
    Siła reputacji
    18

    Domyślny

    Cytuj Messer napisał Pokaż post
    Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.
    Logowałeś, czy JS poprawnie wchodzi do przypadku z media query?
    Poprawnie dziala, mozna to zobaczyc powiekszajac i zmniejszajac przegladarke. Po przejsciu z widoku mobilnego na desktopowy nastepuje zwiniecie wszystkich rozwinietych menu.

    Cytuj Messer napisał Pokaż post
    Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.
    Dodaj testowo oprócz/zamiast preventDefault() stopImmediatePropagation() i daj znać jak się zachowuje.
    Juz sprawdzam :)

    @edit
    Nie pomoglo :/
    Ostatnio zmieniony przez Bazan : 28-11-2013, 22:00
    Dreaming by drumming. ˆˆ™

  10. #9
    Avatar Messer
    Data rejestracji
    2004
    Położenie
    Płock
    Wiek
    32
    Posty
    499
    Siła reputacji
    20

    Domyślny

    Tak jak myślałem. Btw, skoro problem jest na telefonie to nie testuj na desktopie. Wrzuć alerty w kilku miejscach i daj znać czy interpreter w ogóle tam dolatuje.

    #dojadę zaraz z pracy do domu to naprawię Twój kod.
    Ostatnio zmieniony przez Messer : 28-11-2013, 22:14

  11. #10
    Avatar Bazan
    Data rejestracji
    2008
    Wiek
    31
    Posty
    1,909
    Siła reputacji
    18

    Domyślny

    :o W sumie nie pomyslalem o tym, zrobilem akcje ze jak mq sie zgadza to linkom robi czerwone tlo, na desktopie dziala na telefonie nie.

    Dobra pokombinuje dalej bo mam na czym sie oprzec :)
    Dreaming by drumming. ˆˆ™

  12. #11
    Avatar Messer
    Data rejestracji
    2004
    Położenie
    Płock
    Wiek
    32
    Posty
    499
    Siła reputacji
    20

    Domyślny

    klepnalem w przegladarce, sprawdz jak sie zachowuje:
    (setTimeout jest zwiazany z bugiem na stockowych przegladarkach 2.3 androida)

    Kod:
    setTimeout(function(){
    	$('.main-nav > ul > li.menu-item-has-children > a').on('click',function(e){
    		if ($(window).width() < 760) {
    			e.preventDefault();
    			$(this).find('.sub-menu').slideToggle();
    			return;
    		}
    	});
    	$('.main-nav > ul > li ul').slideUp();
    }, 300);
    #literowka

    W sumie dodam jeszcze jedno: nie potrzebujesz słuchać eventu matchMedia na window w tym wypadku. Szerokość potrzebna jest Ci tylko i wyłącznie przy kliku, pobieraj więc ją tylko wtedy. Co więcej, matchMedia nie działa na większości androidów <= 2.3, iOS 4 i IE9.
    Ostatnio zmieniony przez Messer : 28-11-2013, 22:57

  13. #12
    Avatar Bazan
    Data rejestracji
    2008
    Wiek
    31
    Posty
    1,909
    Siła reputacji
    18

    Domyślny

    Dzieki bardzo. To rozwiazanie z matchMedia znalazlem na stackoverflow i mialo duzo plusow to sadzilem ze to bedzie dobre rozwiazanie. Szkoda ze nie dziala na starszych androidach :/

    Problem rozwiazal taki kod:

    Kod:
    setTimeout(function(){
    	$('.main-nav > ul > li.menu-item-has-children > a').on('click',function(e){
    		if ($(window).width() < 760) {
    			e.preventDefault();
    			$(this).next('ul').slideToggle();
    			return;
    		}
    	});
    	
    }, 300);
    
    $(window).on('resize',function(){
    	if ($(window).width() > 759) {
    		$('.main-nav > ul > li ul').hide();
    	};
    });
    Sądzę że do zamkniecia :)
    Ostatnio zmieniony przez Bazan : 28-11-2013, 23:14
    Dreaming by drumming. ˆˆ™

  14. #13
    Avatar zakius
    Data rejestracji
    2008
    Położenie
    The Internets
    Wiek
    33
    Posty
    11,075
    Siła reputacji
    24

    Domyślny

    Hovery to zło nawet na desktopach. Tego po prostu się nie robi
    Problem z komputerem? Instrukcja diagnostyczna
    Cytuj Vegeta napisał Pokaż post
    Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.
    Baby maja wymagania jak windows vista, takze nigdy nie wiesz.
    Cytuj Dzzej napisał Pokaż post
    Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.
    Moje posty to esencja głupoty.
    "Don't worry, I'm just a pervert"

  15. #14
    Avatar Bazan
    Data rejestracji
    2008
    Wiek
    31
    Posty
    1,909
    Siła reputacji
    18

    Domyślny

    Cytuj zakius napisał Pokaż post
    Cytat został ukryty, ponieważ ignorujesz tego użytkownika. Pokaż cytat.
    Hovery to zło nawet na desktopach. Tego po prostu się nie robi
    Ciekawe, rozwiń.

    Niby czemu się nie robi.
    Dreaming by drumming. ˆˆ™

Reklama

Informacje o temacie

Użytkownicy przeglądający temat

Aktualnie 1 użytkowników przegląda ten temat. (0 użytkowników i 1 gości)

Podobne tematy

  1. [jQuery]Skrypty nie działają
    Przez Dio Paladin w dziale Programowanie
    Odpowiedzi: 4
    Ostatni post: 25-12-2014, 21:46
  2. [rozwiazane] Zagadka w javascript / jQuery!
    Przez Bazan w dziale Programowanie
    Odpowiedzi: 7
    Ostatni post: 25-03-2014, 16:13
  3. [JS] Rozwijane menu
    Przez joozioom w dziale Programowanie
    Odpowiedzi: 2
    Ostatni post: 30-01-2014, 16:15
  4. Wordpress rozwijane menu
    Przez Elor Tulot w dziale Sprzęt i oprogramowanie
    Odpowiedzi: 0
    Ostatni post: 22-02-2013, 12:59
  5. Android w telefonach.
    Przez WlochatyOdkurzacz w dziale Urządzenia mobilne
    Odpowiedzi: 5
    Ostatni post: 09-10-2011, 13:26

Zakładki

Zakładki

Zasady postowania

  • Nie możesz pisać nowych tematów
  • Nie możesz pisać postów
  • Nie możesz używać załączników
  • Nie możesz edytować swoich postów
  •