Plug for Improved jQuery Flip effect plugin

I have improved the jQuery Flip Plugin quite a lot. I contributed the updates in july, but there is no release yet. So in case someone wants to use the jquery flip effect plugin, let me plug my version ( zip here)until a new official release is out.

Below are my notes of changes vs 0.5, if you are curious on details.

Enjoy!

• Added a testpage fliptest.html to show the bug I fixed. It can also be good to have included in the plugin for future hackers.

• Version 0.5 failed fliptest nr 3 with tb and bt on Firefox 3,3.5, Opera 9.64 maybe more. You can see that there is a white border over the text, especially if you run it in the slow mode. This does not look good over an element with a background image.

Solution: Don't pick up transparent from the parent node. Instead add a background-color transparent to the style of the cloned node (it will override background-colors applied from a stylesheet, for example with a class).

This didn't work for IE6. But instead of picking up colors from the parent node, use a special trick for IE6. In order to do that, I added a function isIE6orOlder. Removed getTransparent.

• Problem with named colors (like "yellow"), on IE7. I made an acceptHexColors function that forces the use of hex colors.

• for "tb" borderLeftColor and borderRight color need not be set to transparent in first or second animation, because it is already set on the start. Also it caused a white background on Firefox, maybe since transparent is a special kind of color.

• It was difficult to read a very long line, so it split dirOptions into one line per property.

• That made it into 147 lines of setting up the dirOptions. I wanted to simplify it.

Also note, that we set up the four different directions but only one of them is used per call. So there is some unnecessary code being run.

First I split it into four functions, each one returning a dirOption. Then I looked at was common options, in the end it became a few functions in 100 lines, I think you will agree it is more readable and less prone of typing errors.

• jslint error missing radix parameter in int_prop.

• use of global jQuery variable inside the big wraping. This will make flip not work if using jQuery.noConflict(); And it is totally unnecessary. jQuery is passed in as the $ parameters by the call in the last line of the file. So, in two place around jQuery.extent jQuery.fx.step and jQuery.fn.flip I change jQuery to $.

• The cloneId is unnecessary. It is used to get the clone we made, but it is returnde directly when we create it. Instead I made a $clone variable.

• The inner function queue(_this,_self) is unnecessary, also the variables _this and _self become just rebindings of my new $clone and $this. So I removed them.

• I made the onBefore,onAnimation and onEnd send the $clone and $this as parameters that can be used if you want to. Why? Here is a real world sample.

  $me.flip({direction:'tb',
            dontChangeColor: true,
            onBefore:function ($clone) {
                $clone.css({'background-image': "none"});
            },
            onEnd:toggClass});
  

• I added the dontChangeColor settings option. For example, I have an element with no background color. Instead I have a background image, first a bit yellow and then a little grey. I want to use the flip effect, but not change background color. Instead I want to change background image when the flip has finished.

• '0px' is the same as 0. Zero is always zero whatever measurement unit.

• Added 0.6 and some comments to the ChangeLog.

• I can't work with tabs, if you want you can convert it back, 4 chars indentation level.

• The compressed (YUICompress) size has decreased from 4903 to 3903 bytes.