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.

 


Expressions in a JavaScript Switch Case

Today I stumbled across something I'd never seen before, and at first thought had to be an error - a switch statement with expressions embedded in the case statement:

What the heck is that thing?

 

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.

 

jsFiddle: ngList and ngPluralize AngularJS Example

These two directives individually are pretty awesome, but they also go together really well, at least for demonstrating features. ngList converts string lists into arrays, while ngPluralize converts arrays into different strings based on the item count in the list. Both are important to know.

 

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.