Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery] Zwijanie i rozwijanie divów - problem - rozwiązany
p1rwszak
post 16.02.2012, 12:37:45
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.02.2012

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

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

Ten post edytował p1rwszak 16.02.2012, 16:04:47
Go to the top of the page
+Quote Post
wookieb
post 16.02.2012, 12:39:34
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
http://api.jquery.com/slideToggle/


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
p1rwszak
post 16.02.2012, 12:52:17
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.02.2012

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

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
Go to the top of the page
+Quote Post
wookieb
post 16.02.2012, 12:55:26
Post #4





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Podobny do fadeOut/fadeIn? Gdzie? Przecież w domyślnym slideToggle nie ma nawet zmiany opacity.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
p1rwszak
post 16.02.2012, 13:02:35
Post #5





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.02.2012

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

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. :/
Go to the top of the page
+Quote Post
wookieb
post 16.02.2012, 13:03:53
Post #6





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
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?


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
p1rwszak
post 16.02.2012, 13:08:57
Post #7





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.02.2012

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

Ż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

Ten post edytował p1rwszak 16.02.2012, 16:04:23
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · 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: 14.08.2025 - 12:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn