I need to rotate text by 90, 180 and 270 degrees.
How can i achieve this in firefox2.
In brief, what i am doing is,
there is one main container div whose background is set by 600x400 image.
There are 4 inner divs each having some text. Now i have to rotate that divs by 90, 180 and 270 by selecting it. Text present in those divs is not rotating.
For IE i have used filter and its working fine.
Any help will be greatly appreciated. If there is any formula for this, then let me know.
I would like to know this as well. It is my understanding this can only be achieved with javascript. But I don't know how I can make a javascript that rotates the text or text box when the browser is Firefox 2.0 or older than Firefox 3.5 I have been searching for two weeks now..
P.S. Rotation of text for IE6/7/8, FF 3.5 and Safari can be done with CSS
Sorry,
that's something that can be done in IE5 and later only.
You can try this code from: develCuy posted on Apr 29 2007, 11:02 PM.
<html>
<head>
<style type="text/css">
.verticaltext{
font: bold 13px Arial;
position: absolute;
right: 3px;
top: 20px;
width: 15px;
writing-mode: tb-rl;
}
</style>
</head>
<body>
<div class="verticaltext">ASU!1! vertical text</div>
</body>
</html>@ Troy III For Internet Explorer and Firefox 3.5 I have found CSS to rotate, but not For Firefox < 3.5. So I am looking for a conditional javascript for that. That should be possible somehow shouldn't it be??
For Firefox 3.5:
-moz-transform: rotate(-90deg);For Safari:
-webkit-transform: rotate(-90deg);For IE:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);For Firefox <= 3.5 ????
Oh yes, that's CSS3!
therefore using conditionals on css, to predate next generation browsers should be accepted.
IE8 will require to hide its filter css also! -ms-filter: can be used; but for older versions you'll need:
<!--[if IE]>
<style>
selector { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);} //possible values are: 0,1,2,3.
</style>
<![endif]-->to hide it from others.
But I know nothing about earlier versions of FX emulating it with javascript.
Javascript is no help in these situations.
But I know nothing about earlier versions of FX emulating it with javascript. Javascript is no help in these situations.
I know you can rotate images with javascript. I just wonder if you can rotate other elements like <div>s or <li>s. And I wonder if you can make javascript condional. So work for a specific browser only...
I know you can rotate images with javascript. I just wonder if you can rotate other elements like <div>s or <li>s. And I wonder if you can make javascript condional. So work for a specific browser only...
No!
There is no way to rotate images with javascript that I know of. When presentation content is in question, javascript can do only what css can do. Nothing more.
Meaning: If you can rotate image on its axes with css - than you'll be able to do the same through javascript too.
The thing you are asking is possible with Internet Explorer filters only.
Watch this example: >>here<< - of course using Internet Explorer! (filters can be applied in any html element regardless!)
[sorry i forgot]
--------------------------------------------------------------------
You can hide your scripting from other browsers using:
<script type="text/jscript">
alert ('hello from JSCRIPT')
</script>
<script type="text/javascript">
alert ('hello from All')
</script>
As a conditional to display data only when FF 2 or FF 3.0.x is used I can use PHP:
<?php
function useragent() {
$useragent = $_SERVER['HTTP_USER_AGENT'];
//print $useragent;
if(strchr($useragent,"Firefox/2")) return 'FIREFOX 2';
if(strchr($useragent,"Firefox/3.0")) return 'FIREFOX 3.0';
}
if(useragent()=='FIREFOX 3.0' || useragent()=='FIREFOX 2') {
echo "inline or external javascript";
}
?>Now I just need to rotate the the li like I do with CSS for IE, Safari and FF 3.5, but then using an external javascript. And like you mentioned Troy III:
Meaning: If you can rotate image on its axes with css - than you'll be able to do the same through javascript too.
Hopefully there is way of rotating the li 90 degrees using a javascript. But I am working on an image only solution in the meanwhile as a plan B. Thanks for your input Troy III!!!
BTW I do not understand how the javascript snippet to hide data from other browsers works, but as I have solved that with PHP I will focus on a javascript to rotate the <li> 90 degrees...
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.