Transcending Frontiers

Animating table rows in the browser is problematic. You see, they aren’t block elements and as such don’t have a height or width property. Instead they take their constraints from the content inside them, and the elements that contain them. For rows this typically means they’re constrained by the containing table, and filled by the contained columns.

Today I wanted to slide a row up, and then when it had finished sliding I wanted to remove it from the DOM. Essentially giving it a nice effect when something is deleted.

Given that the height of a row is controlled by it’s content, I figured the easiest way to do this would be to wrap all of the content inside each column with a block element, in this case a div, and then resize those.

jQuery makes this extremely easy :

var el = $(options.element_prefix + id);
el.children("td").each(function() {
    $(this).wrapInner("< div />").children("div").slideUp(function() {el.remove();})
});

NOTE : The div tag in the wrapInner() is malformed because it won’t display properly otherwise. Please remove the space between the opening bracket and ‘div’.

It’s all pretty easy to understand. Essentially my root element is a row, and so for each td in that row wrap it’s content in a div. Then for the child divs in each td, run the slideUp() method. The callback in the slideUp() method says after the animation is done, remove the row. Given the speed of computers these days, no one will notice that the last few columns quite likely just vanish instead of complete their animation.

I recently asked the programming community what were the best options for highlighting code snippets in blog posts. A lot of good answers came back and I settled on using SyntaxHighlighter.

There’s a handy plugin for Wordpress users, though be sure to use the HTML editor and not the Visual/WYSIWYG editor otherwise the name attribute will be stripped from the <pre> tag.

Here’s an example of some Ruby code to show you SyntaxHighlighter in action. This code is, taken from the upcoming AuroraCMS v2.0 - stay tuned for more news on this product in the coming weeks.

def force_login
  if params[:controller] != 'session'
    redirect_to login_path unless logged_in
  end
end

def force_logout(message = 'You have been logged out.')
  self.current_user.forget_me if logged_in?
  cookies.delete :auth_token
  reset_session
  flash[:notice] = message
  redirect_to login_path
end

Previously I’ve used vim’s :TOhtml command to export syntax-highlighted code snippets, but I think this is a much nicer alternative. It also means that we’ll have consistent highlighting across all of our posts regardless of individual poster’s preferences or .vimrc.