[css][xhtml] Loader, Loader względem 1 div'a Opcje

[Fluke]

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 
body {
	width: 60%;
	margin: 0 auto;
	padding-top: 20px;
}
#main {
 
	border: 1px solid #cecece;
}
 
#content {
	padding: 20px;
}
#loader {
	position: absolute;
	background-color: #000000;
	opacity: 0.5;
}
[HTML] pobierz, plaintext 

Oraz xhtml:

[HTML] pobierz, plaintext 
<div id="main">
	<div id="content">
		<div id="loader"></div>
		<p>Jakiś tekst</p>
		<p>Jakiś tekst</p>
		<p>Jakiś tekst</p>
		<p>Jakiś tekst</p>
		<p>Jakiś tekst</p>
	</div>
</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 
#loader {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #000000;
	opacity: 0.5;
}
[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

[Sephirus]

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 
 
function pokaz_loader(id)
{
        var loader = document.getElementById(id);
 
        loader.style.height = loader.parentNode.offsetHeight + 'px';
        loader.style.width= loader.parentNode.offsetWidth + 'px';
        loader.style.display = 'block'; // tu możesz zmienić jego klasę cokolwiek by go pokazać
}
 
[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 
.loader {position:absolute; width:inherit; height:inherit; background-color:rgba(0,0,0,0.5); top:0; left:0;}
.contener {position:relative; width:500px; height:300px; background-color:red;}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div class="contener">
      <div class="loader"></div>
</div>
[HTML] pobierz, plaintext 

HTH (IMG:style_emoticons/default/wink.gif) Pomogłem? ;P

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

[Fluke]

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 
#content {
	padding: 20px;
	position: relative;
}
#loader {
	position: absolute;
	width: 100%;;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: red;
	opacity: 0.5;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="main">
	<div id="content">
		<div id="loader"></div>
		Jakiś tekst
	</div>
</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:)