CODEWITHSUNDEEP
javascriptfirefoxcross-browsertransformbrowser-detection
Lodder
Lodder

Reputation: 19743

Webkit and Moz Transform, depending on browser

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

Upvotes: 2

Views: 10475

Answers (2)

artlung
artlung

Reputation: 33833

// 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;
}

Upvotes: 2

xiaoyi
xiaoyi

Reputation: 6751

Here is the solution: http://jsfiddle.net/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.

Upvotes: 0

Related Questions