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
Post a Comment