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