Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] rozszerzanie z przysłanianiem DIVa
krzychos7
post
Post #1





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 21.01.2010

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

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
piotrooo89
post
Post #2


Newsman


Grupa: Moderatorzy
Postów: 4 005
Pomógł: 548
Dołączył: 7.04.2008
Skąd: Trzebinia/Kraków
kod pokaż kod jak robisz to rozszerzanie.
Go to the top of the page
+Quote Post
Czadus
post
Post #3





Grupa: Zarejestrowani
Postów: 164
Pomógł: 4
Dołączył: 29.08.2008

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

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.
Go to the top of the page
+Quote Post
krzychos7
post
Post #4





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 21.01.2010

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

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'.
Go to the top of the page
+Quote Post
Czadus
post
Post #5





Grupa: Zarejestrowani
Postów: 164
Pomógł: 4
Dołączył: 29.08.2008

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

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??
Go to the top of the page
+Quote Post
krzychos7
post
Post #6





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 21.01.2010

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

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.
Go to the top of the page
+Quote Post
Czadus
post
Post #7





Grupa: Zarejestrowani
Postów: 164
Pomógł: 4
Dołączył: 29.08.2008

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

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.
Go to the top of the page
+Quote Post
krzychos7
post
Post #8





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 21.01.2010

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

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ć.
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 05:58
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn