Slider-Pushover Widget

Sometimes a designer hands you something that looks a little bizarre in static form. Then they tell you about how it’s supposed to behave and you think “awesome!” right before you think “Oh crap — How do I make it do that?” Such was the case with the sider pushover widget.

You can see the stripped-down end result here http://abbysdoor.com/work_samples/left-to-right-slide-pushover/

It’s primarily a CSS solution. There is one teeny tiny bit of jQuery doing the actual animation toggle, but the real key that makes this function is the use of a certain group of CSS properties, including:

• white-space: nowrap; on the outer container

• display:inline-block; on the left and right container wrappers

• overflow: hidden; on the expandable content

There’s also a clever negative margin (I usually don’t approve of negative margins but it was the simplest way to do this) that helps out with the dynamic border in between the two containers. Totally optional, of course, but it was part of the reason that there were so many wrappers/containers in this widget.

This code is compatible in all major browsers, including IE7+. I also have a version where you can plug in two Backbone.js views.