Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> jQuery show(), Nie działa w chromie
zaajcu
post 25.09.2014, 12:37:07
Post #1





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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?
Go to the top of the page
+Quote Post
tzm
post 25.09.2014, 12:50:27
Post #2





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

Dowód że działa:
http://jsfiddle.net/6r7kvbqt/
Z jQuery 2.1.0
Go to the top of the page
+Quote Post
zaajcu
post 25.09.2014, 12:56:16
Post #3





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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 :/
Go to the top of the page
+Quote Post
viking
post 25.09.2014, 12:59:03
Post #4





Grupa: Zarejestrowani
Postów: 6 378
Pomógł: 1116
Dołączył: 30.08.2006

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

W jaki sposób wczytujesz biblioteki (może asynchronicznie) i gdzie są w kodzie umieszczone?


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
tzm
post 25.09.2014, 13:02:10
Post #5





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
zaajcu
post 25.09.2014, 13:05:18
Post #6





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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 :/

Ten post edytował zaajcu 25.09.2014, 13:03:30
Go to the top of the page
+Quote Post
viking
post 25.09.2014, 13:09:08
Post #7





Grupa: Zarejestrowani
Postów: 6 378
Pomógł: 1116
Dołączył: 30.08.2006

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

Na początek zamknij head i zobacz walidatorem czy innych błędów nie ma.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
tzm
post 25.09.2014, 13:13:15
Post #8





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X---- 

[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.

Ten post edytował tzm 25.09.2014, 13:14:40
Go to the top of the page
+Quote Post
zaajcu
post 25.09.2014, 13:16:59
Post #9





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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 :/
Go to the top of the page
+Quote Post
tzm
post 25.09.2014, 13:19:01
Post #10





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

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ś.
Go to the top of the page
+Quote Post
zaajcu
post 25.09.2014, 13:35:38
Post #11





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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....
Go to the top of the page
+Quote Post
tzm
post 25.09.2014, 13:39:22
Post #12





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
zaajcu
post 25.09.2014, 13:44:12
Post #13





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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 :/
Go to the top of the page
+Quote Post
tzm
post 25.09.2014, 13:47:16
Post #14





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
zaajcu
post 25.09.2014, 14:02:16
Post #15





Grupa: Zarejestrowani
Postów: 206
Pomógł: 3
Dołączył: 18.08.2011
Skąd: Chrzanów

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

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

Ten post edytował zaajcu 25.09.2014, 13:53:02
Go to the top of the page
+Quote Post
tzm
post 25.09.2014, 14:04:42
Post #16





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

To klikaj kto pomógł, będziemy mieli porównanie, heee
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: 21.06.2025 - 11:56
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn