jquery .css() is not applying in IE9

Question

I'm trying to move some images in my web page but what happens is the code works well in chrome, Firefox and IE10. But when It comes to IE9 and earlier it won't work. Problem may be css3. But I need to move the slides in IE also. Please anyone help me by providing an alternative way.

Script:

target = (vertical) ? "translate(0," + target + ")" :  "translate(" + target + ",0)";
dur = (dur !== undefined) ? (dur/1000) + "s" : "0s";
slider.container.css({
    "transform":target ,
    "-moz-transition-duration":dur,
    "-webkit -transition-duration": dur,
    "-o-transition-duration": dur,
    "transition-duration": dur
});

Edit: HTML

 <div  id="flexslider-1" class="flex-flexslider flexslider">
 <ul class="slides"><li>  
 <div class="views-field views-field-title">   
 <span class="field-content"><a href="/oxavdDev/?q=Nicole_Zitzmann">Nicole Zitzmann</a>    </span>  </div>  
 <div class="views-field views-field-field-image">
 <div class="field-content"><a href="/oxavdDev/?q=Nicole_Zitzmann"><img typeof="foaf:Image" src="/oxavdDev/sites/default/files/styles/flexslider_thumbnail/public/Nicole%20Zitzmann.jpg?itok=-7p1j_PM" width="150" height="150" alt="" /></a></div>  </div></li>
 <li>  
 <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Melanie_Beer">Melanie Beer</a></span>  </div>  
 <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Melanie_Beer"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Melanie%20Beer.jpg?itok=2a6CrwFK" width="150" height="150" alt="Melanie Beer" title="Melanie Beer" /></a></div>  </div></li>
 <li>  
<div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Juan_Bolivar_Gonzalez">Juan Bolivar Gonzalez</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Juan_Bolivar_Gonzalez"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Juan%20Bolivar%20Gonzalez.jpg?itok=FlkwxHKX" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Alex_Caputo">Alex Caputo</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Alex_Caputo"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Alex_1.jpg?itok=RMSQMJUv" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Emma_Dixon">Emma Dixon</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Emma_Dixon"><img typeof="foaf:Image" src="default/files/styles/flexslider_thumbnail/public/Emma%20Dixon_0.jpg?itok=jQaCMqWs" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Constantina_Fotinou">Constantina Fotinou</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Constantina_Fotinou"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/ConstantinaFotinou.jpg?itok=1zs5Ozyc" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Bevin_Gangadharan">Bevin Gangadharan</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Bevin_Gangadharan"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/bevin_0.jpg?itok=DrPlXDjd" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Michelle_Hill">Michelle Hill</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Michelle_Hill"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Michelle.jpg?itok=sB91t6jb" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=JL_Kiappes">J.L. Kiappes</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=JL_Kiappes"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/JL%20Kiappes.jpg?itok=BWWk8dYA" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Abhinav_Kumar">Abhinav Kumar</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Abhinav_Kumar"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Abhinav.jpg?itok=KLnzz1L-" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Jo_Miller">Jo Miller</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Jo_Miller"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Untitled-1.jpg?itok=-SlZu5ik" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Ben_Oestringer">Ben Oestringer</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Ben_Oestringer"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/default_images/download.jpg?itok=e9dEkn3I" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Pietro_Roversi">Pietro Roversi</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Pietro_Roversi"><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_thumbnail/public/pietro.jpg?itok=I1BIVIRl" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Andrew">Andrew Sayce</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Andrew"><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_thumbnail/public/AndrewSayce1.jpg?itok=D-5ByU9B" width="150" height="150" alt="" title="Andrew Sayce" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Simon_Spiro">Simon Spiro</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Simon_Spiro"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Simon.jpg?itok=SBK4e1n1" width="150" height="150" alt="" /></a></div>  </div></li>
<li>  
  <div class="views-field views-field-title">        <span class="field-content"><a href="/oxavdDev/?q=Steve_Woodhouse">Steve Woodhouse</a></span>  </div>  
  <div class="views-field views-field-field-image">        <div class="field-content"><a href="/oxavdDev/?q=Steve_Woodhouse"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Steve%20Woodhouse.jpg?itok=MPYu6ILP" width="150" height="150" alt="" /></a></div>  </div></li>
</ul></div>

geevee · Accepted Answer · 2013-10-21 08:07:06Z

7

IE9 doesn't support css transitions.

use jQuery .animate() instead:

$('#element_id').animate({
    top: target + 'px'
}, dur);

just make sure #element_id has position:absolute (or relative) in css.

hope that helps.

edited Oct 21, 2013 at 8:07

answered Oct 21, 2013 at 8:00

geevee

5,4715 gold badges33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Samuel Liew Over a year ago

This only answers half the question. OP needs an alternative solution/workaround.

James Over a year ago

@Gal I'm searching for an alternative solution.

James Over a year ago

@Gal I gave $(slider.container).animate({left: target + 'px'}, dur); but it is not working...

geevee Over a year ago

does it have position relative OR absolute ?

James Over a year ago

Yes position relative.

|

Neel · Accepted Answer · 2013-10-21 08:03:58Z

0

I would use Modernizr to detect when css animations are not supported. With Modernizr, it's as simple as:

if(!Modernizr.cssanimations) {
    //jQuery fallback 
}

As for rotating with jQuery I would use: https://code.google.com/p/jqueryrotate/

answered Oct 21, 2013 at 8:03

Neel

11.7k3 gold badges46 silver badges63 bronze badges

2 Comments

rink.attendant.6 Over a year ago

The transform property seems to indicate translation, not rotation.

Neel Over a year ago

rotation is just for an example

Collectives™ on Stack Overflow

jquery .css() is not applying in IE9

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related