GithubHelp home page GithubHelp logo

zachstronaut / jquery-css-transform Goto Github PK

View Code? Open in Web Editor NEW
115.0 7.0 69.0 205 KB

A monkey patch for jQuery 1.3.1+ that adds some cross browser support for 'transform' property to css() method.

Home Page: http://www.zachstronaut.com/posts/2009/02/22/jquery-patch-css-transform.html

jquery-css-transform's Introduction

-----------------------------
READ ME
-----------------------------
jquery-css-transform
Zachary Johnson
www.zachstronaut.com

This monkey patch for jQuery 1.3.1+ allows you to set and get CSS Transforms
in Safari/Chrome/Webkit, Firefox 3.5+, IE 9+, and Opera 11+ in a uniform way
with the jQuery css() method.  You can simply do the following rather than
using browser specific properties:

$('#example').css('transform', 'rotate(165deg)'); // Set rotation transform
$('#example').css({transform: 'rotate(165deg)'}); // Set rotation transform
$('#example').css('transform'); // Get and return transform string as it was set

To use the patch, load jquery-css-transform.js in your project after loading jQuery.

For more information visit:
http://www.zachstronaut.com/posts/2009/02/22/jquery-patch-css-transform.html

This code is currently available for use in all personal or commercial projects
under both MIT and GPL licenses, just like jQuery. 

-----------------------------
Change Log
-----------------------------

2011.05.04 - Temporary solution for current 1.6.x incompatibility, while preserving 1.3.x
             compatibility, until I can rewrite using CSS Hooks.
           - Included change proposed by Damian Poole to avoid problems in IE 9 RC 2.

2010.11.26 - Add support for IE9 (Platform Preview 7) and probably Opera.

2010.11.06 - Update to address new behavior in jQuery 1.4.3 where getting the
             transform property with css() would return a matrix instead of
             the transformation string as set by the user.  It is important to
             note that this patch forces the old behavior at this time in order
             to properly support old code using this patch.
           - Update to correctly support setting transform via
             css({transform: value}) style syntax. (Guess I missed something
             in that 2009.07.15 update.)

2009.07.15 - Update to make sure that you can use css({transform: value}) style syntax, too.

2009.05.24 - Updated to usual jQuery patch/plugin pattern where jQuery is passed in as $ argument.
           - Monkey Patched call to css() really only needed key as a named argument.
           - Neither of these updates really change anything.  Mostly just code cleanliness issues.

2009.02.23 - Added to GitHub.

jquery-css-transform's People

Contributors

zachstronaut avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-css-transform's Issues

Applying a transform as part of a map.

This works:
$(".active").css("transform", "scale(.4)")

This doesn't:
$(".active").css({transform: "scale(.4)"})

To resolve it, I inserted the following at line 59:
if (typeof arg == 'object' && $.props[c_transform] != c_transform)
arg[$.props[c_transform]] = arg[c_transform];

I created a string called c_transform to represent 'transform', to aid compression.

Rich

Incompatible with jQuery 1.6

Hey just wanted to let you know.

The attribute library code was rewritten in jQuery so that $.props is no longer defined, breaking rotate3Di from working.

Would be greatly appreciated if you had any idea of a solve for this.

Broken in FF 16.0.1+

Firefox 16.0.1 and up has added support for the non-prefixed 'transition' property.

empty string on get css transform on first attempt

Hi,
I tried to get a div current transform using $('#mydiv').css('transform') and I get an empty string, but I know that this div has a transform: rotate(-1deg) css style applied via class reference.

If I set a rotation via $('#mydiv').css('transform', 'rotation(-1deg)') I can now read that value via the getter.
Any ideas?

I test on Mac Lion - Safari 5.1.5

Transform is not applied in IE9 RC

The transform doesn't get applied in IE9 RC. I tracked it down to to IE9 attempting to set the property as MozTransform.

I fixed it it by switching the order of checking the various vendor prefixes. e.g.

var properties = ['transform', 'WebkitTransform', 'MozTransform', 'msTransform', 'OTransform'];

to

var properties = ['transform', 'WebkitTransform', 'msTransform', 'MozTransform', 'OTransform'];

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.