Feedback

Simple and nice way to give feedback to the users with some jQuery and CSS.

by mmarcon

HTML

<div id="text">
    <p>"Take them, man, I have no need for them; for I now neither shave, sup, nor pray till&mdash;but here&mdash;to work!"</p>
    
    <p>Fashioned at last into an arrowy shape, and welded by Perth to the shank, the steel soon pointed the end of the iron; and as the blacksmith was about giving the barbs their final heat, prior to tempering them, he cried to Ahab to place the water-cask near.</p>
    
    <p>"No, no&mdash;no water for that; I want it of the true death-temper. Ahoy, there! Tashtego, Queequeg, Daggoo! What say ye, pagans! Will ye give me as much blood as will cover this barb?" holding it high up. A cluster of dark nods replied, Yes. Three punctures were made in the heathen flesh, and the White Whale's barbs were then tempered.</p>
    
    <p>"Ego non baptizo te in nomine patris, sed in nomine diaboli!" deliriously howled Ahab, as the malignant iron scorchingly devoured the baptismal blood.</p>
    
    <p>Now, mustering the spare poles from below, and selecting one of hickory, with the bark still investing it, Ahab fitted the end to the socket of the iron. A coil of new tow-line was then unwound, and some fathoms of it taken to the windlass, and stretched to a great tension. Pressing his foot upon it, till the rope hummed like a harp-string, then eagerly bending over it, and seeing no strandings, Ahab exclaimed, "Good! and now for the seizings."</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911);

body {
    font-family: 'Goudy Bookletter 1911', arial, serif;
    position: relative;
}

#text {
    color: #666;
    width: 600px;
    font-size: 16px;
    margin: 30px auto;
}

#feedback {
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font-size: 18px;
}

#feedback.info {
    background-color: #666;
}

#feedback.error {
    background-color: #cc0000;
}

JavaScript

$(function() {
    var text = 'Fiddle correctly loaded!',
        errorText = 'Uhmm... there was an error :(';

    var show_info = function() {
        var $feedback = $('<section/>').attr('id', 'feedback').append($('<p>' + text + '</p>')).hide().addClass('info');;
        $('body').append($feedback);
        $feedback.fadeTo('slow', 0.9, function() {
            setTimeout(function() {
                $feedback.fadeTo('slow', 0, function() {
                    $feedback.remove();
                });
            }, 3000);
        });
    };
    
    var show_error = function() {
        var $feedback = $('<section/>').attr('id', 'feedback').append($('<p>' + errorText + '</p>')).hide().addClass('error');
        $('body').append($feedback);
        $feedback.fadeTo('slow', 0.9, function() {
            setTimeout(function() {
                $feedback.fadeTo('slow', 0, function() {
                    $feedback.remove();
                });
            }, 3000);
        });
    };
    
    setTimeout (function() {
        show_info();
        setTimeout (show_error, 10000);
    }, 1000)
});