I need to use JavaScript to flip all texts horizontally in body of website. I'm not looking for CSS, I want to use only JavaScript.
<body>All Texts inside body will flip horizontally</body>
CSS Code is:
.flip {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
Thanks in advance
Perhaps you could use the scale capability of style.transform? It still manipulates a style, but doesn't require an inline style or css class.
In ActionScript, we used to flip the scale of an element to invert/reverse it. I'm going to look into this now and see if I can get a little working code.
Tried it, scaling works (gotta remember this one):
index.html:
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="flip_it()">
<div id="flipper">FLIP ME</div>
</body>
</html>
script.js:
function flip_it() {
var elem = document.getElementById ( 'flipper' );
elem.style.transform = 'scaleX (-1)'; // horizontal
// elem.style.transform = 'scaleY (-1)'; // vertical
// elem.style.transform = 'scale ( 1, -1 ) // X and Y
}
The only side effect is, if the text is left justified, it flips the whole element, so it now appears right justified. So reverse the alignment and flip it (probably what I'd do), or center it, or adjust the width of the element (if the element is only as wide as the text it flips in-place as you'd expect).
There's also a rotate feature of transform, but I tried it quick and it didn't seem to "just work":
document.getElementById( 'yourdiv' ).style.transform = 'rotate(90deg)';
