CODEWITHSUNDEEP
jqueryruby-on-railszurb-foundation
Dan Rubio
Dan Rubio

Reputation: 4907

Customizing Zurb Foundation Flash messages. Can someone please tell me what I'm doing wrong

To begin, I'd like to thank Babar and Matt Green on the forum for helping me with my previous questions about customizing flash messages and the internals of Foundation. I appreciate the help very much. With that being said, I would very much appreciate for somebody to please pinpoint to me what I am doing wrong to customize a flash message for Foundation. All I simply want to do is to have the flash messages fade out after 1 second. I'll post my code with my thought process as commentary and if someone could please tell me where I'm going wrong exactly I would very much appreciate it. I'll try to be as clear as possible.

To begin with, I have a flash message in my application.html.erb file which looks like this:

<% flash.each do |name, msg| %>
    <% if msg.is_a?(String) %>
      <div data-alert class="alert-box 
        <%= name.to_s == 'notice' ? 'success' : 'alert' %>">
        <%= content_tag :div, msg %>
         <a href="#" class="close">&times;</a>
      </div>
    <% end %>
  <% end %>

What this snippet of code does is create a dynamic flash message based on the message so it'll assign a class of .alert-box success or .alert-box alert depending on the message.

Ok, so now as per the recommendations of Babar and Matt Green and from the information on Foundation docs, I have required both jquery and foundation.min.js in my head tags of the application.html.erb file as so:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet'  
     type='text/css'>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="/js/foundation.min.js"></script>
  <title><%= content_for?(:title) ? yield(:title) : "MusikFish" %></title>

  <%= stylesheet_link_tag    "application" %>
  <%= javascript_include_tag "vendor/modernizr" %>
  <%= csrf_meta_tags %>
</head>

The Jquery will allow me to customize the flash message and the foundation.min.js requires the plugins that I need including foundation.aler.js. At the bottom of my application.html.erb I've added this to initialize the code.

 <script>
   $(document).foundation();
 </script>

Finally, I've created a flash.js file in my app/assets/javascripts directory that has this code

$(document).ready(function(){
  $('.alert-box success').fadeOut('slow');
  $('.alert-box success').fadeOut('slow');
};

What am I doing wrong? Where is the problem? Could it be that in my application file instead of js/foundation.min.js it should be javascripts/foundation.min.js. Ive tried this and it still doesn't work. This is infuriating me and I don't know how to fix this. Some help would be cool.

Upvotes: 0

Views: 474

Answers (1)

jstoone
jstoone

Reputation: 36

All your code seems just fine untill we hit your flash.js file. First we should start by finding the errors: (no offence) - Your selector catches your '.alert-box' class but then tries to find a -tag with that - There are two lines doing the same thing, may as well be a copy/paste error - You fade out the flash messages, slowly, as soon as jQuery gets the 'ready' event from the document.

What we would like to do is: - Select your '.alert-box' class in general - Fade out the flash message after 1 second.

What you could do instead is add a delay like the following:

$(document).ready(function(){
    // find element(s) with the '.alert-box' class
    var $alertBox = $('.alert-box');

    // fade $alertBox out after 1 second (1000 ms)
    $alertBox.delay(1000).fadeOut('slow');
}

What you could do next is maybe enhance your selecter to only fade out alerts which indicates success automatically, because it doesn't really affect the user if it get's overlooked. Erroneous alerts on the other hand should point you in the face and say "HEY!", and therefore not fade away without an action is taken from the user.

Here are some helpers: 

// let's grab the alert
var $alert = $('.alert-box');

// now determine which kind of error it is
if($alert.hasClass('error'))
    // we have an error

if($alert.hasClass('success'))
    // we have success in our life

So on and so fourth. In this way you can add click-events, fadeouts etc. all based on your conditions. Cheers!

Upvotes: 0

Related Questions