Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [js] Animacja przy ładowaniu pliku
narki1
post 24.08.2010, 13:56:26
Post #1





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.06.2007

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


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 :
  1. <div id="mydiv" class="top-bar"><img src="logo.jpg" alt="" width="400" height="200" /></div>

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

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

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

No i schody bo nie działa. Jeśli chodzi o JS to jestem cienki i trochę nie wiem jak to ugryźć.
Go to the top of the page
+Quote Post
kreciko
post 24.08.2010, 14:28:30
Post #2





Grupa: Zarejestrowani
Postów: 99
Pomógł: 7
Dołączył: 17.02.2010

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


Wydaje mi się, że lepiej zamiast używania visibility:visible i visibility:hidden wykorzystać display:block, i display:none
Go to the top of the page
+Quote Post
narki1
post 24.08.2010, 14:38:20
Post #3





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.06.2007

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


Tak czy inaczej po kliknięciu przycisku nic się nie wyświetla.
Go to the top of the page
+Quote Post
kreciko
post 24.08.2010, 14:56:58
Post #4





Grupa: Zarejestrowani
Postów: 99
Pomógł: 7
Dołączył: 17.02.2010

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


Konsola błędów coś wypluwa? Możesz podać szerszy kontekst gdzie tego wykorzystujesz? Na jakich plikach operujesz, jakie przyciski masz w formularzu?

Ten post edytował kreciko 24.08.2010, 14:58:26
Go to the top of the page
+Quote Post
narki1
post 25.08.2010, 07:45:39
Post #5





Grupa: Zarejestrowani
Postów: 50
Pomógł: 0
Dołączył: 26.06.2007

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


Witam
Pierwsze próby wyglądają obiecująco.
Zmieniłem arkusz CSS:
  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. }

Czyli zamieniam klasy ze sobą a nie id z klasą tak jak to było na początku.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 01:01