Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery, event odnoszący się do kilku div z jednym id nie działa w chrome
Forum PHP.pl > Forum > Po stronie przeglądarki
eFK
18.05.2015, 17:36:37
Witam serdecznie

Napisałam kod w którym dzięki ajaxowi wczytują się kolejne podstrony serwisu i można to zrobić z kilku miejsc w serwisie. Wszystko działa pięknie w Firefoxie, niestety w Chrome i Operze już nie. Pierwsze trzy div o id="bigger" działają bez zarzutu, ale kolejne trzy (wczytujące dokładnie te same podstrony, co divy wyżej) już nie.

Konsola w FF pokazuje błąd: NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsITaskbarTabPreview.invalidate] - nie znalazłam co on konkretnie oznacza, ale nie odnosi się do napisanego przeze mnie kodu i nie przeszkadza w funkcjonownaiu strony. Konsola Chrome nie pokazuje żadnego błędu.

Kod wygląda następująco:
[HTML] pobierz, plaintext 
  1. <html lang="pl" xml:lang="pl" xmlns="http://www.w3.org/1999/xhtml">
  2.  
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Moje portfolio</title>
  6. <meta content="Ewa, Makowska, strony www, grafika komputerowa" name="keywords">
  7. <link rel="Stylesheet" type="text/css" href="style.css" />
  8.  
  9. <script type="text/javascript" src="jquery-1.4.2.js"></script>
  10. <script type="text/javascript" src="slideshow.js"></script>
  11.  
  12. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  13. <script src="scripts.js"></script>
  14.  
  15. <script>
  16.  
  17. /*ajax*/
  18. function ajax(src, cont){
  19.         $.ajax({
  20.             url: src,
  21.             context: document.body,
  22.             success: function(responseText) {
  23.                 $(cont).html(responseText);
  24.                 $(cont).find("script").each(function(i) {
  25.                     eval($(this).text());
  26.                 });
  27.             }
  28.         });
  29. }
  30.  
  31. /*bigger div*/                                        /*prawdopodobnie tutaj jest problem - jquery ma pobiertać wszytkie div o id ="bigger", a pobiera tylko...*/            
  32. $(document).ready(function(){             /*...pierwsze z nich*/
  33. 	$('div#bigger').click(function(){
  34. 		$("#text").animate({ 
  35. 		width: "1050px",
  36. 		left:"150px",
  37. 		padding:"0"
  38. 		}, 1500 );
  39. 		$('#infbox').css('display','none');
  40. 	})
  41. })
  42.  
  43. /*smaller div*/
  44. $(document).ready(function(){
  45. 	$('#menu').click(function(){
  46. 		$("#text").animate({ 
  47. 		width: "650px",
  48. 		left: "520px",
  49. 		padding:'10'
  50. 		}, 1500, 'linear' );
  51. 		$('#infbox').css('display','block');
  52. 	})
  53. })
  54.  
  55.  
  56. </script>
  57.  
  58. </head>
  59.  
  60. <body>
  61.  
  62. <div id="all">
  63. 	<div id="baner">
  64. 		<div id="slideshow">
  65. 			<div id="slideshowWind">                                                                                            <!---tutaj jest cześć z div, które działają bez zarzutu--->
  66. 					<div id="bigger" onClick="ajax('gallery.php', '#text')" class="slide">
  67. 						<span id="galdesc"><p>G<br />A<br />L<br />E<br />R<br />I<br />A</p></span>
  68. 						<img src="img/slideshow/galler2y.png" class="img" />
  69. 					</div>
  70. 					<div id="bigger" onClick="ajax('website.php', '#text')" class="slide">
  71. 						<span id="webdesc"><p>S<br />T<br />R<br />O<br />N<br />Y<br /><br />W<br />W<br />W</p></span>
  72. 						<img src="img/slideshow/website.png" class="img" />
  73. 					</div>
  74. 					<div id="bigger" onClick="ajax('applications.php', '#text')" class="slide">
  75. 						<span id="webdesc"><p>P<br />R<br />O<br />G<br />R<br />A<br />M<br />Y</p></span>
  76. 						<img src="img/slideshow/applications.png" class="img" />
  77. 					</div>
  78. 			</div>
  79. 		</div>
  80. 	</div>
  81. 	<div id="cont">
  82. 		<div id="menu" onClick="ajax('textpl.txt','#text')"><p>MENU</p></div>
  83. 		<div id="teleadr">
  84. 			<p>e-mail:<a   href="mailto:makowskaewa@o2.pl"> makowskaewa@o2.pl</a>&nbsp; | &nbsp; tel: 607079560</p>
  85. 		</div>
  86. 		<div id="infbox">
  87. 			<div id="inf">
  88. 				<p>NA STRONIE:</p>
  89. 				<ul>                                                                                                                                       <!---a to co jest tutaj nie chce działać, żadnej reakcji, nawet :hower ze styli css nie reaguje...--->
  90. 					<li><div id="bigger" onClick="ajax('gallery.php','#text')"><p>galeria</p></div></li>
  91. 					<li><div id="bigger" onClick="ajax('website.php','#text')"><p>webmastering</p></div></li>
  92. 					<li><div id="bigger" onClick="ajax('applications.html','#text')"><p>programowanie</p></div></li>
  93. 					<p>Kilka prostych programów napisanych przy wykorzystaniu php oraz baz danych.</p>
  94. 				</ul>
  95. 			</div>
  96. 		</div>
  97. 		<div id="text">
  98.  
  99. 			<div id="footer"><p>Makowska Ewa, &nbsp;<a   href="mailto:makowskaewa@o2.pl"> makowskaewa@o2.pl</a>&nbsp; | &nbsp;2012-2015</p></div>
  100. 		</div>
  101. 	</div>
  102. </div>
  103.  
  104. </body>
  105. </html>
  106.  
[HTML] pobierz, plaintext


Nie wiem, czy źle odnosze się w jquery do wszystkich div o id#bigger - drugą wersję czyli $("div[id=bigger"]) też próbowałąm wykożystać (również nie działa w chrome i operze), czy tego po prostu nie da się zrobić i musze przekształcić kod na divy o różnych id. Z drugiej strony najbardziej dziwi mnie to że pod Chrome i Operą te trzy problematyczne divy nie wykazują żadnej reakcji, nawet na pseudoklasę :hover?
Będę bardzo wdzięczna za każde wytknięcie mi błędu :-), dzięki któremu mój kod zadziaął prawidłowo pod Chrome i Operą.
ctom
18.05.2015, 17:44:02
atrybut "id" powinien być unikalny dla elemntów w drzewie html,

zastosuj class
eFK
20.05.2015, 08:29:27
Sprawdzałam już wcześniej, sprawdziłam jeszcze raz - niestety też nie działa...

czy nikt nie umie mi nic poradzić?
Xelah
20.05.2015, 09:00:16
Sprawdź, czy to jakis plugin nie wykrzacza się w ten sposób. Wyłącz wszystko co masz i sprawdź czy dalej będziesz miał ten sam błąd.
eFK
21.05.2015, 13:26:38
Niestety, wyłączenie pluginów nie pomogło

Problem rozwiązany - powodem były źle stworzone style css. #infbox; w której znajdowały się divy po naciśnięciu których miało wykonywać się jquery; miało position:absolute, oraz z-index:-1. Bez tego wykonywanie się jquery nie wyglądało ładnie, jednak w Operze i Chrome, spowodowało to, że ukryte pod innymi warstwami divy były niedostępne. A starczyło tylko usunąć z-index:-1 i wszytko gra oraz wygląda nieźle.
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.