fade out animation for session flash message

1
votes

Is there any way to set up a flash message session for laravel? Which means when I click the button to add or delete item(s), the flash messages are displayed. But Is there any way to fade out?

in view file I put the code below:-

  <script>
      $(document).ready(function(){
          setTimeout(function() {
              $('#msg').fadeOut('fast');
          }, 30000);
      });
  </script>

  @if (session('status'))
      <div class="alert alert-success">
          <p class="msg"> {{ session('status') }}</p>
      </div>
  @endif

Controller file which I used for return the message. 

return back()->with('status', $pro->pro_name . ' add to cart successfully');
4
javascriptphplaravel
Clicking a button happens client-side, flash messages are stored serverside. Unless you want the whole page to refresh when you click the button I suggest just looking into alternative solutions. If it's just a "toast" (or growl) message you want then take a look at bootstrap-notify.remabledesigns.com - apokryfos
still not work, could you check my post again, i just edited it. - lun7code

4 Answers

2
votes

Try this

<script>
      $(document).ready(function(){
    $('.alert-success').fadeIn().delay(10000).fadeOut();
      });
  </script>

  @if (session('status'))
      <div class="alert alert-success">
          <p class="msg"> {{ session('status') }}</p>
      </div>
  @endif
2
votes

Hope this will help you 

$(window).load(function(){
   setTimeout(function(){ $('.alert-success').fadeOut() }, 5000);
});

This div will fade out after 5 seconds.

@if (session('status'))
  <div class="alert alert-success">
      <p class="msg"> {{ session('status') }}</p>
  </div>

@endif

1
votes

Try using toastr, it is a Javascript library for non-blocking notifications.

0
votes

I know it's too late, but you could try this:

$(document).ready(function(){
     if (('.alert').is(':visible')) { 
        setTimeout(() => {
           $('.alert').fadeOut('slow')
        }, 3000);
     }
});