Często zachodzi potrzeba poinformowania użytkownika o sukcesie bądź niepowodzeniu jakiejś operacji, takiej jak zapisanie artykułu, wysłanie kometarza itd. Takie informacje można zaprezentować na kilka sposobów, jednak zazwyczaj będą one umieszczone statycznie gdzieś w górnej cześci strony.
Przy okazji pracy nad pewnym projektem postanowiłem podejść do tego tematu w niestandardowy sposób: po zapisaniu artykułu użytkownik zobaczy informację na środku strony, w ładnym okienku które samo zniknie po kliku sekundach. Jednocześnie rozwiązanie jest odporne na wyłączoną obsługę Java Script - w takim przypadku zostanie wyświetlone powyżej treści strony.
Rozwiązanie oparte jest o kod Java Script i bibliotekę jQuery. Kod PHP powinien wygenerować coś takiego:
<div class="message"> <img class="icon" src="/media/images/information.png" alt="" /> <h4>Informacja</h4> <p> Artykuł został poprawnie zapisany. </p> </div>
Kod CSS który zapewni ładny wygląd komunikatowi:
.message { background-color: #666; color: white; margin: 10px; width: 600px; padding: 25px; border: 3px solid white; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .message h4 { margin-bottom: 15px; } .message .icon { float: left; margin-right: 20px; }
Dla lepszego efektu zastosowałem zaokrąglone narożniki (nie zadziałają w Operze czy IE).
Oto przykładowy komunikat:
Taki efekt zobaczy użytkownik z wyłączoną obsługą JS.
Dodanie animacji to kilka linijek kodu:
setTimeout(function() { $('div.message').fadeOut(1200); }, 1600);
Dla lepszego efektu najpierw komunikat powinien zostać odpowiednio przesunięty, tak aby nachodził na treść. Cały kod zostanie umieszczony w funkcji $(document).ready()
, aby wykonał sie po załadowaniu drzewa DOM:
$(document).ready(function() { if ($('div.message').length > 0) { $('div.message').css('position', 'absolute') .css('top', '25%') .css('margin', '50px 160px'); setTimeout(function() { $('div.message').fadeOut(1200); }, 1600); } });
comments powered by Disqus