Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can we apply CSS3 style to a image in GWT 2.5

I want to apply a CSS3 transform style to an image in GWT. For Example

imageZoom.getElement().getStyle().setProperty("-webkit-transform", "translate3d("+x+"px, "+y+"px, 0px)");

Where x and y are the coordinates of the mouse cursor in the image. It shows the error as
Casused By java.lang.AssertionError: The style name should be in camel case format.
I renamed the style property to the following

    1.-webkit-Transform
    2.-Webkit-transform
    3.-Webkit-Transform

I have also used the CamelCase Convertor but it is showing the same results as the one entered.

Thanks in Advance

like image 448
Vineet M Avatar asked May 15 '13 05:05

Vineet M


2 Answers

I’m not sure about specifically GWT, but in JavaScript you remove the hyphens when using a prefix. webkit and ms are lower case, but O and Moz are uppercase. Here is some code for setting a transform in WebKit via vanilla JavaScript:

var el = document.getElementById("test");

el.style.webkitTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';

And here are the other prefixes and prefixless. Note the prefixless starts with lowercase:

el.style.MozTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.msTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.OTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.transform = 'translate3d(100px, 100px, 15px) rotate(10deg)';

Here is a demo of it in action: http://jsfiddle.net/qScux/

EDIT:

In GWT, that'd be:

imageZoom.getElement().getStyle().setProperty("webkitTransform", "translate3d("+x+"px, "+y+"px, 0px)")
like image 79
David Storey Avatar answered Nov 11 '22 01:11

David Storey


Here's the code how GWT checks camel case:

private void assertCamelCase(String name) {
    assert !name.contains("-") : "The style name '" + name
    + "' should be in camelCase format";
}

So the possible way you can achieve your goal is to set style, not property of style:

imageZoom.getElement().setAttribute("style", "-webkit-transform: translate3d("+x+"px, "+y+"px, 0px)");

Also you can get the style first, make it toString, then add this property and assign style back to element.

like image 45
Sergey Vedernikov Avatar answered Nov 11 '22 00:11

Sergey Vedernikov