Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] załadowanie skryptu dopiero po wyświetleniu diva w oknie przeglądarki
blokern
post 29.10.2016, 18:00:09
Post #1





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 27.02.2008

Ostrzeżenie: (0%)
-----

cześć w jaki sposób odpalić skrypt JS dopiero w momencie w którym w oknie przeglądarki zobaczę w 100% element w tym przypadku div o id="xyz"?

np 

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <h1>test</h1>
  6. <div style="height: 2300px;">abc</div>
  7. <div id="xyz" style="width: 10px; height: 10px; background: #ff6600;"></div>
  8. </body>
  9. </html>
[HTML] pobierz, plaintext


reasumując: wchhodzę na stronę, przewijam stronę w dół i jak w widze warste xyz to załadowuje mi sie skrypt

z góry dziekuje za pomoc


--------------------
www.Opiekuj.pl
Go to the top of the page
+Quote Post
SmokAnalog
post 29.10.2016, 23:35:30
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Pobierasz pozycję elementu w pionie i przy scrollowaniu sprawdzasz czy pozycja okna pokrywa się z pozycją tego elementu. Możesz do tego dodać więcej matematyki i sprawdzać też czy element nie jest czasem widoczny od dołu. Wtedy będziesz potrzebował też wysokości elementu do obliczeń oraz wysokości okna przeglądarki.

Ten post edytował SmokAnalog 29.10.2016, 23:35:45
Go to the top of the page
+Quote Post
blokern
post 30.10.2016, 18:17:44
Post #3





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 27.02.2008

Ostrzeżenie: (0%)
-----

dziekuje SmokAnalog smile.gif

mam taki dzialajacy kod, jak slowo Hello znajdzie sie w oknie przegladarki to wyswietli sie w consoli slowo hura.
jak zrobic zeby sumowal w sekundach czas wyswietlania sie hura w consoli? 


[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  5. <script>
  6. function log(txt) {
  7.   var wys = ($(window).height())
  8.   if((txt)>=0){
  9. 	  if((wys)>=(txt)){
  10.   console.log('hura')
  11. 	  }
  12.   }
  13. }
  14. $(function() {
  15.   var eTop = $('#element').offset().top; 
  16.   log(eTop - $(window).scrollTop()); 
  17.   $(window).scroll(function() { 
  18.     log(eTop - $(window).scrollTop());
  19.   });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  25. <div style="height: 1000px;"></div>
  26. <div id="element">Hello</div>
  27. <div style="height: 1800px;"></div>
  28. </body>
  29. </html>
  30.  
  31.  
[PHP] pobierz, plaintext


--------------------
www.Opiekuj.pl
Go to the top of the page
+Quote Post
SmokAnalog
post 30.10.2016, 18:45:14
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Żeby sumować czas przy zdarzeniu, użyj setInterval() kiedy zdarzenie zachodzi i clearInterval(), kiedy już nie zachodzi. Nie wiem co dokładnie chcesz zrobić, ale najlepiej sumuj jakąś mniejszą porcję czasu niż sekundy, np. 100ms. Jeśli zrobić pełne sekundy, to przy szybkim scrollowaniu licznik złapie zero. No chyba, że tak ma być smile.gif
Go to the top of the page
+Quote Post
blokern
post 30.10.2016, 19:23:08
Post #5





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 27.02.2008

Ostrzeżenie: (0%)
-----

smile.gif setInterval() - dokladnie i wywoluje przy zdarzeniu czyli zaraz w ifie tylko, ze zle zrobilem bo wszystko i tak wywoluje sie przy scrolowaniu $(window).scroll(function() a jak to przerobic tak zeby dzialalo w tle (sprawdzalo pozycje bez scrolowania a poprostu w tle dzialania strony?


--------------------
www.Opiekuj.pl
Go to the top of the page
+Quote Post
SmokAnalog
post 30.10.2016, 20:39:16
Post #6





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Ten setInterval() ustawiasz na scrollu, ale tylko jeśli nie jest aktualnie ustawiony. To jest łatwo sprawdzić, po prostu zapisuj go (lub sam stan) w jakiejś zmiennej i sprawdzaj.
Go to the top of the page
+Quote Post
blokern
post 30.10.2016, 20:39:43
Post #7





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 27.02.2008

Ostrzeżenie: (0%)
-----

sam sobie odpowiem. pewnie kod bardzo zle napisany ale dziala i teraz co sekunde pokazuje mi komunikat "jep" jezeli "Hello" znajduje sie w oknie przegladarki

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  5. <script>
  6. setInterval("abc();",1000); 
  7.     function abc(){
  8.         var eTop = $('#element').offset().top;
  9. 		var roznica = eTop - $(window).scrollTop();
  10. 		var wys = ($(window).height())
  11. 		if((roznica)>=0){
  12. 			if((wys)>=(roznica)){
  13. 			 console.log('jep')
  14. 			}
  15. 		}
  16.     }	
  17. </script>
  18. </head>
  19. <body>
  20. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  21. <div style="height: 1000px;"></div>
  22. <div id="element">Hello</div>
  23. <div style="height: 1800px;"></div>
  24. </body>
  25. </html>
[PHP] pobierz, plaintext


--------------------
www.Opiekuj.pl
Go to the top of the page
+Quote Post
SmokAnalog
post 30.10.2016, 20:44:35
Post #8





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Tak też może być w sumie smile.gif Zrobiłeś inaczej, bo u Ciebie interval działa cały czas i albo dodaje, albo nie. Moja wersja zakładała, że interval w ogóle nie działa, kiedy element jest poza oknem.

Taka ciekawostka - zamiast pisać:
[JAVASCRIPT] pobierz, plaintext 
  1. setInterval("abc();", 1000);
[JAVASCRIPT] pobierz, plaintext


Wystarczy po prostu:
[JAVASCRIPT] pobierz, plaintext 
  1. setInterval(abc, 1000);
[JAVASCRIPT] pobierz, plaintext


Ten post edytował SmokAnalog 30.10.2016, 20:44:57
Go to the top of the page
+Quote Post
blokern
post 30.10.2016, 21:21:23
Post #9





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 27.02.2008

Ostrzeżenie: (0%)
-----

to z (abc,1000) zapamietam. dzieki smile.gif

ogolnie tak to wyglada... ale napisz prosze na co zwrocic uwage przy modyfikacji zeby skrypt tak jak wspomniales dzialal tylko jak element jest w oknie przegladarki? 

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  5. <script>
  6. time = 0;
  7. setInterval(abc,1000); 
  8.     function abc(){
  9.         var eTop = $('#gora').offset().top;
  10. 		var eTopDol = $('#dol').offset().top;
  11. 		var roznica = eTop - $(window).scrollTop();
  12. 		var roznicaDol = eTopDol - $(window).scrollTop();		
  13. 		var wys = ($(window).height())
  14. 		if((roznica)>=0){
  15. 			if((wys)>=(roznica)){
  16. 				var gora = 1;
  17. 				if((wys)>=(roznicaDol)){
  18. 					if((roznicaDol)>=200){
  19. 					var dol = 1;
  20. 							if((gora+dol)>=2){
  21. 							console.log(gora+dol);
  22. 							time++;
  23. 							if((time)==5){
  24. 							console.log('boom'); //tutaj zliczam statystyki
  25. 							}
  26. 						}
  27. 					}
  28. 				}
  29. 			}
  30. 		}
  31.     }	
  32. </script>
  33. </head>
  34. <body>
  35. <div style="height: 1000px;"></div>
  36. <div id="gora"style="border-top: 1px solid #000;"></div>
  37. <div style="height: 200px;">box co ma 200px wysokosci</div>
  38. <div id="dol" style="border-top: 1px solid #000;"></div>
  39. <div style="height: 1000px;"></div>
  40. </body>
  41. </html>
[PHP] pobierz, plaintext


--------------------
www.Opiekuj.pl
Go to the top of the page
+Quote Post
SmokAnalog
post 30.10.2016, 21:29:05
Post #10





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

A może powiedz najpierw do czego Ci jest potrzebne to zliczanie czasu, kiedy element jest widoczny? To jest jakaś informacja czy używasz tego np. przy animacji?
Go to the top of the page
+Quote Post
blokern
post 30.10.2016, 21:37:55
Post #11





Grupa: Zarejestrowani
Postów: 107
Pomógł: 0
Dołączył: 27.02.2008

Ostrzeżenie: (0%)
-----

mam serwis internetowy i chce sprawdzic czy sa widoczne moje reklamy przez dluzszy czas niz 5 sekund i dlatego odliczanie do 5 sekund jest mi potrzebne kiedy div o id gora i div o id dol jest widoczne w oknie przegladarki - skrypt smiga ciagle ale wspomniales ze moze tylko wtedy kiedy dany element sie pokaze?


--------------------
www.Opiekuj.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 10:21
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn