Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css][xhtml] Loader, Loader względem 1 div'a
Fluke
post
Post #1





Grupa: Zarejestrowani
Postów: 247
Pomógł: 9
Dołączył: 20.09.2010
Skąd: Kraków

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

Witam.

Mam problem mały z "Loader'em". Wiem jak zrobić loader na całą stronę ale nie wiem jak w konkretnym div.

Przyklad:

CSS:
[HTML] pobierz, plaintext 
  1. body {
  2. 	width: 60%;
  3. 	margin: 0 auto;
  4. 	padding-top: 20px;
  5. }
  6. #main {
  7.  
  8. 	border: 1px solid #cecece;
  9. }
  10.  
  11. #content {
  12. 	padding: 20px;
  13. }
  14. #loader {
  15. 	position: absolute;
  16. 	background-color: #000000;
  17. 	opacity: 0.5;
  18. }
[HTML] pobierz, plaintext



Oraz xhtml:
[HTML] pobierz, plaintext 
  1. <div id="main">
  2. 	<div id="content">
  3. 		<div id="loader"></div>
  4. 		<p>Jakiś tekst</p>
  5. 		<p>Jakiś tekst</p>
  6. 		<p>Jakiś tekst</p>
  7. 		<p>Jakiś tekst</p>
  8. 		<p>Jakiś tekst</p>
  9. 	</div>
  10. </div>
[HTML] pobierz, plaintext


Wiem, że jeśli bym chciał loader na całą stronę to musiał bym w CSS loader'owi przypisać:
[HTML] pobierz, plaintext 
  1. #loader {
  2. 	position: fixed;
  3. 	width: 100%;
  4. 	height: 100%;
  5. 	top: 0px;
  6. 	left: 0px;
  7. 	background-color: #000000;
  8. 	opacity: 0.5;
  9. }
[HTML] pobierz, plaintext


Ale ja chcę uzyskać ten efekt w konkretnym div i żeby się zmieniał płynnie. Nie mam pojęcia jak to zrobić. Jedynym chyba rozwiązaniem na jakie wpadłem to tylko ustawić div na stałą wysokość i szerokość i tak samo zrobić z loader'em. Ale muszę niestety mieć płynnego div'a.

Z góry dziękuję
Pozdrawiam.


Ten post edytował Fluke 30.06.2011, 21:18:42
Go to the top of the page
+Quote Post
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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

Jeżeli dobrze Cię rozumiem to chcesz mieć po prostu w divie loader na jego całą szerokość?

Zasada/idea jest prosta - DIV nie musi mieć position:absolute - wystarczy position:relative.

Aby loaderek umieszczony w divie przyjmował wysokość i szerokość divka to najproście użyć JS - zasada jest prosta - w momencie gdy chcesz pokazać loaderek robisz tak:

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. function pokaz_loader(id)
  3. {
  4.         var loader = document.getElementById(id);
  5.  
  6.         loader.style.height = loader.parentNode.offsetHeight + 'px';
  7.         loader.style.width= loader.parentNode.offsetWidth + 'px';
  8.         loader.style.display = 'block'; // tu możesz zmienić jego klasę cokolwiek by go pokazać
  9. }
  10.  
[JAVASCRIPT] pobierz, plaintext


O to chodziło?

Bo jeżeli chcesz otrzymać to poprzez CSS to użyj width/height:inherit - tylko pamiętaj - inherit nie działa na starszych przeglądarkach (patrz badzIEwie)

[CSS] pobierz, plaintext 
  1. .loader {position:absolute; width:inherit; height:inherit; background-color:rgba(0,0,0,0.5); top:0; left:0;}
  2. .contener {position:relative; width:500px; height:300px; background-color:red;}
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div class="contener">
  2.       <div class="loader"></div>
  3. </div>
[HTML] pobierz, plaintext


HTH wink.gif Pomogłem? ;P

Ten post edytował Sephirus 30.06.2011, 21:46:08


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
Fluke
post
Post #3





Grupa: Zarejestrowani
Postów: 247
Pomógł: 9
Dołączył: 20.09.2010
Skąd: Kraków

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

Jeśli chodzi o JS to raczej odpada. Próbowałem tą metodą tylko jest jedna sprawa: gdy mamy przeglądarkę otwartą na całą szerokość i uruchomimy loader, a następnie zmniejszymy wielkość przeglądarki to wielkość div`a się nie zmienia i wychodzi po za kontener.

Ale udało się za pomocą CSS, tylko:

[HTML] pobierz, plaintext 
  1. #content {
  2. 	padding: 20px;
  3. 	position: relative;
  4. }
  5. #loader {
  6. 	position: absolute;
  7. 	width: 100%;;
  8. 	height: 100%;
  9. 	top: 0px;
  10. 	left: 0px;
  11. 	background-color: red;
  12. 	opacity: 0.5;
  13. }
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. <div id="main">
  2. 	<div id="content">
  3. 		<div id="loader"></div>
  4. 		Jakiś tekst
  5. 	</div>
  6. </div>
[HTML] pobierz, plaintext


I w width oraz height trzeba umieścić 100% a nie inherit bo nie działa.
Z góry dziękuje:)
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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 Aktualny czas: 22.08.2025 - 10:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn