Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: preloader - szare przeźroczyste pokrycie strony
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
enigma
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
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
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
Ja zrobiłem to tak:

  1. function get_max(){
  2.  
  3. var original_top=document.body.scrollTop;
  4. document.body.scrollTop=1000000000;
  5. var ret_var=document.body.scrollTop;
  6. document.body.scrollTop=original_top;
  7. return ret_var+window.innerHeight;
  8.  
  9. }
  10.  
  11.  
  12. function img(){
  13. document.getElementById('twoja_warstwa').style.height=get_max();
  14. }


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

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
Spróbuj zmienić:
  1. position:absolute;

na
  1. position: fixed;
slammer
Cytat
position: fixed;

Nie działa w IE winksmiley.jpg 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
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 smile.gif

A jeśli by nie działalo to zmień na
Kod
<!--[if IE 6]>
     <![endif]-->

nie wiem dlaczego ale czasami robi to różnicę
dmx
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.