Creating a web application and using CSS3 to transform a div, but encountering a challenge with Firefox. Able to make Chrome, Opera, and IE work properly, except for Firefox. Here's how I'm setting up the working browsers:
obj.style.WebkitTransform = "translateX(17%)";
obj.style.MozTransform= "translateX(17%)"; //edited
obj.style.msTransform = "translateX(17%)";
obj.style.transform= "translateX(17%)"; //edited
Attempted jQuery $("#content").css( "-moz-transform", "translateX(17%)" ); and various solutions found online without success. Any suggestions?
EDIT: Here is the original function in context:
function mousewheelEvt(obj) {
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
var slide=0;
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta;
if (window.opera) delta = -delta;
}
if (delta)
{
if (delta < 0 && slide<=0 && slide>-6)
{
slide--;
console.log(slide);
obj.style.WebkitTransform = "translateX("+(17*slide/2)+"%)";
obj.style.MozTransform = "translateX("+(17*slide/2)+"%)";
obj.style.msTransform = "translateX("+(17*slide/2)+"%)";
obj.style.transform = "translateX("+(17*slide/2)+"%)";
}
else if (delta > 0 && slide<=-1 && slide>=-6)
{
slide++;
console.log(slide);
obj.style.WebkitTransform = "translateX("+(17*slide/2)+"%)";
obj.style.MozTransform = "translateX("+(17*slide/2)+"%)";
obj.style.msTransform = "translateX("+(17*slide/2)+"%)";
obj.style.transform = "translateX("+(17*slide/2)+"%)";
}
}
}
}