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.

Recommended Answers

All 7 Replies

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...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.