Rubynaut : Redbox, or a box overlay on rails

Redbox, or a box overlay on rails no comments

Posted by stephane Tue, 20 Mar 2007 18:16:00 GMT

As linked in the last digest, the Craig Ambrose’s Redbox is a Rails plugin inspired by Thickbox. It provides a way to show box overlaying your page.

Example:

Not fully documented, Iâ€™ll give you the way I have used it. Before starting, install the plugin:

script/plugin install http://www.tinboxsoftware.com/plugins/show/redbox/

First you need to verify your CSS and if, same me, your application not cover all the visible page of your navigator you should add the following in your CSS:

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
}

This code allows the overlay to cover all the page. Verify also you have the default javascript loaded and add Redbox CSS and javascript:

<%= stylesheet_link_tag 'redbox' %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'redbox' %>

Next you need to create hidden div for each box you need. The name of the div must follow the Redbox convention: hidden_content_actionname_controllername. The default style have to be display: none;.

<div id="hidden_content_login_admin"
 style="display: none;">

Once you have put this code in your layout, you can activate your overlay with the following code (in my case it was a call to an action rendering a piece of html in return):

<%= link_to_remote_redbox <i>'link text'</i>, :url => {:controller => <i>'controllername'</i>, :action => <i>'actionname'</i>} %>

Thatâ€™s all, Redbox afford other ways to call box donâ€™t hesitate to look at the demos.

When you install redbox, it copies css and javascript to the public folder. You can configure the CSS to modify the transparency of the overlay as you wish.

Hope this article would be helpful