Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [PHP][CSS][JQuery] Css+Php+Jquery - nie działa ze wszystkimi przeglądarkami, Własny lightbox z paskiem ładowania
organista18
post 4.12.2009, 14:59:23
Post #1





Grupa: Zarejestrowani
Postów: 40
Pomógł: 0
Dołączył: 22.07.2009

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

Witam.

Problem jest dość specyficzny. O ile wcześniej udało mi się stworzyć w pełni działającą stronę na ajaxie (jquery+php), o tyle postanowiłem podnieść sobie poprzeczkę wyżej i zamiast odsłaniającego się diva z gifem ładowania, i po załadowaniu chowającego się (zrobiłem to tutaj: www.omt-reklama.pl - wszystko śmiga ok), zrobić swojego lightboxa z takim paskiem.

Zacznijmy od źródła: www.chor.mjsp.pl

Na przeglądarce Opera 9.51 strona chodzi bezbłędnie, efekt jest dokładnie taki, jaki chciałem osiągnąć.
Schody zaczynają się pod innymi przeglądarkami:
Firefox 3.5.5 - lightbox po załadowaniu strony (zdarzenie $(document).ready w jquery) znika, ale treść z pliku php w divie "main", wogóle nie chce się załadować.
Internet Explorer 7 - lightbox nie chce wogóle zniknąć, treść do diva "main" się nie ładuje.

Proszę o pomoc, bo wyrywam już sobie włosy z głowy, a nadal nie wiem w czym błąd...

Kod głównego pliku strony: index.html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"  />
  8. <title>Zwykły blog - Mariusz Jernalczyk</title>
  9. <link rel="stylesheet" href="src_img/style000.css" type="text/css" media="screen" />
  10. <link rel="alternate" type="application/rss+xml" title="Zwykły blog RSS Feed" href="http://www.mjsp.pl/wptest/feed" />
  11. <link rel="pingback" href="http://www.mjsp.pl/wptest/xmlrpc.php" />
  12. <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.mjsp.pl/wptest/xmlrpc.php?rsd" />
  13. <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.mjsp.pl/wptest/wp-includes/wlwmanifest.xml" /> 
  14. <meta name="generator" content="WordPress 2.7.1" />
  15.  
  16. <!-- this product is released under General Public License. Please see the attached file for details. You can also find details about the license at http://www.opensource.org/licenses/gpl-license.php -->
  17.  
  18. <script language="javascript">AC_FL_RunContent = 0;</script>
  19. <script src="AC_RunActiveContent.js" language="javascript"></script>
  20. <script type="text/javascript" src="scripts/jquery.js"></script>
  21.  
  22. <!-- SKRYPTY JQUERY -->
  23.  
  24. <script type="text/javascript">
  25.  
  26.     $(document).ready(function() 
  27. 	{
  28. 		$("#main").load("news.php");
  29. 		$("#overlay").fadeOut("slow");
  30. 		$(".main").click(function()
  31. 		{
  32. 			$("#overlay").fadeIn("slow");
  33. 			$("#main").load("news.php", function()
  34. 			{
  35. 				$("#overlay").fadeOut("slow");	
  36. 			});
  37. 		});
  38. 		$(".about").click(function()
  39. 		{
  40. 			$("#overlay").fadeIn("slow");
  41. 			$("#main").load("aboutus.php", function()
  42. 			{
  43. 				$("#overlay").fadeOut("slow");	
  44. 			});
  45. 		});
  46. 		$(".about2").click(function()
  47. 		{
  48. 			$("#overlay").fadeIn("slow");
  49. 			$("#main").load("aboutus.php", function()
  50. 			{
  51. 				$("#overlay").fadeOut("slow");	
  52. 			});
  53. 		});
  54. 		$(".conductor").click(function()
  55. 		{
  56. 			$("#overlay").fadeIn("slow");
  57. 			$("#main").load("conductor.php", function()
  58. 			{
  59. 				$("#overlay").fadeOut("slow");	
  60. 			});
  61. 		});
  62. 		$(".success").click(function()
  63. 		{
  64. 			$("#overlay").fadeIn("slow");
  65. 			$("#main").load("success.php", function()
  66. 			{
  67. 				$("#overlay").fadeOut("slow");	
  68. 			});
  69. 		});
  70. 		$(".gallery").click(function()
  71. 		{
  72. 			$("#overlay").fadeIn("slow");
  73. 			$("#main").load("gallery.php", function()
  74. 			{
  75. 				$("#overlay").fadeOut("slow");	
  76. 			});
  77. 		});
  78. 		$(".gallery2").click(function()
  79. 		{
  80. 			$("#overlay").fadeIn("slow");
  81. 			$("#main").load("gallery.php", function()
  82. 			{
  83. 				$("#overlay").fadeOut("slow");	
  84. 			});
  85. 		});
  86. 		$(".records").click(function()
  87. 		{
  88. 			$("#overlay").fadeIn("slow");
  89. 			$("#main").load("records.php", function()
  90. 			{
  91. 				$("#overlay").fadeOut("slow");	
  92. 			});
  93. 		});
  94. 		$(".contact").click(function()
  95. 		{
  96. 			$("#overlay").fadeIn("slow");
  97. 			$("#main").load("contact.php", function()
  98. 			{
  99. 				$("#overlay").fadeOut("slow");	
  100. 			});
  101. 		});
  102. 		$(".contact2").click(function()
  103. 		{
  104. 			$("#overlay").fadeIn("slow");
  105. 			$("#main").load("contact.php", function()
  106. 			{
  107. 				$("#overlay").fadeOut("slow");	
  108. 			});
  109. 		});
  110. 	});
  111. </script>
  112.  
  113. <!-- KONIEC JQUERY -->
  114.  
  115.  
  116.  
  117. </head>
  118.  
  119. <body>
  120.  
  121. <!-- SEKCJA LOADERA FLASH -->
  122.  
  123. <!-- KONIEC SEKCJI LOADERA-->
  124.  
  125. <div id="wrapper">
  126.  
  127. <div id="header">
  128.  
  129. <div id="logo">
  130. <h1><a href="http://www.mjsp.pl/wptest">  Chór św. Grzegorza</a></h1>
  131. <span>    w Nowych Skalmierzycach</span>
  132. </div>
  133.  
  134.  
  135. <div id="topright">
  136. <ul>
  137.   <li class="page_item page-item-2"><a class="about2" href="#" title="O Chórze">O Chórze</a></li>
  138.   <li><a class="gallery2" href="#">galeria</a></li>
  139.   <li><a class="contact2" href="#">kontakt</a></li>
  140. </ul>
  141. </div>
  142.  
  143.  
  144.  
  145. </div> <!-- Closes header -->
  146. <div class="animacja"><center>
  147.  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="970" height="144" id="animacja" align="middle">
  148. 	<param name="allowScriptAccess" value="sameDomain" />
  149. 	<param name="allowFullScreen" value="false" />
  150. 	<param name="movie" value="animacja.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />	<embed src="animacja.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="970" height="144" name="animacja" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  151. 	</object>
  152. </center></div>
  153.  
  154.  
  155. <div id="catnav">
  156. <div id="toprss"></div>
  157.  <!-- Closes toprss -->
  158. <ul id="nav">
  159.   <li><a class="main" href="#">Strona Główna</a></li>
  160.   <li class="about"><a href="#" title="Informacje o naszym chórze">O Chórze</a>
  161. </li><li class="conductor"><a href="#" title="O naszym dyryencie">Dyrygent</a></li><li class="success"><a href="#" title="Nasze osiągnięcia i repertuar">Osiągnięcia</a></li><li class="gallery"><a href="#" title="Galeria">Galeria</a></li><li class="records"><a href="#" title="Nasze Nagrania">Nagrania</a></li><li class="contact"><a href="#" title="Kontakt z nami">Kontakt</a></li>
  162. </ul>
  163. </div> <!-- Closes catnav -->
  164.  
  165. <div class="cleared"></div>
  166.  
  167. <div id="main">
  168.  
  169.  
  170. </div><!-- Closes Main -->
  171. <!-- Closes morefoot -->
  172.  
  173. <div id="footer">
  174. <div id="footerleft">
  175. <p align="center">Powered by <a href="http://www.mjsp.pl">Mariosoft Design Studio</a> (C) 2009 - Chór św. Grzegorza - Nowe Skalmierzyce </p>
  176. <!-- Please don't remove my credits! I worked hard to create this theme and distribute it freely. Thanks! -->
  177. </div>
  178.  
  179. <div class="cleared"></div>
  180. </div><!-- Closes footer -->
  181.  
  182. </div><!-- Closes wrapper -->
  183.  
  184.  
  185. <!-- OKIENKO ŁADOWANIA -->
  186. <div id="overlay">
  187.   <div id="window">
  188.     <div id="inner"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="loader2" width="384" height="55" vspace="8" align="middle" id="loader2">
  189.       <param name="allowScriptAccess" value="sameDomain" />
  190.       <param name="allowFullScreen" value="false" />
  191.       <param name="movie" value="loader.swf" />
  192.       <param name="quality" value="high" />
  193.       <param name="bgcolor" value="#000000" />
  194.       <embed src="loader.swf" width="384" height="55" vspace="8" align="middle" quality="high" bgcolor="#000000" name="loader2" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />      
  195.     </object></div>
  196.   </div>
  197. </div>
  198. <!-- KONIEC OKIENKA ŁADOWANIA -->
  199.  
  200. </body>
  201. </html>
[HTML] pobierz, plaintext


Plik z treścią: news.php:
[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. </script>
  3.  
  4. <!-- treść -->
  5. <div id="tresc">
  6. <!-- top_img -->
  7. <div class="top_img"></div>
  8. <!-- koniec top_img -->
  9. <!-- content -->
  10. <div id="content" class="content">
  11. <!----------------------------------TUTAJ TREŚĆ STRONY--------------------------------------------->
  12. <div class="topPost">
  13.   <h2 class="topTitle"><a href="#">Witamy :)</a></h2>
  14.   <p class="topMeta">Autor: Mariusz Jernalczyk Dnia: 24 Października 2009 Dzial: Aktualnosci
  15.   <div class="topContent">
  16.     <p>Witamy serdecznie na naszej stronie internetowej i zapraszamy do jej przeglądania :) Można tutaj znaleźć informacje o naszym zespole, dyrygencie, repertuarze, oraz o tym, jak z nami śpiewać ("w dziale Kontakt")</p>
  17.     <p><img src="images/6.jpg" width="800" height="600" /></p>
  18.     <p> </p>
  19.   </div>
  20.   <p><span class="topComments"><a href="#" title="Comment on Hello world!">0 Komentarzy</a></span>
  21.   <hr /></p>
  22.   <div class="cleared"></div>
  23.  
  24.  
  25. <!----------------------------------TUTAJ KONIEC TREŚCI STRONY------------------------------------->
  26.  
  27. </div>
  28. </div>
  29. <!-- koniec contentwrapper -->
  30. <div class="bottom_img"></div>
  31. </div>
  32. <!-- Closes contentwrapper-->
  33. <!-- Closes Sidebars -->
  34. <div class="cleared">
  35.  
  36. </div>
[PHP] pobierz, plaintext



Z góry dziękuję wszystkim zainteresowanym za pomoc.


Edit:
Problem częściowo rozwiązany. To że we firefoxie się treść nie wyświetlała było spowodowane moim komentarzem w kodzie:
[HTML] pobierz, plaintext 
  1. <!--------------------------------->
[HTML] pobierz, plaintext


Jednak problem pozostaje nadal w IE7. Niechce zniknąć warstwa overlay w tym zdarzeniu:
[HTML] pobierz, plaintext 
  1.     $(document).ready(function() 
  2. 	{
  3. 		$("#main").load("news.php");
  4. 		$("#overlay").fadeOut("slow");
[HTML] pobierz, plaintext


Czy ktoś zna powód, dlaczego IE7 tego nie może przetrawić?

Ten post edytował organista18 4.12.2009, 15:00:32
Go to the top of the page
+Quote Post

Posty w temacie
- organista18   [PHP][CSS][JQuery] Css+Php+Jquery - nie działa ze wszystkimi przeglądarkami   4.12.2009, 14:59:23

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · 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 - 09:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn