How can you specify cross-browser transform controls using jQuery since each browser seems to use its own methodology?
Here is the code I am using for Firefox but I can't even get it to work. I think it's because there is no way to tell which transformation – scale, rotate, skew – to use.
$(".oSlider-rotate").slider({
min: 10,
max: 74,
step: .01,
value: 24,
slide: function(e,ui){
$('.user-text').css('transform', ui.value)
}
});
This question is related to
javascript
jquery
css
Setting a -vendor
prefix that isn't supported in older browsers can cause them to throw an exception with .css
. Instead detect the supported prefix first:
// Start with a fall back
var newCss = { 'zoom' : ui.value };
// Replace with transform, if supported
if('WebkitTransform' in document.body.style)
{
newCss = { '-webkit-transform': 'scale(' + ui.value + ')'};
}
// repeat for supported browsers
else if('transform' in document.body.style)
{
newCss = { 'transform': 'scale(' + ui.value + ')'};
}
// Set the CSS
$('.user-text').css(newCss)
That works in old browsers. I've done scale
here but you could replace it with whatever other transform you wanted.
$(".oSlider-rotate").slider({
min: 10,
max: 74,
step: .01,
value: 24,
slide: function(e,ui){
$('.user-text').css('transform', 'scale(' + ui.value + ')')
}
});
This will solve the issue
I started using the 'prefix-free' Script available at http://leaverou.github.io/prefixfree so I don't have to take care about the vendor prefixes. It neatly takes care of setting the correct vendor prefix behind the scenes for you. Plus a jQuery Plugin is available as well so one can still use jQuery's .css() method without code changes, so the suggested line in combination with prefix-free would be all you need:
$('.user-text').css('transform', 'scale(' + ui.value + ')');
If you're using jquery, jquery.transit is very simple and powerful lib that allows you to make your transformation while handling cross-browser compability for you.
It can be as simple as this : $("#element").transition({x:'90px'})
.
Take it from this link : http://ricostacruz.com/jquery.transit/
Source: Stackoverflow.com