Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML]overflow:auto i position:absolute
m72
post 27.10.2014, 01:09:39
Post #1





Grupa: Zarejestrowani
Postów: 78
Pomógł: 0
Dołączył: 25.12.2012

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

Jak zrobić żeby div zewnętrzny automatycznie obejmował wewnętrzne które muszą mieć position:absolute ?
overflow:auto coś nie chce działać w tym przypadku

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="UTF-8">
  4. </head>
  5. <body>
  6.  
  7. <div style="position:relative;background-color:#eee;width:500px;border:1px solid red;">
  8. 	<div style="position:absolute;top:0px; left:0px;width:100px;height:100px; background-color:#fad">1</div>
  9. 	<div style="position:absolute;top:0px; left:100px;width:100px;height:100px; background-color:#fdd">2</div>
  10. </div>
  11. </body>
  12. </html>
[HTML] pobierz, plaintext


Ten post edytował m72 27.10.2014, 01:10:30
Go to the top of the page
+Quote Post
trueblue
post 27.10.2014, 08:22:56
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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

W JS.
Dlaczego muszą być pozycjonowane absolutnie?


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
mrc
post 27.10.2014, 09:13:11
Post #3





Grupa: Zarejestrowani
Postów: 160
Pomógł: 27
Dołączył: 22.09.2008
Skąd: Tarnów

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

Musisz mieć stałą wysokość/szerokość kontenera, albo w js sprawdzać gdzie znajdują się rogi poszczególnych elementów i zrobić wysokość/szerokość taką, aby pokrywało najdalej wysunięte punkty. Inaczej tego nie zrobisz, jeżeli chcesz mieć position:absolute.


--------------------
https://www.linkedin.com/in/marcin-kukliński
http://cpp-polska.pl
Go to the top of the page
+Quote Post
m72
post 27.10.2014, 13:18:59
Post #4





Grupa: Zarejestrowani
Postów: 78
Pomógł: 0
Dołączył: 25.12.2012

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

positnion:absolute - bo robie na nich jquery animate.
Ogólnie sparawa wygląda tak, ładuję plik php ajaxem.
Appenduje dane do diva
[HTML] pobierz, plaintext 
  1.  $('#wiecej').append(data.responseText); 
[HTML] pobierz, plaintext
(po tym dalej nie mam jeszcze jego wysokości)
Wyświetlam go
[HTML] pobierz, plaintext 
  1. $( "#wiecej" ).show( "fade", 300, function(){
  2. 						console.log($("#kontener_wiecej").height());
  3. 						$("#wizytowka_obejma").height(	$("#kontener_wiecej").height()	);
  4. 				});
[HTML] pobierz, plaintext

i dopiero po całkowitym wyświetleniu, tak jak wyżej, można ściągnąć jego wysokość i roziciągnąć kontener (#wizytowka_obejma).
Niby działa ale powoduje to miganie div-a na ekranie bo dopiero po "show()" wysokosć kontenera jest dopasowywana.
Ja potrzebuje mieć wysokość #kontener_wiecej po załadowaniu danych ale przed wyswietleniem diva

Najlepiej jakby funkcja append miała jakiś callback ale podobno nie ma. Próbowałem load-em który ma callback ale coś mi nie wychodzi.
Go to the top of the page
+Quote Post
trueblue
post 27.10.2014, 13:22:43
Post #5





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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

Absolute nie musi być aby wywołać na elemencie animate().
Ale tu chyba nie o to chodzi, a o układ.
Najpierw pokazałeś strukturę z jednym divem i dwoma zagnieżdżonymi.
Tu wygląda jakbyś miał tylko jeden zagnieżdżony.
Napisz jaki efekt chcesz osiągnąć (jak mają być ustawione divy).


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
m72
post 27.10.2014, 13:50:34
Post #6





Grupa: Zarejestrowani
Postów: 78
Pomógł: 0
Dołączył: 25.12.2012

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

Ok żeby nie bawić się w ciuciubabkę lepiej narysuję o co mi chodzi, inaczej musiałbym godzinę preparować kod pod tego posta, więc.

1. Na tle głównej strony ma wyskakiwać okienko "kontener" (div-draggable).
2. W nim mają się przesuwać względem niego 2 divy po kliku w cośtam.
4. Oczywiście tylko jeden z nich ma być widoczny a drugi ma wypadać poza kontener.
3. Zaznaczam że wszystkie dane są ładowane z pliku php a tam z bazy.

Tak jak pisałem wcześniej, niby wszystko mi działa ale wysokość div1, div2 można odczytać dopiero po wyświetleniu div-a a mi trzeba po zaappendowaniu danych ale przed wyświetleniem żebym za wczasu mógł dopasować wys kontenera który jak pisaliście nie może obejmować div-ów z position:absolute
Go to the top of the page
+Quote Post
trueblue
post 27.10.2014, 14:34:39
Post #7





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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

1. Po odpowiedzi ajax utwórz w body div.
2. Div widoczny, albo poza obszarem okna, np. position:absolute; top:-10000px
3. Wstaw do niego tekst.
4. Zmierz wysokość.
5. Usuń ten div.
Reszta już wiesz jak.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 16.04.2024 - 10:52
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn