First lets take a look into my approach, and then I’ll talk about my implementation.

Download Files View Demo

The Approach

The notifications use an animation to grab the users attention. For the animation I decided to use the jquery javascript library. It is very easy to use and has several pre-built animations such as fadeIn and fadeOut.

Once a user dismisses a notification they should never see it again. To remember when a user dismisses the notification, I decided to use http cookies.  These cookies allow us to save a value in the user’s browser, so when the user clicks dismiss they create a cookie on their local machine. Then the next time they visit the webpage, the page will see that they already have the cookie, and the notification will not be displayed.

Alternatively, if the webpage required a log-in, then I could have stored this data in a database and associated it with a user, but by utilizing cookies I can apply this technique to any web page without the need for any server side scripting (PHP, Ruby on Rails, etc.).

After looking into several ways to get and set cookies I decided to use the jquery cookies plugin which allowed me to dynamically set cookies without a page refresh.

Now that you know my approach to the problem lets take a look at the implementation.

The Implementation

For the fade in fade out animation I used Jquery. You can use the GoogleAPI copy of the library by placing this code in your webpage:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Next I downloaded the jquery cookies plugin and included it in my webpage. To create a cookie named notificationBar and give it the value “closed” we can use the plugin and execute this command:

$.cookie('notificationBar', 'closed');

After we have created the notificationBar cookie we can get its value by executing this command:

$.cookie('notificationBar');

this command will now return the value “closed”.

Next I added the html for the notification that will be displayed:

<div id = "topannounce" class = "announce" style = "display:none;">
   This Is a Notification from <a href = "http://thinkbohemian.com" target = "_blank">ThinkBohemian</a>
    <a href = "#" onclick = "$.cookie('notificationBar', 'closed');
        $('#topannounce').fadeOut('slow')">X</a>
 </div>

By default it is hidden using:

style = "display:none;"

Using jquery we can fadeIn the notification unless the notificationBar cookie has been set to “closed“.  To accomplish this I added these lines of javascript to the page:

<script type="text/javascript">
 $(document).ready(function(){
   if ($.cookie('notificationBar') != 'closed') {
     $('#topannounce').fadeIn('slow');
   }
 });
 </script>

Then I styled my HTML with a little CSS, and the effect was complete. My webpage has its very own dismissible notification bar:  View the demo of the notification in action.

Richard Schneeman: @ThinkBohemian

I used this effect to notify visitors to  WhySpam.Me, my disposable email service,  about the launch of ShadyEmail.com, the fun way to hide your email and make it questionably suspicious.

–

Not bad…but could use a little pizazz. So I decided to take a crack at jQuery UI. A great javascript and style framework that promised to be easy to use and provides theme-able styles.

Once you’ve got jQuery UI integrated nicely into your rails project (note i had to change my url paths in the stylesheet), you can style your submit button easily by adding some classes just like this:

<%= f.submit "Generate Secure Email", :class => "ui-corner-all ui-state-default " %>

Though, this isn’t 100% what I was looking for, it’s a good start. When we hover over the button, it changes color, and when we press it, our rails form submits. Though you’ll notice that the cursor doesn’t change when you hover over the button and we haven’t put an icon in it yet. To get the correct behavior i hard coded in a button:

<button id="user_submit" class = "ui-corner-all  ui-state-default"  type="submit" name="commit">Generate Secure Email</button>

This solved the button styling and behavior, but we still don’t have our icon. After browsing the inter webs i found a nice page of jQuery-UI button demos and I managed to modify my code to include a nice icon:

<button id="user_submit" class = "ui-corner-all fg-button ui-state-default fg-button-icon-left" type="submit" name="commit"><span></span>Generate Secure Email</button>

Perfect! It works like a dream, but it’s not very rails-esq. Lets turn this into a reusable chunk of code by making a helper method to extend form builder. In app/helpers/application_helper.rb

class ActionView::Helpers::FormBuilder
    def button_with_icon(text , icon)
     object_name = self.object_name
     return "<button id='#{object_name}_submit' class = 'ui-corner-all fg-button ui-state-default fg-button-icon-left' type='submit' name='commit'><span class='ui-icon ui-icon-#{icon}'></span>#{text}</button>"
    end
end

Now In my View I can put:

<%=  f.button_with_icon("Generate Secure Email", "mail-closed") %>

And I get my perfectly formatted button complete with an Icon!

Note:

<% form_for :person, @person, :url => { :action => "create" } do |f| %>
    <%= f.object_name %>
<% end %>

will print out “person”, thats why in the helper we call  self.object_name on the form_builder class. Pretty cool huh?