Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dwa skrypty i dwie galerie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
darksiders94
14.07.2014, 12:25:27
Mam stronkę. Do tej strony mam kilka skryptów. Jeden slider na górze. Na każdej podstronie te same skrypty, więc jeden plik js. Teraz chcę na jednej z podstron zrobić drugi slider na dole. W tym samym pliku js wszystko się kłóci ze sobą. W osobnych również się kłóci. Ten, który jest podlinkowany niżej działa, a ten nad nim już nie. Jak umieścić w sekcji head pliki js aby się nie gryzły? Drugie pytanie: Jak w skryptach lub CSS odwoływać się do różnych input, img itd jeśli jest ich dużo na stronie? 

[HTML] pobierz, plaintext 
  1. <head>
  2. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.  
  4. 		<script type="text/javascript" src="skryptySzablony.js"></script>
  5. 		<script type="text/javascript" src="skrypty.js"></script>
  6.  
  7. 		<link rel="stylesheet" href="css/reset.css" />
  8. 		<link rel="stylesheet" href="css/style.css" />
  9. </head>
[HTML] pobierz, plaintext
markuz
14.07.2014, 12:29:36
Ad. 1.
Nazwy funkcji, zmiennych, obiektów tworzyć z innym przedrostkiem np. ss_ dla skryptySzablony.js a s_ dla skrypty.js.
Ad. 2.
Może za pomocą klas? Albo klas elementów nadrzędnych? itp. itd. możliwości jest wiele.

darksiders94
14.07.2014, 12:34:23
Hmm.. no tak, ale nazwy funkcji mam zupełnie inne dla tych dwóch plików. W jednym pliku znajdują się inne funkcje a w drugim inne. Co wtedy da mi przedrostek?
markuz
14.07.2014, 12:50:15
Nic. A konsola co Ci zwraca?
darksiders94
14.07.2014, 13:16:50
ReferenceError: body is not defined skryptySzablony.js:15
TypeError: imie is null

to drugie wiem do czego ale z tym pierwszym mam problem i nie wiem jak to zrobic..
markuz
14.07.2014, 13:35:02
A podzielisz się tymi dwoma plikami?
Jesteś pewny, że osobno działają poprawnie? (Konsola wtedy nic nie wyrzuca?)
darksiders94
14.07.2014, 13:36:48
1. plik skrypty.js


[HTML] pobierz, plaintext 
  1. //---------------------------------BANER-------------------------------
  2.  
  3. var zdjecia = new Array("obraz-slider1","obraz-slider2","obraz-slider3");
  4.  
  5. const FOTY = "zdjecia/";
  6. const SEC = 1000;
  7. const ZMIANA = 5*SEC;
  8.  
  9. indeks = 0;
  10.  
  11.  
  12.  
  13.  
  14. function uaktualnij(){
  15. var img = document.getElementsByTagName("img");
  16. img[0].src = FOTY + zdjecia[indeks] + ".jpg";
  17. indeks++;
  18. if(indeks==zdjecia.length)
  19.  indeks=0;
  20. //NAPISY NA SLAJDERZE-----------------------------------------------------
  21. var napisA = document.getElementById("napis1");
  22. if(indeks==1){
  23. napisA.style.visibility='visible';
  24. }else{
  25. napisA.style.visibility='hidden';
  26. }
  27.  
  28. var napisB = document.getElementById("napis2");
  29. if(indeks==2){
  30. napisB.style.visibility='visible';
  31. }else{
  32. napisB.style.visibility='hidden';
  33. }
  34.  
  35. var napisC = document.getElementById("napis3");
  36. if(indeks==0){
  37. napisC.style.visibility='visible';
  38. }else{
  39. napisC.style.visibility='hidden';
  40. }
  41.  
  42. }
  43. //PRZYCISKI----------------------------------------------------------
  44. function wstecz(){
  45. indeks-=2;//cofamy się o dwa, bo aktualny indeks wskazuje na zdjęcie następne w kolejce, a nie aktualnie wyświetlane
  46. if(indeks==-1)
  47. indeks=0;
  48. if(indeks==-2)
  49. indeks=1;
  50. }
  51.  
  52. function nastepny(){
  53. if(indeks==0)
  54. indeks=2;
  55. }
  56. //INTERVAL DO SLAJDERA-------------------------------------------------
  57. function startInterval(){
  58. interval = setInterval(function(){ uaktualnij(); }, ZMIANA);
  59. }
  60.  
  61. function stopInterval(){
  62. 	clearInterval(interval);
  63. }
  64. //STRZALKA DO GÓRY------------------------------------------------------
  65. function on_top(){
  66. if(window.scrollY!=0){
  67. window.scrollBy(0,-50);
  68. setTimeout('on_top()',0.1);
  69. }
  70. }
  71. //DYMEK-----------------------------------------------------------------
  72. function dymeczek(){
  73. var dym = document.getElementById("dymek");
  74. if(dym.style.visibility=='visible'){
  75. dym.style.visibility='hidden';
  76. }else{
  77. dym.style.visibility='visible';
  78. }
  79. }
  80. //ZEGAR-----------------------------------------------------------------
  81. function getTime(){
  82. return (new Date()).toLocaleTimeString();
  83. }
  84.  
  85. setInterval (function(){
  86. document.getElementById('zegar').innerHTML = getTime();  
  87. }, 1000);
  88. //ZNIKANIE STRZALKI-------------------------------------------------
  89. function znikanie(){
  90. var strzalka = document.getElementById("gora");
  91. if(window.pageYOffset>100){
  92. strzalka.style.visibility='visible';
  93. }else
  94. {strzalka.style.visibility='hidden';}
  95. }
  96. //CHOWANIE BOCZNEGO MENU-----------------------------------------------
  97. function zam_otw(){
  98. var menu = document.getElementById("boczne_menu");
  99.  
  100.  
  101. if(przycisk_menu.value == "Zamknij"){
  102. 	boczne_menu.style.left='-35px';
  103. 	przycisk_menu.style.left='0px';
  104. 	przycisk_menu.value = "Otwórz";
  105. }else{
  106. 	boczne_menu.style.left='0px';
  107. 	przycisk_menu.style.left='35px';
  108. 	przycisk_menu.value = "Zamknij";
  109. 	}
  110. }
  111. //FORMULARZ--------------------------------------------------------------
  112. //MENU BOCZNE------------------------------------------------------------
  113. function menubok(){
  114. var lista = document.getElementById("lista2");
  115. 	if(lista.style.display == 'none'){
  116. 	lista.style.display = 'block';
  117. 	}
  118. }
  119. function wylmenubok(){
  120. 	var lista = document.getElementById("lista2");
  121. 	lista.style.display = 'none';
  122. }
  123. //CIASTECZKA-----------------------------------------------------------
  124. function stworzCiastko(nazwa, wartosc, waznosc){
  125. 	var wygasa = "";
  126.  
  127. 	if(waznosc){
  128. 		var data = new Date();
  129. 		data.setTime(data.getTime() + (1000 * 60 * 60 * 24 * waznosc));
  130. 		wygasa = "; expires=" + data.toGMTString();
  131. 	}
  132.  
  133. 	document.cookie = nazwa + "=" + wartosc + wygasa;
  134. }
  135. function pobierzCiastko(nazwa){
  136. 	var ciastka = document.cookie;
  137. 	if(ciastka != ""){
  138. 		ciastka = ciastka.split("; ");
  139. 		for(var i in ciastka){
  140. 			var cnazwa = ciastka[i].split("=")[0];
  141. 			if(cnazwa == nazwa){
  142. 				var wartosc = ciastka[i].split("=")[1];
  143. 				return unescape(wartosc);
  144. 			}
  145. 		}
  146. 	}
  147. }
  148. function sprawdzCiastko(nazwa){
  149. 	var wartosc = pobierzCiastko(nazwa);
  150. 	var imie = document.getElementById("imie");
  151. 	if(wartosc){
  152. 		imie.innerHTML = wartosc;
  153. 	}else{
  154. 		wartosc = rozmowa(), komunikatCiastka();
  155. 		waznosc = 365;
  156. 		if(wartosc || !isNaN(waznosc)){
  157. 			stworzCiastko(nazwa, wartosc, waznosc);
  158. 			imie.innerHTML = wartosc;
  159. 		}else{
  160. 			alert("nie tworze ciastka");
  161. 		}
  162. 	}
  163. }
  164. //CIASTECZKA-PRZYCISK-----------------------------------------------
  165. function uwaga(){
  166. var komunikat = document.getElementById("ciasteczka");
  167. 	if(komunikat.style.visibility=='visible'){
  168. 		komunikat.style.visibility='hidden';
  169. 	}
  170. }
  171. function komunikatCiastka(){
  172. var komunikat = document.getElementById("ciasteczka");
  173. 	if(komunikat.style.visibility=='hidden'){
  174. 		komunikat.style.visibility='visible';
  175. 		}
  176. }
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183. //wyswietlanie---------------------------------------------------------
  184. window.onload = function(){	
  185. 	uaktualnij();
  186. 	startInterval(); 
  187.  
  188. 	//PRZYCISKI-----------------------------------------
  189. 	var but = document.getElementById("przycisk_stop");
  190. 	var start = "Rozpocznij prezentację";
  191. 	var stop = "Wstrzymaj prezentację";
  192. 	przycisk_stop.value = stop;
  193. 	przycisk_stop.onclick = function(){
  194. 		if(this.value == stop){
  195. 			stopInterval();
  196. 			this.value = start;
  197. 		}else{
  198. 			startInterval();
  199. 			this.value = stop;
  200. 		}
  201. 	}
  202.  
  203. 	var but = document.getElementById("przycisk_poprzedni");
  204. 	przycisk_poprzedni.onclick = function(){
  205. 		stopInterval();
  206. 		wstecz();
  207. 		uaktualnij();
  208. 		if(przycisk_stop.value == stop)
  209. 		startInterval();
  210. 		if(przycisk_stop.value == start)
  211. 		stopInterval();
  212. 	}
  213.  
  214. 	var but = document.getElementById("przycisk_nastepny");
  215. 	przycisk_nastepny.onclick = function(){
  216. 		stopInterval();
  217. 		nastepny();
  218. 		uaktualnij();
  219. 		if(przycisk_stop.value == stop)
  220. 		startInterval();
  221. 		if(przycisk_stop.value == start)
  222. 		stopInterval();
  223. 	}
  224. 	//STRZALKA DO GORY---------------------------------------
  225. 	var top = document.getElementById("gora");
  226. 	gora.onclick = function(){
  227. 		on_top();
  228. 	}
  229. 	//DYMEK----------------------------------------------------
  230. 	var klocek = document.getElementById("klocek4-menu");
  231. 	klocek.onclick = function(){
  232. 		dymeczek();
  233. 	}
  234. 	//ZNIKANIE STRZALKI-----------------------------------------
  235. 	window.onscroll = function(){
  236. 		znikanie();
  237. 	}
  238. 	//ZEGAR--------------------------------------------------
  239. 	document.getElementById('zegar').innerHTML = getTime();
  240. 	//OTWIERANIE.ZAMYKANIE MENU BOCZNE---------------------------------
  241. 	var otwieranie = document.getElementById("przycisk_menu");
  242. 	przycisk_menu.value = "Zamknij";
  243. 	przycisk_menu.onclick = function(){
  244. 		zam_otw();
  245. 	}
  246. 	//MENU BOCZNE--------------------------------------------------------------
  247. 	var lista = document.getElementById("lista2");
  248. 	lista.style.display = 'none';
  249. 	var ON = document.getElementById("ON");
  250. 	ON.onmouseover = function(){
  251. 		menubok();
  252. 	}
  253. 		onclick = function(){
  254. 		wylmenubok();
  255. 	}
  256. 	//CIASTECZKA-----------------------------------------------------------
  257. 	var zamknij = document.getElementById("zamknijUwaga");
  258. 	var komunikat = document.getElementById("ciasteczka");
  259. 	komunikat.style.visibility='hidden';
  260. 	zamknij.onclick = function(){
  261. 		uwaga();	
  262. 	}
  263. 		var nazwaCiastka = "niezapominajka";
  264. 		sprawdzCiastko(nazwaCiastka);
  265.  
  266.  
  267.  
  268. }	
  269.  
  270.  
  271.  
  272. //---------------------------------------ROZMOWA---------------------
  273.  
  274.  
  275. function rozmowa(){
  276. var zobaczskrypty = confirm("Czy chcesz zobaczyć wszystkie skrypty utworzone na tej stronie?");
  277. if(zobaczskrypty == true){
  278.  
  279. 			var podajimie = prompt("W takim razie, proszę, podaj mi swoje imię:");
  280.  
  281. 			if(podajimie == null || podajimie ==""){
  282.  
  283. 			alert("Widocznie masz brzydkie imię. Mimo to możesz wejść.");
  284.  
  285. 		}else{
  286.  
  287. 			var podobasie = confirm("Witaj " + podajimie + ", miło Cię poznać! :) Te okienka są właśnie kilkoma ze skryptów. Podobają Ci się?");
  288.  
  289. 			if(podobasie == true){
  290.  
  291. 				var zagramy = confirm("Świetnie, zagramy w grę? :)");
  292.  
  293. 				if(zagramy == true){
  294.  
  295. 					var wybierz = prompt("Wybierz liczbę od 1 do 5:");
  296.  
  297. 					if(wybierz == 3){
  298. 						alert("Brawo! Dostajesz 10 punktów! Masz dziś szczęście, baw się dobrze na mojej stronie :)");
  299. 					}else if(wybierz == null){
  300. 						alert("Zdecyduj się w końcu czy grasz!");
  301. 					}else if(wybierz == 1 || wybierz == 4){
  302. 						alert("Przykro mi. Nic nie dostałeś. Zobacz moją stronę :)"); 
  303. 					}else if(wybierz == 2 || wybierz == 5){
  304. 						alert("Dostajesz 5 punktów! Źle nie jest, ale mogło być lepiej :)");
  305. 					}else if(wybierz > 5 || wybierz < 1){
  306. 						alert("Koniec gry, nie potrafisz czytać!");
  307. 					}
  308.  
  309. 				}else{
  310.  
  311. 					alert("Szkoda, może następnym razem");
  312.  
  313. 				}
  314.  
  315. 			}else{
  316.  
  317. 				alert("Widocznie masz zrypany gust. Mimo wszystko możesz wejść.");
  318.  
  319. 			}
  320.  
  321. 	}
  322.  
  323. 	}else{
  324.  
  325. 	alert("Szkoda, ale możesz wejść dalej.");
  326.  
  327. }
  328.  
  329.  
  330. }
[HTML] pobierz, plaintext


2. plik skryptySzablony.js

[HTML] pobierz, plaintext 
  1. //GALERIA-----------------------------------------------------------------
  2. var Szablony = new Array("obrazek1","obrazek2","obrazek3");
  3.  
  4. const FOTKI = "zdjecia/mini/";
  5.  
  6. indeks = 0;
  7.  
  8. function aktualizacja(){
  9. var img = document.getElementsByTagName("img");
  10. img[1].src = FOTKI + Szablony[0] + ".png";
  11. img[2].src = FOTKI + Szablony[1] + ".png";
  12. img[3].src = FOTKI + Szablony[2] + ".png";
  13. }
  14.  
  15. window.onload = function(){	
  16. 	aktualizacja();
  17.  
  18.  
  19. }
[HTML] pobierz, plaintext
markuz
14.07.2014, 13:43:39
Może spróbuj tak:

1. To co masz w window.onload w 1 pliku (skrypty.js) wrzuć do jakieś funkcji np. window_onload_skrypty()
2. Wywal window.onload z tych dwóch plików
3. Dodaj nad samym znacznikiem (na "dole" strony) </body> znaczniki <script type="text/javascript></script> w a nich:
[JAVASCRIPT] pobierz, plaintext 
  1. window.onload = function()
  2. {
  3.     window_onload_skrypty();
  4.     aktualizacja();
  5. }
[JAVASCRIPT] pobierz, plaintext


Zanim wczyta się okno (window.onload) 2 pliki zostaną wczytane, a co za tym idzie ten który się wczyta później - podmieni funkcję window.onload. (Przynajmniej tak mi się wydaje wink.gif)

Tutaj masz przykład: http://jsfiddle.net/qH78W/
Według twojego skryptu powinno się wyświetlić najpierw 1 a potem 2. Natomiast wyświetla się samo 2 A co za tym idzie wykona sie tylko ostatnio zdefiniowana funkcja window.onload.
darksiders94
14.07.2014, 13:51:56
Hmm.. teraz jest tak, że kolejność w head nie ma znaczenia i skrypty.js się wczytują bez problemu, a skryptySzablony nie wczytują się w ogóle. Konsola nie wywala teraz błędu. Może to wina samego skryptu
markuz
14.07.2014, 13:54:15
Używaj console.log(), na przykładzie twojego skryptu:
[JAVASCRIPT] pobierz, plaintext 
  1. function aktualizacja(){
  2. var img = document.getElementsByTagName("img");
  3. console.log(img);
  4. img[1].src = FOTKI + Szablony[0] + ".png";
  5. img[2].src = FOTKI + Szablony[1] + ".png";
  6. img[3].src = FOTKI + Szablony[2] + ".png";
  7. }
[JAVASCRIPT] pobierz, plaintext


Powinno zwrócić tablicę z przynajmniej 4 elementami (w skrypcie odnosisz się do img[1] chociaż img[0] to pierwszy element - celowo?)
darksiders94
14.07.2014, 13:56:19
celowo. Ponieważ mam na stronie już jeden element img na górze przy pierwszym slajderze. Kiedy wpiszę 1 to skrypt działa przy tym na dole a gdy wpiszę 0 to przy tym u góry.
markuz
14.07.2014, 14:03:55
Co zwróciła konsola? 4 elementy?
Co chcesz osiągnąć za pomocą drugiego skryptu?

Już w jednym z pierwszych postów napisałeś, ze funkcje się nie powtarzają a mimo tego window.onload jakoś się powtarzał - czyż nie? smile.gif

Jak będę Ci podawać fragment kodu następnym razem (albo ktokolwiek inny z tego forum) z console.log() w środku - to chce abyś przekazał dalej co zwróciło console.log() bo bez tego nie dojdziemy do niczego.
darksiders94
14.07.2014, 14:13:46
Konsola już nic nie zwraca. Dopiero zaczynam z JS i może to jakaś pierdoła.

Chciałem po prostu zrobić drugi slajder na dole strony. To wszystko biggrin.gif A tu mi nagle wszystko szaleje.

Dobra.. już mam. Przyczyną jednak było name.. Było niepotrzebną wartościa i to mi zaburzało cały kod. Nie miałem pojęcia, że to aż tak istotne. Dziękuję za pomoc i zaangażowanie smile.gif
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.