javascript not working in MSIE,Safari,Opera; works in FF,Chrome; how to use jQuery instead? -


i new writing javascript , new jquery. trying make these (3) images tumble across top of page on body load. works ok in ff , chrome, not @ in msie, safari , opera. i'm not sure how include html or css here. website tumbleweedcolorado.com

this javascript , html below.

 //external js file     function slidein(el){          var elem = document.getelementbyid(el);           elem.style.transition = "left 5.0s ease-in 0s";            elem.style.left = "950px";             }     function slideover(el){          var elem = document.getelementbyid(el);           elem.style.transition = "left 5.0s ease-in 0.7s";            elem.style.left = "950px";             }     function slideright(el){          var elem = document.getelementbyid(el);           elem.style.transition = "left 5.0s ease-in 2.5s";            elem.style.left = "950px";             }      var looper;     var degrees = 0;     function rotateanimation(el,speed){     var elem = document.getelementbyid(el);         if(navigator.useragent.match("chrome")){         elem.style.webkittransform = "rotate("+degrees+"deg)";         } else if(navigator.useragent.match("firefox")){         elem.style.moztransform = "rotate("+degrees+"deg)";         } else if(navigator.useragent.match("msie")){         elem.style.mstransform = "rotate("+degrees+"deg)";         } else if(navigator.useragent.match("opera")){         elem.style.otransform = "rotate("+degrees+"deg)";         } else if(navigator.useragent.match("safari")){         elem.style.applewebkittransform = "rotate("+degrees+"deg)";         } else {         elem.style.transform = "rotate("+degrees+"deg)";     }     looper = settimeout('rotateanimation(\''+el+'\','+speed+')',speed);     degrees++;     if(degrees > 359){     degrees = 1;     }     } 

vendor prefixes aren't intended permanent, chrome won't use webkittransform, example.

you'll better served using feature detection browser sniffing, determining appropriate property name exist:

if ('transform' in elem.style) {     elem.style.transform = "rotate("+degrees+"deg)"; } else if ('webkittransform' in elem.style) {     elem.style.webkittransform = "rotate("+degrees+"deg)"; } // etc. 

but, can use css property names elem.style.setproperty():

function rotateanimation(el,speed){     var elem = document.getelementbyid(el);     var transform = "rotate("+degrees+"deg)";      elem.style.setproperty('-webkit-transform', transform);     elem.style.setproperty('-moz-transform', transform);     elem.style.setproperty('-ms-transform', transform);     elem.style.setproperty('-o-transform', transform);     elem.style.setproperty('transform', transform);      // ... } 

Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -