May 6, 2011 2

Flux Slider v1.1 Released

By

There’s been a fair bit of interest in the Flux Slider code I posted about it yesterday. I’ve since managed to tidy the code a little, made a few enhancements and best of all the source is now available on Github.

Demo || Download & Docs & Github

New in v1.1

Added support for Zepto.js as a drop in replacement for jQuery

If you haven’t come across Zepto.js by Thomas Fuchs, you really ought to. Its aim is to offer the same powerful API as jQuery but without all the cross-browser bloat. Its designed to work with Webkit browsers only, which makes it a perfect fit for Flux. v1.1 of Flux now supports your choice of jQuery or Zepto, its up to you to pick the framework that best suits your needs. I suggest Zepto if your deploying to mobile devices only!

Note: Adding Zepto.js support wasn’t without its pitfall’s, see below for my findings.

Added detection of 3d CSS effects to ensure hardware acceleration is used where possible

Not all Webkit builds are made equal, some support 3D transforms and others don’t. For this reason I’ve added some detection into the flux.browser object to determine if the browser supports 3D. Currently iOS devices only use hardware acceleration for 3D translate/rotation requests so by automatically detecting support we can ensure we can force hardware acceleration where possible without preventing transitions from working on un-supporting devices (such as Android1 ).

Adding support for Zepto.js

Zepto promises a light-weight Webkit only drop-in replacement for jQuery. For the most part I found this to be the case, I did come across a couple of issue however but I think most of them are justifiable compromises given Zepto’s aim to be as small a framework as possible. Here are a few of the problems I had:

.css() isn’t as robust as jQuery’s

I expect that in an attempt to keep the size of the library as small as possible, some of jQuery’s error checking isn’t present in Zepto. For example the following code produced an error:

$('div#test').css({'margin':'0'});

The fix was simple and just required the ‘px’ to be added to the margin property.

No .appendTo() function

Zepto supports the .append() function but not .appendTo(). This is again is reasonable from a “keep the framework lightweight” stance, but a little annoying for me as I tend to use the later more than the former. In my experience it allows for better function chaining.

For example:

this.imageContainer = $('<div class="images loading"></div>').css({ 
    'position': 'relative'
}).appendTo(this.container);

Had to be re-written as:

this.imageContainer = $('<div class="images loading"></div>').css({
    'position': 'relative'
});

this.container.append(this.imageContainer);

No event helper functions (e.g. .click())

Instead of the helper functions I’ve become used to, you need to use the .bind() function and specify the event.

  1. I don’t actually have access to an Android device so please let me know how Flux works for you! []
  • Freddy

    I have tested on Dell Streak 7″ Android Froyo 2.2, it is choppy at best, probably due to the absence of hardware acceleration.

  • Anonymous

    Thanks for testing, I suspected this would be the case. Do you know if the newer Honeycomb devices have hardware acceleration?