9

I am using AngularJS and Bootstrap 3. My web app has an "Update" button where it saves any changes the user makes. When the user clicks on the "Update" button, I want to activate and fade-in bootstrap's alert box saying "Information has been saved" and then fade-out after 3 seconds. I don't know how to create this function and may need some help..

UPDATE:

I have decided to use this approach:

HTML

<button type="button" class="btn btn-info" ng-click="save()">Update</button>

<div id = "alert_placeholder"></div>

JavaScript

$scope.save = function() {
    $('#alert_placeholder').html('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>Your information has been updated.</span></div>')
    setTimeout(function() {
        $("div.alert").remove();
    }, 3000);
}

I would like to make the alert box fade-in when it first appears and fade-out as it gets removed after 3 seconds, but I am not sure how to make it work with the code I have.

2
  • I know I'm not answering your question but have you seen toastr.js? github.com/CodeSeven/toastr a neat little library for showing notifications that I use for the same scenario as you.
    – empo
    Mar 4, 2014 at 16:57
  • Thanks for the suggestion. That's the exact effect I want. I think I am going to write a smaller piece of code since this particular button is only used once throughout the entire app. Thank you though! Mar 4, 2014 at 21:56

4 Answers 4

16

I use something like this. (The animation looks very pretty!). Simply add this JS, and apply the class flash to every item you want to disappear. MAKE SURE YOU ALSO ADD THE fade-in CLASS TO EVERYTHING! The fade-in class comes with bootstrap. It will fade out in 5 seconds.

window.setTimeout(function() {
  $(".flash").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
  });
}, 5000);
1
  • A couple notes. At least in the latest Bootstrap, the classes "fade" and "in" are separate; there seems to be no "fade-in". Also, the ".flash" above should be whatever selector selects your alert div.
    – Noah Stahl
    Jan 26, 2015 at 16:20
3

Try something like this

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
  -webkit-transition: opacity 3.0s linear;
  -moz-transition: opacity 3.0s linear;
  -o-transition: opacity 3.0s linear;
  transition: opacity 3.0s linear;
}

You need to put the fade and fade.in property onto your alert box and alert box hide though. - But just set the transition times for both to match what you need. Basically what you are doing here is setting the opacity, then the length of time it is taking to do this. The reason we have 4 different values all with different times are to make it cross browser compatible.

0

I've used this approach to implement blinking

In a directive

..
element.addClass("blink");
$timeout(function () { element.removeClass("blink");} , 600 , false);
..

and blink is defined with transition

.blink { background-color : orange; transition : all linear 600ms; }
0

I have decided to use this piece of code as an alternative update indicator

http://jsfiddle.net/deC37/

<button type="button" data-loading-text="Saving..." class="btn btn-primary">Update</button>

$("button").click(function() {
var $btn = $(this);
$btn.button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () {
    $btn.button('reset');
}, 1000);

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.