I have a bit of Javascript that detects the browser and applies a transform to an elements depending on the browser. The one for Webkit works fine on Chrome however the Firefox one doesn't. Can someone please tell me if my code below is correct:

if(typeof navigator.vendor.toLowerCase().indexOf('chrome')!=-1){    
    document.getElementById('jj_preview7').style.WebkitTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}

if(typeof navigator.vendor.toLowerCase().indexOf('firefox')!=-1){
    document.getElementById('jj_preview7').style.MozTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}

Thanks in advance

I have a bit of Javascript that detects the browser and applies a transform to an elements depending on the browser. The one for Webkit works fine on Chrome however the Firefox one doesn't. Can someone please tell me if my code below is correct:

if(typeof navigator.vendor.toLowerCase().indexOf('chrome')!=-1){    
    document.getElementById('jj_preview7').style.WebkitTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}

if(typeof navigator.vendor.toLowerCase().indexOf('firefox')!=-1){
    document.getElementById('jj_preview7').style.MozTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}

Thanks in advance

• javascript
• firefox
• cross-browser
• transform
• browser-detection

• 3 You don't have to test which the engine is. Just assign style to both of them, and browser will accept the one it supports, and ignores the other one. – xiaoyi Commented Jun 9, 2012 at 16:16
• I have just tried your suggestion and again, works on Chrome but not Firefox – Lodder Commented Jun 9, 2012 at 16:23
• can you post your code to jsfiddle? – xiaoyi Commented Jun 9, 2012 at 16:31
• @xiaoyi, here it is jsfiddle/Adu49 , the code generator will look a little out of place cause its designed for my template, not standalone – Lodder Commented Jun 9, 2012 at 16:46
• You might want to use jQuery and the jQuery transform PlugIn – noob Commented Jun 9, 2012 at 16:50

2 Answers 2

// Test element we apply both kinds of transforms to:
var testEl = document.createElement('div');
testEl.style.MozTransform = 'translate(100px) rotate(20deg)';
testEl.style.webkitTransform = 'translate(100px) rotate(20deg)';
var styleAttrLowercase = testEl.getAttribute('style').toLowerCase();

// when we check for existence of it in the style attribute;
// only valid ones will be there.
var hasMozTransform = styleAttrLowercase.indexOf('moz') !== -1;
var hasWebkitTransform = styleAttrLowercase.indexOf('webkit') !== -1;

Doing this you can now do:

var transformParts = [];

if (jj_input23 !== '') {
    transformParts.push('scale(' + jj_input23 + ')');
}

if (jj_input23 !== '') {
    transformParts.push('rotate(' + jj_input24 + 'deg)');
}
if (jj_input25 !== '' && jj_input26 !== '') {
    transformParts.push('translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)');
}

if (jj_input27 !== '' && jj_input28 !== '') {
    transformParts.push('skewX(' + jj_input27 + 'deg) skewY(' + jj_input28 + 'deg)');
}
var transformTxt = transformParts.join(' ');

if (hasWebkitTransform) {    
    document.getElementById('jj_preview7').style.WebkitTransform = transformTxt;
}

if (hasMozTransform) {
    document.getElementById('jj_preview7').style.MozTransform = transformTxt;
}

Here is the solution: http://jsfiddle/Adu49/1/

As you are reading from inputs directly without parse it, so you may generate CSS declaration like: scale() translate(deg,deg) which is obviously illegal. And in this case, Firefox prefer to drop it, while Chrome prefer to accept partial correct declaration. That's why your code doesn't work on Firefox but on Chrome, and after you fill all the fields it will eventually work on both browsers.

So I placed some value || default in your code, which will guaranty a proper default value is set when the input box is empty (if you want to interact with user, you need more validation code here.)

And some off-topic here. Please change the way you naming variables and elements, it's too confusing.