Protoype Effects with CSS and Tables

Bart — Tue, 08 Aug 2006 17:48:00 -0500

One thing I’ve been struggling with the last day was how to incorporate Prototypes Effects into an HTML table. I need a well formatted list of records, something easily done with a <table>, but something that will take advantage of AJAXian effects. Here's the final product. Read on to see how I got it.

The problem is that IE doesn’t remove a table’s elements out of the DOM, and as of recently, Firefox doesn’t either, unless you walk through the DOM. There’s a great description of how to delete records through the DOM using JavaScript here. So to avoid tables, and for example use Effect.Fade to remove a record on deletion, I’d have to use pure CSS and struggle with the cross-browser inconsistencies. Searching the web, I found some great techniques for dealing with these issues, but not being a CSS god, I needed a simpler solution. Another great tool for record handling is SortTables from script.aculo.us. It allows you to move the records around. But still, not what I’m looking for.

So to only use Prototype (actually Effect.Fade is script.aculo.us, which is built on top of Prototype), I found that a combination of CSS and tables does the trick. What you need is a CSS Record id, and a CSS Column class element. Then create a table for each row in your database, assigning the entire table to your CSS Record id. You can equally wrap the entire table into a div. Next, set each <td>’s class to your Column Class. The key is to set the columns width: property in order to have a uniform layout. If each column’s width is the same, you only need one of these defined in CSS. For my example below, each column is different, so I defined 4 different column classes.

Here, I list User objects, with the option to Delete each record. I use link_to_remote with Effect.Fade to delete the record from the database, then fade the record out from the DOM.

If you’re using scaffold, here’s what you need:

CSS content

File: scaffold.css

#cssRecord{
  width: 700px;
  border-top:   1px solid #000000;
  border-left:  1px solid #000000;
  border-right: 1px solid #000000;
  background:   #ffffff;
}

#cssRecord th { 
  background: #dddddd; 
  font-size: 14px; 
  vertical-align: top; 
  text-align: left; 
}

#cssRecord td { 
  background: #eeeeee; 
  font-size: 12px; 
  vertical-align: top; 
  text-align: left; 
}

/** you’ll need a new set of these for each table type  **/
#cssRecord .cssUserCol1 { width: 15%; }
#cssRecord .cssUserCol2 { width: 15%; }
#cssRecord .cssUserCol3 { width: 60%; }
#cssRecord .cssUserCol4 { width: 10%; text-align: center; }

RHMTL Content

– see below for explanation of split_str method.

File: list.rhmtl

<h1>Listing users</h1>
  <table id="cssRecord" cellpadding="2" cellspacing="2"><tr>
    <th class="cssUserCol1">Name</th>
    <th class="cssUserCol2">Date</th>
    <th class="cssUserCol3">Description</th>
    <th class="cssUserCol4"></th>
  </tr></table>

  <% for user in @users -%>
  <div id="userObject<%= user.id %>">
    <table id="cssRecord" cellpadding="2" cellspacing="2"><tr>
      <td class="cssUserCol1"><%= link_to h(split_str(user.name), 10), 
           :action => 'show', :id => user, :controller => 'admin' -%></td>
      <td class="cssUserCol2"><%=h split_str(user.created_on.strftime("%d %B %Y"), 10) 
           -%></td>
      <td class="cssUserCol3"><%=h split_str(user.description, 50) -%></td>

      <td class="cssUserCol4"><%= link_to_remote 'Delete', 
                       :complete => "new Effect.Fade('userObject#{user.id}')",
                       :url => {:action => 'fake_destroy',
                          		:controller => 'admin',
                          		:id => user}, 
                        :confirm => 'Are you sure?', :post => true  
                    -%>
      </td>
    </tr></table>
  </div>
  <% end -%>

If your field content doesn’t wrap within the length you chose, it will realign the columns for that row only, which is messy and defeats the purpose. To remedy this, I created a method to split longer strings. It’s not the best way I’m sure, but works quite well. Just put it into your *_helper.rb file, and pass the object to it. I used it for the cssUserCol2 and cssUserCol3.

File: *_helper.rb

def split_str(str=nil, len=10, char=" ")
 work_str = str.to_s.split(//) if str
  return_str = ""
  i = 0
  if work_str
    work_str.each do |s|
      if (s == char || i == len)
        return_str += char
        return_str += s if s != char
        i = 0
      else
        return_str += s
        i += 1
      end
    end
  end
  return_str
end

"Protoype Effects with CSS and Tables" by Good design! My homepage | Please visit

Fri, 09 Feb 2007 12:41:41 -0600

Good design! My homepage | Please visit

"Protoype Effects with CSS and Tables" by Great work! [url=http://imttbevu.com/tqbv/ovtg.html]My homepage[/url] | [url=http://lowfljrv.com/gdmj/pbna.html]Cool site[/url]

Fri, 09 Feb 2007 12:40:15 -0600

Great work! [url=http://imttbevu.com/tqbv/ovtg.html]My homepage[/url] | [url=http://lowfljrv.com/gdmj/pbna.html]Cool site[/url]

Bart G. Dev...: Protoype Effects with CSS and Tables