Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] Animacja przy ładowaniu pliku
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
narki1
24.08.2010, 13:56:26
Witam
Próbuję się uporać z takim problemem.
Używam formularza do ładowania zdjęć.
Normalnie obrazki się ładują i nie ma żadnego problemu.
Chciałbym aby po kliknięciu przycisku wyślij pojawiła się informacja ,że plik jest w trakcie ładowania.
Próbuję wykorzystać onsubmit i wtedy wyświetlać np. aminowanego gifa "ładowanie zdjęcia proszę czekać"
Ale tu pojawiają się schody bo wymyśliłem , że umieszczę obrazek gif w divie :
[PHP] pobierz, plaintext 
  1. <div id="mydiv" class="top-bar"><img src="logo.jpg" alt="" width="400" height="200" /></div>
[PHP] pobierz, plaintext

i będę zmieniał class w stylu:
[PHP] pobierz, plaintext 
  1. <form name='tests' method='POST' enctype='multipart/form-data' action='upload.php' onsubmit='anima()'> 
[PHP] pobierz, plaintext

i oczywiście funkcja js umieszczona w sekcji <head>:
[PHP] pobierz, plaintext 
  1. function anima()
  2. {
  3. document.getElementById('mydiv').className='top-bar-green';
  4. }
[PHP] pobierz, plaintext

no i styl :
[PHP] pobierz, plaintext 
  1.  
  2.         .top-bar-green{
  3.         visibility:visible;
  4. 	z-index:-1;
  5.         }
  6.   #mydiv{
  7. 	position:absolute;
  8. visibility:hidden;
  9. 		}
[PHP] pobierz, plaintext

No i schody bo nie działa. Jeśli chodzi o JS to jestem cienki i trochę nie wiem jak to ugryźć.
kreciko
24.08.2010, 14:28:30
Wydaje mi się, że lepiej zamiast używania visibility:visible i visibility:hidden wykorzystać display:block, i display:none
narki1
24.08.2010, 14:38:20
Tak czy inaczej po kliknięciu przycisku nic się nie wyświetla.
kreciko
24.08.2010, 14:56:58
Konsola błędów coś wypluwa? Możesz podać szerszy kontekst gdzie tego wykorzystujesz? Na jakich plikach operujesz, jakie przyciski masz w formularzu?
narki1
25.08.2010, 07:45:39
Witam
Pierwsze próby wyglądają obiecująco.
Zmieniłem arkusz CSS:
[PHP] pobierz, plaintext 
  1.    .top-bar{
  2.             display:none;
  3.         }
  4.         .top-bar-green{
  5.             display:block;
  6. 						z-index:-1;
  7.         }
  8.   #mydiv{
  9. 	position:absolute;
  10.  
  11. 	}
[PHP] pobierz, plaintext

Czyli zamieniam klasy ze sobą a nie id z klasą tak jak to było na początku.
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.