Praktyczne okienko informacyjne

by Mateusz Tymek — on JavaScript/AJAX, CSS

Head's up! This post was written back in 2009 and is very likely to contain outdated information.

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