Simple Slide Out Content

This is a super simple CSS example (backed up with just enough JS to show it off), but its still fun. I have a requirement for a specific animation - the team wanted the panel to slide open, but the content to already be there, at normal size in the panel, and they wanted that content to be attached to the side that was sliding.

Nothing fancy. The only real trick is the float-right so that the content is attached to the right side. I could also have looked at something where the content had a negative margin and the that animated so it slid in, or translatedY so it moved in, but that wasn't necessary for this solution.

 


jsFiddle: Cleaning Copy/Paste Input for ContentEditable

This is captured in an AngularJS directive, but the process could easily be bound with jQuery instead and follow the same steps. The basics here are to stop the default paste, read the paste data as plain text, and then to replace some risky characters (necessary for my exact use case).

As noted, this example has been built for and tested in Chrome only - I know for IE, you need to potentially handle a different getData() operation.

 

jsFiddle : Angularized Gauge Display

I kicked up my last example by converting the gauge into an Angular directive.

 

jsFiddle : Circular Gauge with Raphael

A single 0-to-100 percent circular gauge done with Raphael. It is largely based off of a StackOverflow posting, but I added the text display and color animations as tests. It should be easy to bake this into an AngularJS directive for reuse.

 

This is a nice little design article on spacing and typography

This is a nice little design article on spacing and typography; its often hard to explain to a client or a non-designer why spacing and subtle shading makes such a huge difference, but I think its quite obvious when you look at the starting example and the end result.

 

Enabling Safari Developer Tools

I was trying to diagnose a problem with an application today that only seems to be present in Safari. This lead me to think of Safari's Developer Tools, which I remembered were pretty comparable to Firebug for FireFox. My biggest problem was figuring out how to TURN THEM ON.

 

More Entries

Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.