Question

here is my ajax call

// send the data to the server using .ajax() or .post()
        $.ajax({
            type: 'POST',
            url: 'addVideo',
            data: {
                video_title: title,
                playlist_name: playlist,
                url: id
                // csrfmiddlewaretoken: '{{ csrf_token }}',
            },
            success: function(response, textStatus, jqXHR){
                 bootstrap_alert.success('video saved successfully');
            },

            // callback handler that will be called on error
            error: function(jqXHR, textStatus, errorThrown){
                bootstrap_alert.error('There were some errors while saving the video. Please try in a while');
            },
        });

and notification function

// setting up alerts on action
bootstrap_alert = function() {}
bootstrap_alert.success = function(message) {
  $('#feature').prepend('<div id="alert" class="alert alert-success"><!--a class="close" data-dismiss="alert">×</a--><span>'+message+'</span></div>');
  $('#alert').fadeOut(3000);
}
bootstrap_alert.error = function(message) {
  $('#feature').prepend('<div id="alert" class="alert alert-error"><!--a class="close" data-dismiss="alert">×</a--><span>'+message+'</span></div>');
  $('#alert').fadeOut(3000);
}

• When I ajax call returns I see a div for 3 seconds and it goes away BUT then, my page moves up very quickly, I want to make this transition smooth

• is it possible to layer the notification div on top of feature div which disappears after 3 seconds?

Answer 1

You could use sliding effects to make it nice. You could insert the content, slide it down, wait 3 seconds, then slide it up.

var x =$("<div class='alert'>Alert</div>");
$("#c1").prepend(x);
x.slideDown(250).delay(3000).slideUp(250);​

Sample fiddle: http://jsfiddle.net/johnkoer/gxbTJ/15/