Javascript, schowanie elementu po zmianie rozdzielczości

pytanie zadane 6 sierpnia 2017 w JavaScript przez luki998 Nowicjusz (230 p.)

Cześć,

Mam takie pytanie, zrobiłem skrypt, który po kliknięciu na przycisk pokazuje ukrytego diva, i teraz jak mogę zrobić, żeby po zmianie na określoną rozdzielczość ekranu ten div ukryć ?

próbowałem zrobić do w taki sposób ale nie wiem czy dobrze myślę, i podaną funkcje dodałem do <body onload="zmiana()">


<script type="javascript">


function zmiana() {

var element = document.querySelector('#mobile-menu');
if (element.screen.width > 500)
{
element.style.display = 'none';

}
}


</script>

Ze względu, że dopiero zaczynam przygodę z programowaniem proszę o jasne odpowiedzi od osób, które rzeczywiście się na tym znają.

Dzięki z góry.

3 odpowiedzi

odpowiedź 6 sierpnia 2017 przez Filip31411 Dyskutant (8,820 p.)

No widzisz, jeżeli nadpiszesz style zapisane w arkuszu css'a przez style inline (element.style...) to są one ignorowane.

W takim wypadku pozostaje powrót do konwencji okodowania wszystkiego w js'ie. Kod który napisałeś nie działa, bo funkcja "zmiana" jest wywoływana tylko przy zdarzeniu załadowaniu się strony. A ty potrzebujesz zdarzenia które odpali tą funkcję za każdym razem gdy zostanie zmieniona szerokość okna (resize).

Wszystko jest wytłumaczone w linku który podałem. Nawet to żeby używać addEventListener :)

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

a jeśli chce użyc resize do tego to muszę pobrać ze strony ten element, który chce ukryć czy jeszcze rozdzielczość strony ?

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

i jeszcze dwa pytanka,

menu.addEventListener('resize', function () {
var element = document.querySelector('#mobile-menu');
    if (element.style.display == 'block')
        {
            element.style.display = 'none';
            
    }
    
   

 
    
}, false);

czy jest to dobry zapis i przy zastosowaniu resize wystarczy umieścić skrypt w wersji zew. w head ?

komentarz 6 sierpnia 2017 przez Filip31411 Dyskutant (8,820 p.)

Funkcję masz taką samą, tylko zdarzenie inne podpinasz. Czyli pobierasz wymiary okna, sprawdzasz je ifem, a wewnątrz ifa definiujesz zmienną z divem i przypisujesz mu display: none.

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

A w jaki sposób mogę pobrać wymiary okna i sprawdzić za pomocą if ? Szperam po internecie i znajduje same funkcje a za bardzo nie wiem jak to zapisać

komentarz 6 sierpnia 2017 przez Filip31411 Dyskutant (8,820 p.)

Pobieranie wymiarów okna. Myślę, że z ifem sobie poradzisz ;)

Zdarzenie podpinasz do obiektu window, a podpięcie skryptu daj sobie na koniec tagu body.

PS: Coś pokręciłem, że downvote?

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

Z tym ifem to tak średnio mi idzie ;/

var w = window.innerWidth;
var h = window.innerHeight;
    if (h.resize == true || w.resize == true)
        {
            element.style.display = 'none';
            
    }

za bardzo nie mam pomysłu jak to zapisać

odpowiedź 6 sierpnia 2017 przez CenterPL Pasjonat (19,070 p.)

takie coś lepiej w cssie zrobić - patrz Media queries

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

Próbowałem tak, w style element ma atrybut display:none;

Jeśli kliknę na przycisk element przyjmuje atrybut display:block;

Ustawiłem w media queries, że przy określonej rozdzielczości ma przyjąć atrybut display:none i nie przynosi to pożądanego rezultatu.

komentarz 6 sierpnia 2017 przez Filip31411 Dyskutant (8,820 p.)

A dodałeś w html linijkę z viewportem?

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

Zapomniałem zupełnie o tym, ale dodałem przed chwilą i nic nie zmieniło niestety.

komentarz 6 sierpnia 2017 przez Filip31411 Dyskutant (8,820 p.)

To pokaż kod. Albo spróbuj jeszcze odświeżyć stronę z opróżnieniem pamięci podręcznej (w chromie i firefoxie - ctrl+f5)

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

//plik z media queries 
@media (min-width:1100px)
{
	#mobile-menu {display:none;}
}


//plik z style.css

#mobile-menu
{
	display:none;
	background-color:#000000;
}

Podałem kod do tego elementu co chce ukryć, on ogólnie jest ukryty w style.css ale przy kliknięciu na przycisk przyjmuje wartość 'block', chodzi mi oto aby przy rozdzielczości minimalnej 1100 px znowu przyjął wartość 'none'

komentarz 6 sierpnia 2017 przez Filip31411 Dyskutant (8,820 p.)

A po kliknięciu w przycisk dodajesz divowi display: block; za pomocą js'a (element.style.display = 'block')?

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

za pomocą if (element.style.display == 'none') sprawdzam czy ma wartość none i w nawiasach dalej jak napisales

{

element.style.display = 'block';

}

odpowiedź 6 sierpnia 2017 przez niezalogowany

W komentarzach pojawiły się informacje, że nie da się nadpisać stylów ustawionych przez JS. Nic bardziej mylnego - wszystko zależy od specyfikacji selektorów. Wystarczy dodać w CSS !important <- nie rób tego

Do stylowania używaj CSS, nie JS-a. W CSS piszesz klasy, w JS je podmieniasz. Wtedy normalnie działają atrybuty w media queries, a Ty nie mieszasz warstwy logiki z warstwą prezentacji.

komentarz 6 sierpnia 2017 przez luki998 Nowicjusz (230 p.)

za dużo opisów za mało przykładów jak opisałem na początku dopiero zaczynam programować, to w jaki sposób zrobić taką sekwencje:

1.Nie pokazuj diva na stronie

2. Po kliknięciu na przycisk pokaż go

3. Jeśli rozdzielczość jest większa od x ukryj ten element

komentarz 6 sierpnia 2017 przez Filip31411 Dyskutant (8,820 p.)

Faktycznie, zblokowało mnie i nie pomyślałem o klasach XD

Przepraszam.

komentarz 6 sierpnia 2017 przez niezalogowany

1.Nie pokazuj diva na stronie

.hide {
    display: none;
}

<div id="myDiv" class="myDiv hide">Lorem ipsum</div>

2. Po kliknięciu na przycisk pokaż go

Pierwsza sprawa, to poprawne podpięcie listenera

var myButtonEl = document.querySelector('#myButton');
var myDivEl = document.querySelector('#myDiv');

myButtonEl.addEventListener('click', function(e) {
    myDivEl.classList.add('hide');
    // albo .classList.toggle('hide'); 
    // w zależności od tego, czego potrzebujesz
});

3. Jeśli rozdzielczość jest większa od x ukryj ten element

@media (min-width: xpx) {
    .myDiv {
        display: none;
    }
}

komentarz 6 sierpnia 2017 przez niezalogowany

Pamiętaj, że skrypt powinien być podpięty po załadowaniu elementów DOM. Najlepiej wrzuć go przed tagiem zamykającym body

Podobne pytania

0 głosów

2 odpowiedzi 223 wizyt

Schowanie menu za pomocą JavaScript

pytanie zadane 25 września 2018 w JavaScript przez kameleon Użytkownik (590 p.)

0 głosów

3 odpowiedzi 421 wizyt

Biały margines przy zmianie rozdzielczości - responsywnosc

pytanie zadane 20 sierpnia 2017 w HTML i CSS przez Alcomats Użytkownik (580 p.)

0 głosów

2 odpowiedzi 631 wizyt

[Javascript] Wykrycie rozdzielczości i usunięcie klasy

pytanie zadane 11 grudnia 2018 w JavaScript przez 42savage Bywalec (2,630 p.)

Javascript, schowanie elementu po zmianie rozdzielczości

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci