We Keep Coding

Animate rotate negative (jQuery GSAP)

I'm having a problem with animating transform rotateX and rotateY. I'm using the GSAP jQuery plugin.
Basically executing this:
$(element).animate({transform: "rotateX(-180deg)"});
has the same effect as executing:
$(element).animate({transform: "rotateX(180deg)"});
I do have perspective set up, in case you were wondering.
Is there a special way I have to define negative values or is this a bug?
UPDATE: I have found a property "shortRotationX" and "shortRotationY" mentioned here: http://codepen.io/GreenSock/pen/ydIgf
However this seems to be a temporary workaround. I would like to know what the correct way is to animate rotations with jQuery + GSAP.
Thank you guys!
Kyryll

This was answered in the GreenSock forums at http://forums.greensock.com/topic/9099-cannot-animate-rotate-negative-jquery-gsap/#entry36552
A rotation of 180 is identical to a rotation of -180 in terms of the browser's transform matrix (use getComputedStyle() to see for yourself), so there's no way to truly discern the difference unless you leverage GSAP's native transform properties like "rotationX", "rotation", "rotationY", etc. When you do that, GSAP can track everything properly for you. Plus it's more optimized for speed. So:
//OLD
$(element).animate({transform: "rotateX(-180deg)"});
//NEW
$(element).animate({rotationX:-180});
//or use GSAP's native API:
TweenLite.to("#element", 0.4, {rotationX:-180});
Also, "shortRotationX" is deprecated ever since we came out with DirectionalRotationPlugin which uses a more intuitive syntax that can also be used to specify clockwise or counter-clockwise movement:
//OLD
{shortRotationX:-180}
//NEW
{rotationX:"-180_short"}
//and to specify a clockwise direction:
{rotationX:"-180_cw"}
//or counter-clockwise:
{rotationX:"-180_ccw"}

It should have the same effect. Turning object 180 degrees will be displayed in same way how it will be displayed if you turn it -180 degrees.
I made you a simple example, if it clears you out:
Fiddle here (just HTML & CSS) so you can see that it has the same effect.
div {
width:200px;
}
#rotate1 {
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}
#rotate2 {
height:100px;
background-color:red;
/* Rotate div */
transform:rotate(-180deg);
-ms-transform:rotate(-180deg); /* IE 9 */
-webkit-transform:rotate(-180deg); /* Opera, Chrome, and Safari */
}

$(window).width() not working in IE9 [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
$(window).width() not working in IE9
I'm trying to do some DOM manipulation for responsive web design. In IE this is not working.
var w = $(document).width();
if (w > 940) {
console.log("If test");
} else {
console.log("Else test");
If I use window.width, it works in IE but stop working in other browsers. Is there a cross browser way for that?

var maskWidth = window.innerWidth;
var maskHeight = window.innerHeight;
As per, $(window).width() not working in IE9

Responsive designs should be done in CSS with media queries:
#media all and (max-width:940px) {
/* some style rules that should be put in place
if the window is smaller than 940px wide */
}

There is an inherent problem with your approach, and that is that "responsive" refers to the design responding to a change in size. With what you are doing here, you only get a detection when the browser loads.
Say, for example, you are using an iPhone to view this site and you turn the phone 45 degrees to landscape instead of portrait. Essentially, your width just changed but your width() didn't.
There are a couple of options I would recommend looking at if you need to use javascript for your DOM manipulation and can't accomplish it with pure CSS (which is generally the best way to go):
Check out the proposed matchMedia() method by Rob Tarr http://seesparkbox.com/foundry/responsive_web_design_and_javascript
Use http://modernizr.com/ or some other library that has already solved this problem for you.

CSS3 Animation in IE8/9

I understand that CSS3 animations do not work in IE. I was just wondering if there is a JavaScript workaround for this problem.
Here's a link to what I want to recreate in IE: http://animation.kashoo.co.uk/
Any advice would be great.

After a quick Google search I found a jQuery plugin that changes jQuery's standard $.animate() function so that it will use CSS3 transitions whenever possible:
$.animate-enhanced
edit:
After trying the above plugin on a site of mine, the site broke. I'm not sure if you will have the same problem or not, but here is my workaround:
You will need Modernizr.js
Basically, you check (with Modernizr) whether the browser supports a given feature, and then decide whether to animate with CSS3 or Javascript.
For example:
(Let's say you are animation an object to move to the right by 200px)
if(Modernizr.csstransitions) {
// use your appropriate browser prefixes
yourDomObject.style.transition = 'left 2s';
yourDomObject.style.left = parseInt(yourDomObject.style.left) + 200 + 'px'
} else {
var left = parseInt($(yourDomObject).css('left')) + 200 + 'px';
$(yourDomObject).animate({
'left' : left
},2000,'easeOutExpo');
}

Check out jQuery's animate functions:
http://api.jquery.com/animate/

There are many JQuery plugins that provide animations. Here's one that has a flip effect similar to the one you are looking for. http://lab.smashup.it/flip/

dynamically modify webkit animation with javascript

I would like to use webkit animation with #-webkit-keyframes but being able to dynamically modify the values on the rule, so that the animation is not static.
All the samples I found use a static #-webkit-frames, is there a way to customize with Javascript?

I had to create a new style rule in the loaded style sheets. Seems to work great in chrome 5.0.342.9 beta (at least)
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("#-webkit-keyframes " + newName + " { from { top: 0px; } to {top: " + newHeight + "px;} }", lastSheet.cssRules.length);
and then assign the animation name using element.style
element.style.webkitAnimationName = newName;

I wish I could credit for this, but here's a link to someone who managed to modify an existing animation, as opposed to creating a new animation.
http://gitorious.org/webkit/webkit/blobs/438fd0b118bd9c2c82b6ab23956447be9c24f136/LayoutTests/animations/change-keyframes.html
I've ran this to verify that it does, indeed, work.
EDIT
So that link is dead and I don't trust Gitorious to maintain URLS anymore so here's a link to a JSFiddle I created to answer a similar question: http://jsfiddle.net/russelluresti/RHhBz/3/
This contains script to find an existing animation, update its values, and assign it to an element to make the animation occur. I have tested this in Chrome 18 and Safari 5.1

jQuery offset() not working in some browsers, on some computers

I have a problem positioning an element in certain browsers. I'm using the jQuery autocomplete found here. The div containing autocomplete values should be directly under the text box, and line up perfectly. The code sets the css left property of the div by using the left property generated by $(textbox).offset();
After un-packing the code to try and fix my problem, I get this:
var a = $(textbox).offset();
element.css({
width: typeof e.width == "string" || e.width > 0 ? e.width : $(textbox).width(),
top: a.top + textbox.offsetHeight,
left: a.left
}).show();
This seems like it should work, and it does work in Firefox. It doesn't work in IE8, Chrome. The top position is always correct, but the sometimes the div is too far to the left, or too far to the right.
On different computers (all with Windows XP), it works in IE8... how can this be? I've also tested it on my Mac, OS 10.5. It works in Firefox, but not Safari.
I've disabled plug-ins, changed screen resolutions, re-sized windows... It just inconsistently works in some places sometimes.
Can anyone think of something I'm missing?
UPDATE:
I have re-worked my code to use the autocomplete supplied with jQuery 1.4.2 and jQuery UI 1.8rc3. It is still broken, same problem. Please help!
UPDATE 2:
See this related question. jQuery UI autocomplete breaks because it uses offset. Does anyone have a work around?
Here is the javascript from the UI autocomplete function that trips up:
.css({ top: (offset.top + this.element.height) + 'px', left: offset.left + 'px' })
If it is changed to top: '0px', left: '0px' it works fine, but is obviously positioned in the wrong spot.

I finally figured out what was happening. I had a css rule defining the width of the body:
body {
width: 900px;
}
Once I changed this to width: 100%; and enclosed the entire page in a div of width 900px, it worked as expected.
It looks like IE uses the body element to measure top and left values for offset(), but uses the window edge when to measure top and left distances when positioning an item absolutely.
I hope this answer will save someone else all the time I've wasted on this...

I met a similar question,finally discovered the float property affects relative,making the relative div not stable in Internet Explorer 8 but performs well in firefox.