Chris Barr

Broken Lens?

Wednesday, November 26, 2008

Last night I was asked to take some pictures fo a special music event at Seven22. Right before everything started I was setting up my equipment and the glass completely fell out of my Nikkor 18-135mm lens! I needed this lens to shoot with tonight, and everything was starting in about 5 minutes, so my quick fix was to just screw on my UV filter on top of the glass to hold it in place. That seemed to work fine as a temporary solution and the pictures turned out alright, but clearly this isn't a permanent solution!

I decided to inspect things closer, and it turns out that this glass is actually threaded inside the lens casing. Somehow from all kinds of screwing and unscrewing of lens filters and hoods, this must have loosened the threading on the glass. I carefully put everything back together and screwed it back in using a microfiber cloth. Everything seems to be back to normal. What a relief!

Adding Table Rows With jQuery

Saturday, November 22, 2008

Recently I needed a way to click a button and add a new row to a table with an animation using jQuery for people to add new data for a section. Simple right? Well I set up my table with a blank row at the bottom that I hid with CSS, and then when I press a button it clones that row it and puts it at the top with a .slideDown() animation. Here's the code I used:

$("#addRow").click(function(){
	$("#blankRow").clone().prependTo("#myTable tbody").removeAttr("id").slideDown(500);
});

Looks pretty straightforward right? Well it works, but it doesn't seem to render correctly. Here's a demo of this in action to see what I mean.

Turns out that for most jQuery animations when they complete, the display CSS property is set to display:block;. Normally that's all fine and good, but a table row has to be set to display:table-row;. I can't edit how that animation finishes since it's part of jQuery, so now what?

View a Demo

View the Code

Download It!

Well someone on the jQuery Google Group had the great idea to just fill each table cell with a <div>, put all the contents I needed in there, and simply apply the .slideDown() animations to that <div> since by default they are set to display:block; anyway. Brilliant! Basically we never animate the table row itself, only the elements inside it.

I put together a pretty full featured demo with some other cool jQuery tricks I've been learning recently, so take a look and I hope this will help someone else out.