czasowy mały popup

pytanie zadane 29 stycznia 2019 w Grafika i multimedia przez Bzytek Użytkownik (810 p.)

Witam

Wszędzie gdzie spojrzę okienko z komunikatem popup wyskakuje i trzeba je samodzielnie zamknąć. Mi z kolei zamarzył się taki niewielki rozmiarowo popup ukazujący się tylko w rozdzielczości mobile - czyli koło 600px chociaż to nie jest sztywny rozmiar - ale znikający sam powiedzmy po 5 sek. Zna ktoś jakiś link do podobnego kodu? (szukałem u wujka google ale nic sensownego nie znalazł)

komentarz 29 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Ale o co dokładnie pytasz, chodzi o aplikację webową, o jakieś NotificationAPI, i apkę mobilną itp.?

komentarz 31 stycznia 2019 przez Bzytek Użytkownik (810 p.)
edycja 31 stycznia 2019 przez Bzytek

Chodzi o stronę internetową ,a konkretnie o stronę "główną" z menu

Sam skrypt już wymodziłem.

<script type="text/javascript">
// close 5 secs
window.setTimeout("closeHelpDiv();", 6200);

function closeHelpDiv(){
document.getElementById("helpdiv").style.display=" none";
}
</script>

<div id="helpdiv">Zniknę za 5 sek</div>

Zastosowałem zanikający div które to rozwiązanie mnie urządza ALE nie chce on reagować na css @media (max-width: 600px)

komentarz 31 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

nie dałeś css więc nie wiemy jak to stylujesz :)

Po za tym raczej w setTimeoout stosuj inny zapis:

setTimeout(() => {
  // body funkcji
}, time)

komentarz 31 stycznia 2019 przez Bzytek Użytkownik (810 p.)

zastosowałem taki css

	# helpdiv  {
  display: none;
}

@media (max-width: 600px) {
  # helpdiv  {
    display: block;
  }

w innych miejscach na stronie /ale nie tej z zanikaniem/ się to sprawdza w 100%

komentarz 3 lutego 2019 przez Riddick Bywalec (2,600 p.)

@Tomek Sochacki, Odradzam stosowanie elementów z ECMAScript 6 bez użycia boundlera ponieważ na starszych przeglądarkach kod po prostu nie zadziała. Mija się to kompletnie z celem ponieważ i tak nie użyjesz większości dobroci ES6 lub ES7 a na niektórych urządzeniach skrypt nie zadziała. Jak ES6 lub 7 to tylko z boundlerem np Babel.

komentarz 3 lutego 2019 przez Tomek Sochacki Ekspert (227,510 p.)

chodzilo mi akurat po prostu o unikanie eval i wrzucenie wywolania funkcji w callback albo podanie jej jako referencje, nikt nie kaze stosowac arrow func, możesz to zapisac tradycyjnie, tu chodzilo o ideę a nie o stosowanie ES6.

komentarz 17 marca 2019 przez Riddick Bywalec (2,600 p.)

<script type="text/javascript">
// close 5 secs
function closeHelpDiv(){
document.getElementById("helpdiv").style.display=" none";
}

setTimeout(closeHelpDiv, 6200);
 
</script>

Do funkcji setTimeout nie podaje się Stringa tylko podaje się albo całą funkcję albo referencję do funkcji referencje piszę się bez nawiasów

Nie ma potrzeby pisania window jest to obiekt, który jest domyślnie brany jako kontekst do wszystkiego co piszesz w JS. Jeśli wpiszesz window oraz this w konsoli JS uzyskasz dokładnie ten sam wynik bo odnosi się to do tego samego elementu

komentarz 17 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Nie ma potrzeby pisania window jest to obiekt, który jest domyślnie brany jako kontekst do wszystkiego co piszesz w JS

zazwyczaj tak, ale kilka razy zarzyło mi się, że gdy nie było tego słówka window to monitoring NewRelic potrafił pluć nieistniejącymi błędami o próbie pobrania pola z undefined... :) Także w 99% procentach przypadków masz rację, ale warto wiedzieć, że zapis z window jest poprawny o czasami się przydaje.

1 odpowiedź

odpowiedź 29 stycznia 2019 przez Riddick Bywalec (2,600 p.)

Cóż no to raczej nic trudnego, jak znasz w miarę dobrze JS a najlepiej Jquery też to bez problemu napiszesz sobie w samym html i css takie okienko a Javascriptem sprawdzisz rozdzielczość okna przeglądarki i na tej podstawie określisz typ urządzenia np jeśli okno przeglądarki ma maksymalnie 700 pikseli to ustaw na gotowym popupie klasę show (klasa show by miała display: block a bez tej klasy popup by miał display: none). A dalej ustawiasz timeout który usunie tą klasę i popup zniknie. Możesz też dodać przycisk do popupa który od razu go zamknie.

Nie polecam szukania gotowego kodu a nawet jeśli to go nie kopiuj a inspiruj się nim. Więcej się w ten sposób nauczysz.

komentarz 31 stycznia 2019 przez Bzytek Użytkownik (810 p.)
edycja 31 stycznia 2019 przez Bzytek

Jak pisałem w odpowiedzi wyżej - sam skrypt już mam ect.... ect...

Ten div ma się ukazać tylko przez max 5 sek i sam zaniknąć (to już mam) bez żadnego klikania na button

Teraz chodzi o ukazywanie i zanikanie tylko pod @media (max-width: 600px) /patrz post wyżej/

komentarz 3 lutego 2019 przez Riddick Bywalec (2,600 p.)

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

Tak pobierasz szerokość okna w js. Resztę chyba wiesz :)

komentarz 5 lutego 2019 przez Bzytek Użytkownik (810 p.)

aż taki nie jestem oblatany w skryptach - ten co wymodziłem wzorowałem na skrypcie z codepena

Stąd moje pytanie: jak w praktyce zastosować twoje rozwiązanie?