Contact Damian Mullins

x Cancel
posted 2 years ago

Sticky

http://stripeconsulting.com/sticky

This is a demo page I whipped together for a client today. It's a little buggy and not quite identical in every browser, but it shows off some functionality I think they'd love to have.

There was a slight learning curve when implementing the jQuery UI droppable & draggable plugins, but after a little tinkering I was happy that I understood the basic workings. The functionality I'm aiming at here is to have the sticky tabs revert back to the closest point of the header instead of the point they came from when they are dragged outside of this section, any help here would be appreciated * hint *.

I first saw the roundabout plugin used over at jquery.org and have been waiting for a suitable project to come up so i could use it. I still have a few issues with the way it positions intself on the page, but haven't had a decent play with it yet.

The two small icons at the sides that shoot up to stick to the header element were created with the animation plugin. I built a custom function which allowed me to control the timing and position of any element I want to animate.

Didn't even check the layout or functionality in ie6 as it wasn't in the spec, but I imagine it wouldn't take much to get a basic version working.

Anyway, this is still at a real basic level but hopefully I can take some of this code into the full project once we get the go ahead.


Update

The live site is now up at stickytec.com, we didn't end up taking much of the demo code to the live site, but I did get to have lot's of fun with custom fonts and javascript animation libraries.