CODEWITHSUNDEEP
javascriptcssvendor-prefix
Sheshbabu
Sheshbabu

Reputation: 248

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:

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

Thanks in advance,
Shesh

Upvotes: 1

Views: 271

Answers (2)

Fresheyeball
Fresheyeball

Reputation: 30015

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)");

Upvotes: 1

eivers88
eivers88

Reputation: 6247

I use a light weight jQuery plugin for rotation: http://code.google.com/p/jqueryrotate/ .It's really easy to use, and you can return the current angel of any html element just by using: .getRotateAngle()

Documentation: http://code.google.com/p/jqueryrotate/wiki/Documentation

Upvotes: 0

Related Questions