Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jQuery show()
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
zaajcu
25.09.2014, 12:37:07
Cześć.

Mam mały problem z chromem, a mianowicie nie działa mi jak trzeba funkcja show() z jquery. Jak daje F5 do się element nie pokazuje, po wciśnięciu Ctrl+F5 w większości przypadków działa jak trzeba.

W Dom jest tylko jeden element:

[HTML] pobierz, plaintext 
  1. <div id="test" class="full-size"></div>
[HTML] pobierz, plaintext


css:
[HTML] pobierz, plaintext 
  1.  
  2. .full-size{
  3. 	height: 1080px!important;
  4. 	min-height: 1080px;
  5. 	max-height: 1080px;
  6. 	width: 1920px!important;
  7. 	min-width: 1920px;
  8. 	max-width: 1920px;
  9. 	overflow: hidden;
  10. }
  11.  
  12. #test{
  13. 	position: absolute !important;
  14. 	top:0;
  15. 	left:0;
  16. 	display: none;
  17. }
[HTML] pobierz, plaintext



jQuery:

[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2. 	$('#test').show();
  3. })
[HTML] pobierz, plaintext



Używam bibliotek jquery:

http://code.jquery.com/jquery-1.11.1.min.js
http://code.jquery.com/ui/1.11.1/jquery-ui.min.js

Co jest jeszcze lepsze. Jak dam w jQuery zrobie tek:

[HTML] pobierz, plaintext 
  1. $('#test').hide().show();
[HTML] pobierz, plaintext


To wszystko działa:/

Co z tym jest nie tak?
tzm
25.09.2014, 12:50:27
Dowód że działa:
http://jsfiddle.net/6r7kvbqt/
Z jQuery 2.1.0
zaajcu
25.09.2014, 12:56:16
To to ja wiem, że ten kod powinien działać i na firefox, ie nie ma z nim żadnego problemu :/ zastanawia mnie dla czego nie chce chodzić jak trzeba na chrome.
Mam lokalnie postawiony server Wamp. Używałem tej funkcji wielokrotnie i nigdy nie miałem żadnych problemów z nią. Z kodu który mam wykasowałem wszystko zostało to co wam wysłałem, ale niestety dalej to nie pomogło :/ Przy używaniu samego F5 co któryś raz zaskoczy :/
viking
25.09.2014, 12:59:03
W jaki sposób wczytujesz biblioteki (może asynchronicznie) i gdzie są w kodzie umieszczone?
tzm
25.09.2014, 13:02:10
No tez opcja że swój skrypt wczytujesz przed jQuery. Bo ja zauważyłem często tendencje że swoje skrypty ludzie dają do heada a takie kombajny jak jQuery pod koniec body. Albo tu, albo tu.
zaajcu
25.09.2014, 13:05:18
Dodam że przekopiowałem kod do http://jsfiddle.net/ i tam działa ok.

HTML wygląda dokładnie tak:

[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. 	<title></title>
  6. 	<meta name="description" content="">
  7. 	<meta name="keywords" content="">
  8. 	<meta charset="UTF-8">
  9. 	<script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script>
  10. 	<script type="text/javascript" src="lib/jquery-ui.min.js"></script>
  11. 	<script type="text/javascript" src="jquery.js"></script>
  12.  
  13. 	<link type="text/css" href="style.css" rel="stylesheet" />
  14. <body class="full-size">
  15. 	<div id="page" class="full-size">
  16. 		<div id="test" class="full-size">
  17. 		</div>
  18. 	</div>
  19. </body>
  20. </html>
[HTML] pobierz, plaintext


Kolejna ciekawostka, po wpisaniu adresu url - działa ok, po F5 nie :/
viking
25.09.2014, 13:09:08
Na początek zamknij head i zobacz walidatorem czy innych błędów nie ma.
tzm
25.09.2014, 13:13:15 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title></title>
  5. 	<meta name="description" content="">
  6. 	<meta name="keywords" content="">
  7. 	<meta charset="UTF-8">
  8. 	<link type="text/css" href="style.css" rel="stylesheet" />
  9. 	<script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script>
  10.         <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
  11. 	<script type="text/javascript" src="jquery.js"></script>
  12. </head>
  13. <body>
  14. 	<div class="full-size">
  15. 		<div id="test">
  16. 		</div>
  17. 	</div>
  18. </body>
  19. </html>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1.  
  2. .full-size{
  3. 	height: 1080px!important;
  4. 	min-height: 1080px;
  5. 	max-height: 1080px;
  6. 	width: 1920px!important;
  7. 	min-width: 1920px;
  8. 	max-width: 1920px;
  9. 	overflow: hidden;
  10. }
  11.  
  12. #test{
  13. 	position: absolute !important;
  14. 	top:0;
  15. 	left:0;
  16. 	display: none;
  17.   background:red;
  18.   width:100%;
  19.   height:100%;
  20. }
[CSS] pobierz, plaintext


Edit: sam nie zauwazylem braku /head , ale tak juz dziala.
zaajcu
25.09.2014, 13:16:59
Heda zamknąłem validacja ok i dalej to samo F5 nie działa, bezpośrednio z url jest ok :/

Po wywaleniu full-size i zmianie w css dalej nie działa :/
tzm
25.09.2014, 13:19:01
Skopiuj sobie to co Ci dałem bo testowałem to w notatniku a nie na jsfiddle i powiedz czy dalej masz tak samo, u mnie tez nie działało póki nie poprawiłem i teraz hula normalnie. A nie że zamkniesz head'a, wywalisz full-size i zrobisz f5. Zmian jest też kilka w css'ie nie wiem czy zauważyłeś.
zaajcu
25.09.2014, 13:35:38
No faktycznie działa spróbuje to zaadoptować u siebie i zobaczymy co to da

Z tego co zauważyłem dodałeś w css

[HTML] pobierz, plaintext 
  1.   width: 100% 
  2.   height: 100%
[HTML] pobierz, plaintext


i do tego div#test wrzuciłeś do div.full-size.

Jeżeli tyle zmian to dalej nie dział :/ k....
tzm
25.09.2014, 13:39:22
A zmieniłeś sobie background żeby widzieć tego diva czy jest czy nie?
Bo ogólnie jak sprawdzam $('.#test') to mi console.log zwraca że ten div tam jest i ma display:block.
zaajcu
25.09.2014, 13:44:12
Tak dodałem bg.

Ale problem rozwiązany i w sumie też tak masz zrobione czego nie zauważyłem :/


problem tkwił w head. Najpierw ładowałem js a potem css, zmieniłem że css ładuję się najpierw i po problemie wink.gif I wszystko śmiga.

Teraz pytanie dlaczego tak jest? Z tego co kojarzę to kolejność wczytywania nie ma znaczenia :/
tzm
25.09.2014, 13:47:16
Jak to nie? JavaScript to język skryptowy .... co prawda dziwi mnie fakt że $(document).ready() tego nie złapał i spekulując mógł bym pomyśleć że próbował zrobić show() na nie zdefiniowanej w szablonie klasie ale to się dupy i kupy nie trzyma... w końcu ready()... No nie wiem, widocznie tak jest i trzeba pamiętać na przyszłość że ceesesy dawać przed javascriptami.
zaajcu
25.09.2014, 14:02:16
Dziwaczne :/ nigdy nie miałem z tym problemów aż do dziś :/ A już trochę rzeczy porobiłem. Ale to jest chyba bug w chromie bo nawet IE z tym nie miało problemu smile.gif

W js wiem, że kolejność ładowania plików jest ważna.

Kolejne rozwiązanie problemu to asynchroniczne ładowanie js, to też pomogło wink.gif
tzm
25.09.2014, 14:04:42
To klikaj kto pomógł, będziemy mieli porównanie, heee
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.