Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Zwijanie i rozwijanie divów - problem - rozwiązany
Forum PHP.pl > Forum > XML, AJAX
p1rwszak
16.02.2012, 12:37:45
Witam,
Jako, że jest to mój pierwszy post na tym forum więc jeszcze raz witam wszystkich. ;p

Piszę tu ponieważ mam problem z jQuery i mam nadzieje, że będziecie w stanie mi pomóc. Domyślam się, że dla znawców jQuery problem jest błachy lecz ja dopiero od wczoraj "badam" tą bibliotekę. smile.gif
Problem polega na tym, mam menu "oferta" i "kontakt" po kliknieciu w którąś opcje ma się wysunąć odpowiedni div z zawartością. I wysuwa się, jest ok. Ale jeśli jest już wysunięty div oferta to po kliknięciu w kontakt ma się schować i wysynąć div kontakt no i tu też jest ok, a w drugą stronę już nie. To znaczy jeśli jest aktywny div kontakt i klikam w menu oferta to wyskakuje mi oferta od razu i to ona sie chowa i wysuwa zamiast najpierw schować sie kontakt i dopiero wtedy wysunąć oferta.

Wiem, opis dość mętny tongue.gif dlatego TU jest link gdzie to przedstawiam online, a po niżej cały listing źródła strony.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. 		<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
  6. 		<script type="text/javascript">
  7. 			function showContent(typ, wysokosc) {
  8. 					wylacz();
  9. 					wlacz(typ, wysokosc);
  10. 			}
  11.  
  12. 			function wylacz() {		
  13. 					$('.content').animate({height: 0},1000);
  14. 					$('.zamknij').fadeOut(1000);
  15. 					$('.zamknij').removeClass("zamknij");	
  16. 			}
  17.  
  18. 			function wlacz(typ, wysokosc) {
  19. 					$('.content').animate({height: wysokosc},1000);
  20. 					$('.'+typ).fadeIn(1000);
  21. 					$('.'+typ).addClass("zamknij"); 
  22. 			}
  23. 		</script>
  24. 	</head>
  25. 	<body>
  26. 		<div class="content" style="height: 0px; width: 200px;">
  27. 			<div class="oferta" style="display: none; background: #c2c2c2; width: 100%; height: 100%; color: white;">OFERTA</div> 
  28. 			<div class="kontakt" style="display: none; background: #000000; width: 100%; height: 100%; color: white;">KONTAKT</div> 	
  29. 		</div>
  30. 		<a href="#" onclick="java script:showContent('oferta', 200);" title="oferta" >oferta</a>
  31. 		<a href="#" onclick="java script:showContent('kontakt', 200);" title="kontakt" >kontakt</a>
  32. 	</body>
  33. </html>
[HTML] pobierz, plaintext


Proszę o pomoc
pozdrawiam smile.gif
wookieb
16.02.2012, 12:39:34
http://api.jquery.com/slideToggle/
p1rwszak
16.02.2012, 12:52:17
Dzięki za odpowiedź. Niestety nic nie dało, efekt końcowy podobny jak fadeIn/Out ;/ Może coś więcej podpowiesz? Albo w ogóle jakiś inny pomysł? smile.gif
wookieb
16.02.2012, 12:55:26
Podobny do fadeOut/fadeIn? Gdzie? Przecież w domyślnym slideToggle nie ma nawet zmiany opacity.
p1rwszak
16.02.2012, 13:02:35
No tak mój błąd tongue.gif Wymieniłem tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. 		<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
  6. 		<script type="text/javascript">
  7. 			function showContent(typ, wysokosc) {
  8. 					wylacz();
  9. 					wlacz(typ, wysokosc);
  10. 			}
  11.  
  12. 			function wylacz(typ) {		
  13. 					//$('.content').animate({height: 0},1000);
  14. 					$('.content').slideToggle("slow");
  15. 					$('.zamknij').fadeOut(1000);
  16. 					$('.zamknij').removeClass("zamknij");	
  17. 			}
  18.  
  19. 			function wlacz(typ, wysokosc) {
  20. 					//$('.content').animate({height: wysokosc},1000);
  21. 					$('.content').slideToggle("slow");
  22. 					$('.'+typ).fadeIn(1000);
  23. 					$('.'+typ).addClass("zamknij"); 
  24. 			}
  25. 		</script>
  26. 	</head>
  27. 	<body>
  28. 		<div class="content" style="height: 200px; width: 200px;">
  29. 			<div class="oferta" style="display: none; background: #c2c2c2; width: 100%; height: 100%; color: white;">OFERTA</div> 
  30. 			<div class="kontakt" style="display: none; background: #000000; width: 100%; height: 100% color: white;">KONTAKT</div> 	
  31. 		</div>
  32. 		<a href="#" onclick="java script:showContent('oferta', 200);" title="oferta" >oferta</a>
  33. 		<a href="#" onclick="java script:showContent('kontakt', 200);" title="kontakt" >kontakt</a>
  34. 	</body>
  35. </html>
[HTML] pobierz, plaintext



O to chodziło? Niestety nadal nie działa prawidłowo. :/
wookieb
16.02.2012, 13:03:53
Nawet nie raczyłeś przeczytać przykładu, który jest zawartu w linku jaki Ci dałem. Po co ludzie pisza dokumentacje? Dla dzieci, żeby mieć im co czytać na dobranoc?
p1rwszak
16.02.2012, 13:08:57
Żeby była jasność czytałem. Jednak nadal nie widzę rozwiązania. Dlatego też jeśli możesz mi pomóc i podpowiedzieć coś więcej to będę wdzięczny.


//EDIT

Udało mi się rozwiązać problem. Temat do zamknięcia. Poniżej listing rozwiązania. Wystarczyło ustawić pozycje divów na relative oraz przesunąc je względem górnej krawędzi na dół poza obszar wyświetlania. I potem tylko zmniejszać tą odległość do 0px.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. 		<script src="http://code.jquery.com/jquery-latest.js"></script>
  6.  
  7. 		<script type="text/javascript">
  8. 			function showContent(typ, wysokosc) {
  9. 					wylacz(typ);
  10. 					wlacz(typ, wysokosc);
  11. 			}
  12.  
  13. 			function wylacz(typ) {		
  14. 					$('.content').animate({height: 0},1000);
  15. 					$('.'+typ).animate({top: 500},1000);
  16. 					$('.zamknij').fadeOut(500);
  17. 					$('.zamknij').removeClass("zamknij");	
  18. 			}
  19.  
  20. 			function wlacz(typ, wysokosc) {
  21. 					$('.content').animate({height: wysokosc},1000);
  22. 					$('.'+typ).animate({top: 0},1000);
  23. 					$('.'+typ).fadeIn(500);
  24. 					$('.'+typ).addClass("zamknij"); 
  25. 			}	
  26. 		</script>
  27. 	</head>
  28. 	<body>
  29. 		<div class="content" style="height: 200px; width: 200px;">
  30. 			<div class="oferta" style="display: none; background: #c2c2c2; width: 200px; height: 200px; color: white; position: relative; top: 500px;">OFERTA</div> 
  31. 			<div class="kontakt" style="display: none; background: #000000; width: 200px; height: 200px; color: white; position: relative; top: 500px;">KONTAKT</div> 	
  32. 		</div>
  33. 		<a href="#" id="offf" onclick="java script:showContent('oferta', 200);" title="oferta" >oferta</a>
  34. 		<a href="#" id="konn" onclick="java script:showContent('kontakt', 200);" title="kontakt" >kontakt</a>
  35. 	</body>
  36. </html>
[HTML] pobierz, plaintext


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