Posted on

Animated Pitchbars

Another project for a contract that I thought I would post, An animated pitch bar. Originally created for theamm.org it was used for give short bits of information on their service, but it can be used for anything. Instead of breaking it down and going through it section by section, I’m going to try this a different way, first I’ll post the code as it is used, then I’ll explain the reasoning behind it. Heres the scripting you’ll need.

Snipplr: http://snipplr.com/view/54562/animated-pitchbars/

First we use jquery to load this once the document is complete (since the script needs the appropriate HTML to be ready to work properly). The function starts with variables, the first line of them are ones for easy modification, pitches in the number of pitches it will show at once, and the shortdelay/longdelay is the delay between animating individual and pitches and the delay between animating the last displayed pitch and starting from the top again respectively.

After that there is a while statement, this takes the appropriate pitch and wraps each element around a span for animation purposes. Then it gets into the main scripting and animation section.

The each function runs through each of the spans and starts the animation on it. First is fades the current value out, it inserts the new pitch, pre-set at 0 opacity, and fades it in span-by-span. Once the loops is complete (using the n3 variable to count and compare) it runs a couple checks, first if it’s on the last pitch being displayed or not, if it is the last one it reset the pitch display counter to 1, if not it adds one to it. Then it check to see if it’s on the last pitch in the list of all pitches, again, if it is it resets it to one, if not it adds one. Finally it checks to see what it’s going to be doing next. If it’s going to start from the first displayed pitch again it waits for the long-delay value and starts the script again, preserving the pitch number and the pitch display location, other wise it waits the shot delay time and again send the appropriate information out.

With this setup the script will run forever, looping when needed. It does not require a even number of pitches or a specific pitch/display ratio and the script doesn’t need to be changes if you add or subtract new pitches to you list. It does require some HTML formatting though, which should look like this.

  • Pitch 1
  • Pitch 2
  • Pitch 3
  • Pitch 4
  • Pitch 5

Snipplr: http://snipplr.com/view/54562/animated-pitchbars/

The first section is the list of pitches, stored in an un-ordered list with the id “pitches”. Each pitch simply goes in a list item. Theres nothing more to creating the list of all your pitches. The display goes inside the divs. The class pitchbar is my own simply for formatting (it’s not required if you don’t want it there) the other one, activepitch# is the area where the the current pitches will be displayed. The “#” is for each pitch that you display at a time from 1 to your max, for example the code above was a pitches of three, so I have 3 divs; activepitch1, activepitch2, activepitch3. The example at the link blow has 5 divs and a pitches value of 5 as well. This was set up this was as opposed to simply showing the individual list items because at the time of creation nobody working on the design was sure where they might go or what level of customization of those pitches we might want.

I’ve made an example using of this in action using the HTTP status code, you can see it on the Animated Pitches Example page. If you have any questions or use this in your own project let me know in the comments. I’ll try and help people out with implementation and modifications as I’m sure I’ll always find a new use for the code myself.

Posted on

Inline input labels with animation

This last week I’ve been doing a lot of work making a new homepage that looks like twitters, as well as modifying some things on the rest of the site to try and give it a cohesive look. While most of the site is still on the to do like (it’s a fairly large site) the new homepage is done (you can see it at theamm.org, no promises it hasn’t been changes as the owner has a copy of CSS Edit and it not afraid to use it) and I think it met the goal. One of my favorite (non specialized) features is the animated inline input labels. Because it’s a great, simple implementation I decided to post it here.

First, the input are formatted a very special way, don’t worry it’s basic and easy to implement. First, the input for firstname:

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

The input is obvious, as is the label, the last div, with the class .inputerror.firstname is some specific code for inline displayed error messages, I may make a post about them if there is any interest. The trick to this is the CSS, the div.inputbox is the thing that actually looks like the input, and the true input has no border or background. The label is moved over the input box. Because of this it’s important to have the label properly formatted with the for="" element pointing to the appropriate input field.

The CSS that makes that look right is below, it’s the code used in the example (link at bottom) as the code used on that site is more than a little messy (to many people playing around with it).

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

Obviously that has some styling for looks, which is fully changeable based on your individual implementation, the important stuff is the display, overflow, and the margin-top on the .inputbox label, as well as the previously mentioned background in the .inputbox input style. You’ll notice that the inputbox doesnt have a width or a height (except where limited by the actual input inside it). That because thats all set via the individual inputs so you can vary it from input to input depending on what will go in it (just like the example has set up).

The last bit is the scripting, in this case jquery was used, but it should be convertible to any other javascript library, or straight javascript itself, It’s only in jquery here because I use jquery for nearly everything because it’s fast, stable, and feature-full. In this case it’s a function called at load although it can be called in any as long is it’s sub-function tun on keyup and/or keydown.

Snipplr: http://snipplr.com/view/53928/inline-labels-with-jquery-animations/

What this scripting does is bind the sub-function keyupdown on both the keyup and keydown. The reason it’s done on both is because it’s more reliably in always running that it is when you just do on up or down. The first first checks if there is a value to the input, if not it will reanimate the label back in, with a simple fade in the case, but you do have full control over how it does it. Then, if there is something in the input it will fade it out, in this case by pushing it right while fading out. Once a label is completely faded out it is hidden so it won’t interfere with normal operation of the input box (like selecting or double clicking). It also makes it visible again before fading it back in.

All three parts put together make a nice animated inline label like the ones on the Inline input labels with animation example page. It’s been tested in IE and on mobile devices and seems to work fine albeit with slow or no animations on mobile devices. There was some weird graphical things in IE on the test site but I believe it was due to the font-weight and IE’s lack of fon’t smoothing that caused it.

If you’ve found a great use for this, or have an questions or would like some help with modifications or implementation on your specific site leave a comment below.

Posted on

Saving multiple inline jQuery sortable lists

Using multiple inline nested sortable jquery lists is a great way to build drop down menu systems. Unfortunately the sortable function fails to handle inline lists well. To overcome this I generated a small function to get a string I can use later (after sending it via ajax) to get the new locations of the items. The list will come in the same order they are on the page, and will attached both the items ID and it’s parents ID (if it has one).

Some things to know about how the list system was set up, first, every item that was going to be saved has an ID tag attached to it that contained it’s ID in the database. The subitems were stored in the same table, but with a “parentid” field that, if on the top level says 0, otherwise it had the id of it’s direct parent. The output script in the end loops through based on id of item and id in parent id (it’s a simple system, any questions can be posted and I can go over it in more detail).

Snipplr: http://snipplr.com/view/50855/saving-nested-jquery-sortable-lists/

First, yes, those functions are nested inside each other (since nothing else is going to use the subitems function). Also, the output is just a long string, theres nothing saying it can’t be a array except I guess, but sending JSON to PHP to un JSON it to work on it is more steps then just sending the string and working on it. The string will start with a comma (unless you find a good use for it, the production code this was ripped fro, uses it for the entire menus ID) and it can easily be exploded on the comma to break down items, then on the / to get id/parentid (see what I did there). It all looks rather messy and disorganized but it works very well in the end.

The code snippet above has a bunch of implementation specific code in it (I just ripped it from the test production code) but since this sort of thing isn’t very beginner friendly I don’t see that as being a problem, if you do have question you can post them and I’ll try my best to help, it’s simpler than it may seem.