Twitter Style Alerts In Rails

Ryan Sonnek bio photo By Ryan Sonnek

Twitter has a very elegant solution for user feedback messages.  They display the message by sliding the text down from the top of the screen in a semi-transparent block and hide the message after a few moments.  It’s a very slick design and one of the more appealing solutions I’ve seen (and I’ve worked with a lot of feedback designs).



Why this solution rocks

  • Feedback at the top of the screen prevents hiding important elements in the page body.  This avoids a very common problem with alert/lightbox feedback solutions.
  • The blind down effect draws your attention, yet is not visually jarring.  Apple does an excellent job with similar effects within their products.
  • Absolute positioning the overlay abovethe page content prevents page height popping when sliding down the alert message.
  • Automatically hiding the alert after a time period removes the need for a dismiss button.

Apparently, Twitter rules the world and everything Twitter does needs to be copied by every other application. I’ve seen this solution ported to PHP, so I figured I might as well save people time and show how to accomplish Twitter style alert messages in Rails.  All it takes is a little SASS and jQuery and you’ll be set…

See the solution in action at:

Code for the demo is available on github at:

Wire up your layout to have a pretty standard container div for your alert content…

   - if flash[:notice] || flash[:warning]
    %div{:class => "alert  #{'warning' if flash[:warning]}", :style => 'display: none'}
     = flash[:notice] || flash[:warning]
   = yield

JQuery does all the work to show/hide the alert message.

$(function () {
  var alert = $('.alert');
  if (alert.length > 0) {{height: alert.outerHeight()}, 200);
    window.setTimeout(function() {
    }, 3000);

Some fancy CSS to make the alert messages look good.

  :overflow hidden
  :z-index 999
  :width 100%
  :text-align center
  :position absolute
  :top 0
  :left 0
  :background-color rgb(161,195,0)
  :background-color rgba(161,195,0,.8)
  :height 0
  :color #fff
  :padding 9px 0
  :text-shadow rgba(99,130,0,.75) 1px 1px 1px
  :font-size 21px
    :background-color #800