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
krzychos7
post
Post #2





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

Posty w temacie
- krzychos7   [jQuery] rozszerzanie z przysłanianiem DIVa   26.01.2010, 21:48:44
- - piotrooo89   kod pokaż kod jak robisz to rozszerzanie.   26.01.2010, 22:10:30
- - Czadus   Wstawiłbym to w tabelkę o takiej samej strukturze,...   26.01.2010, 22:24:20
- - krzychos7   Tak zaczełem testować: [HTML] pobierz, plaintext ...   26.01.2010, 23:53:19
- - Czadus   Dzięki tabelce udało mi się wypozycjonować diva w ...   27.01.2010, 09:06:23
- - krzychos7   Ogulnie z wypozycjonowaniem nie ma zbytnio problem...   27.01.2010, 11:04:38
- - Czadus   Hmmmm..... już widzę problem. Generalnie, trzebaby...   27.01.2010, 11:12:28
- - krzychos7   Właśnie też powoli dochodzę do wniosku iż nie będz...   27.01.2010, 12:02:51

« 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 · Przełącz na: Linearny+ · Drzewo

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

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