Search code examples
javascriptcssvendor-prefix

Applying MozTransform (via JS) in non mozilla browsers

Background info

I'm developing a visual form designer in which people with no coding experience can drag around form fields to create forms and print them or save as a HTML document.

I introduced a way to draw straight lines that can also be slanted at any angle. I accomplished this by using a normal div with no height and using only the bottom border. And when I apply CSS rotate transform to the div, it can be angled at any degree.

Problem

In the designer, when the user changes the angle(slope) of the line, I apply the styles via Javascript. Something like this:

lineWrapper.style.webkitTransform = "rotate(" + angle + "deg)";
lineWrapper.style.MozTransform = "rotate(" + angle + "deg)";

When the user wants to save the form as HTML, I get the outerHTML and return it to the user. Here, if I'm using Chrome, the MozTransform property is not there in the generated HTML and if I'm in Firefox the webkitTransform is not there.

Approaches I tried

I tried to solve this in many ways:

  • Instead of setting it via style property, I tried setting it via style.cssText property. It didn't work.
  • I can take the outerHTML of the div during HTML generation and insert the properties, but it's a very messy thing to do.
  • I can compromise by giving CSS classes for commonly used angles (0, 45, 90, 135, 180 etc), but I don't want to give up here too quickly.

So, I'm asking you guys - Is there a better way to solve this problem?

Thanks in advance,
Shesh

Solution

  • Dont set the style with '.style' instead use 'setattribute'. It should add both in both browsers. Also this will allow you to apply the style with one command.

     lineWrapper.setattribute("style", "-webkit-transform : rotate(" + angle + "deg); -moz-transform : rotate(" + angle + "deg)");