Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] rozszerzanie z przysłanianiem DIVa
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
krzychos7
26.01.2010, 21:48:44
Mam jakby tabelkę z 6 diwów w jednym (2 kolumny po 3 linie). Chciałbym zrobić efekt taki iż po kliknięciu na jeden z nich tak jakby zmaksymalizuje się on na powierzchnię która one wszystkie zajmują rozwijając więcej treści. Natomiast po ponownym kliknięciu by z powrotem powrócił na swoje miejsce. Z animacją daję radę, z pokazywaniem treści również. Jedynie mam problem z "wyrwaniem z szeregu" takiego DIVa, nawet jak zmieniam mu z-index to rozsuwa on resztę DIVów.

piotrooo89
26.01.2010, 22:10:30
kod pokaż kod jak robisz to rozszerzanie.
Czadus
26.01.2010, 22:24:20
Wstawiłbym to w tabelkę o takiej samej strukturze, jak twój układ divów, w każdą komórkę wstawiłbym diva z position absolute, odpowiednio oczywiście wypozycjonowanym itp. Powiększanie diva nie powinno spowodować rozsuwania, przesuwania itp pozostałej części strony z divami.

Rozwiązanie na szybko, nie widziałem Twojego kodu jeszcze.
krzychos7
26.01.2010, 23:53:19
Tak zaczełem testować:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
  2. <html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  3. <head>
  4. <title>test</title>
  5. <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript" src="jquery.corner.js"></script>
  8. <script type="text/javascript"  src="http://www.google.com/jsapi"></script>
  9. <script type="text/javascript">google.load("jqueryui", "1.7.2");</script>
  10. <style>
  11. body {
  12. 	text-align: center;
  13. 	margin: 0;
  14. 	padding: 0;
  15. 	border: 0;
  16. 	background: #1a1a1a;
  17. 	}
  18. #kontener{
  19. 	text-align: left;
  20. 	width: 965px;
  21. 	margin: 0 auto;
  22. 	padding: 5px;
  23. 	color: #fff;
  24. 	margin-top: 30px;
  25. 	}
  26. .box{
  27. 	color: #b3dcf9;
  28. 	display: block;
  29. 	height: 140px;
  30. 	background: #f00;
  31. 	width: 474px;
  32. 	margin: 0px;
  33. 	margin-right: 4px;
  34. 	padding: 0px;
  35. 	float: left;
  36. 	margin-bottom: 4px;
  37. 	overflow: hidden;	
  38. 	}
  39. </style>
  40. <script type="text/javascript" >
  41. $(document).ready(function(){
  42. 	$('.box').corner("5px");
  43. 	$('.box').click(function(){
  44. 		var z = $(this).css('z-index');
  45. 		if(z==2){
  46. 			$(this).animate({width: '474px', height: '140px'}, 500, function(){
  47. 				$(this).css({'z-index': '0', 'position': 'relative'});
  48. 				});
  49. 			}
  50. 		else {
  51. 			$(this).animate({width: '952px',  height: '428px'}, 500).css({'z-index': '2', 'position': 'absolute'});
  52. 			}
  53. 		});
  54. 	});
  55. </script>
  56. </head>
  57. <body>
  58. <div id="kontener">
  59. 	<div class="box">
  60. 		<p>
  61. 			1		
  62. 		</p>	
  63. 	</div>
  64. 	<div class="box">
  65. 		<p>
  66. 			2		
  67. 		</p>	
  68. 	</div>
  69. 	<div class="box">
  70. 		<p>
  71. 			3		
  72. 		</p>	
  73. 	</div>
  74. 	<div class="box">
  75. 		<p>
  76. 			4		
  77. 		</p>	
  78. 	</div>
  79. 	<div class="box">
  80. 		<p>
  81. 			5		
  82. 		</p>	
  83. 	</div>
  84. 	<div class="box">
  85. 		<p>
  86. 			6		
  87. 		</p>	
  88. 	</div>
  89. </div>
  90. </div>
  91. </body>
  92. </html>>
[HTML] pobierz, plaintext


Pomogło dodanie display: absolute; podczas animacji (wcześniej odrzuciłem tą myśl gdyż wydawało mi się że pozycje ustosunkuje do całej strony a nie DIVa nadrzędnego).
Jednakże aktualnie każdy DIV najpierw pojawia się w górnym lewym roku "kontenera" i tam dopiero się rozszerza. Czy ma ktoś może pomysł jak zrobić by rozszerzał się od tego miejsca w którym się znajduje?
Chodzi mi przy tym o dość uniwersalne rozwiązanie (temu też nie tabelki) które będzie działało niezależnie od tego ile będę miał kolumn i linii w takim 'obiekcie'.
Czadus
27.01.2010, 09:06:23
Dzięki tabelce udało mi się wypozycjonować diva w określonym miejscu, i odziwo, działa to pod każda przeglądarką. Skoro dynamicznie możesz dodawać nowe divy itp, to dynamicznie możesz także stworzyć dowolną tabelkę a w każdej jej komórce dodać diva, następnie odpowiednio go wypozycjonować. Działa na 100%. Nie wiem, co jeszcze potrzebujesz, rozwiązanie również jest uniwersalne. Oczywiście div o zadanym position absolute lepiej, aby nie miał ustawionych atrybutów top oraz left.

Chyba, że pokażesz mniej więcej jak to dokładnie ma działać. Może jest inne rozwiązanie. Nie masz tego gdzieś online??
krzychos7
27.01.2010, 11:04:38
Ogulnie z wypozycjonowaniem nie ma zbytnio problemu, to że DIVy pod spodem się podsuwają to nie przeszkadza ważne że już nie wyskakują poza. Tu jest to online: http://cybers.pl/testy/1/
Zaś chodzi mi o to że teraz przed animacją przez to że przyjmuje position: absolute; wskakuje on na lewy górny róg tego DIVa i dopiero stamtąd się rozszerza. Natomiast chciałbym by rozszerzał się od miejsca gdzie się znajduje domyślnie. Nie widziałem czegoś takiego jeszcze w JavaScript, prędzej we Flashach. Zaś chodzi mi o coś podobnego do tego efektu: http://docs.jquery.com/UI/Effects/Transfer jednakże właśnie w połączeniu tego co mam, czyli zwykłe rozszerzanie się całego DIVa (nie generowanie ramki) tak jak jest w moim przykładzie jednak w sposób podobny do tej ramki, czyli od pierwotnego położenia.
Czadus
27.01.2010, 11:12:28
Hmmmm..... już widzę problem. Generalnie, trzebaby zastanowić się nad pobraniem pozycji danego diva względem okna. Jeżeli takie będziemy posiadać, można z pomocą funkcji jQuery animate nie tylko zwiększać/zmniajszać wielkość diva, ale również jego położenie w oknie poprzez atrybuty left oraz top.
krzychos7
27.01.2010, 12:02:51
Właśnie też powoli dochodzę do wniosku iż nie będzie to prosta sprawa. Chyba ogólnie będę musiał zrobić funkcję ustawiającą divy relatywnie do okna, by zawsze było centrowane zaś zarazem miało position: absolute; by można było wszystkie obiekty niezależnie od siebie animować.
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.