Forum PHP.pl > preloader - szare przeźroczyste pokrycie strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: preloader - szare przeźroczyste pokrycie strony

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

enigma

21.10.2007, 20:27:53

chciałbym uzyskać taki efekt jak tu po wciśnięciu validate http://mattberseth2.com/ajax_modalpopup_pr...ss/default.aspx
szukałem w googlach, nie wiem może coś przegapiłem może o złe rzeczy pytałem
patrzyłem też w dokumentacji jQuery i nie doszukałem się czegoś takiego

Zajec

22.10.2007, 21:37:38

Zrób div z szarym tłem i opacity na 0.5, wypozycjonuj go absolutnie (top: 0; left: 0; right: 0; bottom: 0;) i gotowe.

enigma

23.10.2007, 22:20:09

hmm, mam tak

Kod

position:absolute;
background-color:gray;
text-align: center;
top: 0; left: 0; right: 0; bottom: 0;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;

ale jak przewijam stronę to nie ma dalej szarego pokrycia, jest tylko na "pierwszym ekranie"
a wtym js co dałem link podczas przewijania, obrazek loading przesuwa się ładnie w dół, no i cała strona jest wypełniona

fnx

18.11.2007, 13:05:06

Ja zrobiłem to tak:

[HTML] pobierz, plaintext 
function get_max(){
 
var original_top=document.body.scrollTop;
document.body.scrollTop=1000000000;
var ret_var=document.body.scrollTop;
document.body.scrollTop=original_top;
return ret_var+window.innerHeight;
 
}
 
 
function img(){
document.getElementById('twoja_warstwa').style.height=get_max();
}
[HTML] pobierz, plaintext

funkcja najpierw przesuwa dokument na koniec, sprawdza maksymalna wartosc przesuniecia, dodaje wysokosc ekranu i wraca do miejsca z kad zaczales

Co prawda obrazek sie nie przesuwa ale tlo pokrywa całość. Aby obrazek sie przesuwal musialbys wstawic dodatkowa funkcje powtarzajaca sie np co 50 ms sprawdzajac wartosc document.body.scrollTop i dodajac ja do oryginalnego polozenia obrazka

phpion

18.11.2007, 14:10:26

Spróbuj zmienić:

[HTML] pobierz, plaintext 
position:absolute;
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
position: fixed;
[HTML] pobierz, plaintext

slammer

18.11.2007, 21:36:28

Cytat

position: fixed;

Nie działa w IE

więc musiałbyś jeszcze załączyć plik http://www.doxdesk.com/software/js/fixed.html który symuluje position: fixed; w IE. Osobiście używam tej metody i sprawdza się wyśmienicie.

senor_d

23.11.2007, 19:53:58

zrob tak:

Kod

<div id="loader"></div>

     #loader {
         position:fixed;
         z-index:9999;
         top:0px;
         left:0px;
         background:#fff;
         opacity:0.8; /* dla FF */
         filter:alpha(opacity=80); /* dla IE */
         width:100%;
         height:100%;
     }

Kod

<![if IE 6]>
     <style type=\"text/css\">
     /* tylko dla IE w naglowku strony */
     #loader {
         position:absolute;
         width:expression(document.documentElement.clientWidth + 'px');
         height:expression(document.documentElement.clientHeight + 'px');
         top:expression(offset = 0 + parseInt(document.body.currentStyle .
         paddingTop) + parseInt(document.body.currentStyle.marginTop),
         document.documentElement.scrollTop + offset + 'px');
     }
   </style>
     <![endif]>

u mnie działa

A jeśli by nie działalo to zmień na

Kod

nie wiem dlaczego ale czasami robi to różnicę

dmx

25.11.2007, 08:57:18

A może zrób to thickbox(jquery)?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.