0

I have set of menu. i need to rotate vertically (-90 degree). Now i have some code but it not working now. Help me

   $(document).ready(function() {
              $('#tabs').rotate(-90);
              });

Thanks

Bhavan

  • What do you mean by rotate? Like, making the text and stuff inside upside-down/sideways? – Alxandr Sep 03 '11 at 10:31
  • possible duplicate of [How to rotate a div using jQuery](http://stackoverflow.com/questions/3020904/how-to-rotate-a-div-using-jquery) – Davide Piras Sep 03 '11 at 10:31
  • i did a set of menu in horizontal. but now i need to do it vertical. Thats why i am preferred jquery –  Sep 03 '11 at 10:33

3 Answers3

1

This is because rotate() is not a standard method of the jquery object. If you are using this plugin rember to include that before you use it

Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
1

You can rotate things using CSS3's transform rules, which are browser specific (even if they have the same syntax). For this reason, the jQuery team decided to not handle this until this when it becomes standard.

So basically, what you can do is to create a class in your CSS that rotate things and then, with jQuery add that class to your element.

CSS:

.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

jQuery:

$(document).ready(function(){
    $('.foo').addClass('rotate');
}):

Alternatively, but I'd not go into this direction, there are a lot of plugins that are able to add rotate support to jQuery.

Alessandro Vendruscolo
  • 14,493
  • 4
  • 32
  • 41
0

Instead using jQuery to rotate it, why don't you just add a class to it instead? And then, in your stylesheet, create a new rule for that class that will rotate the element

The following CSS should get you started

.box_rotate {
 -webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(90deg);  /* FF3.5+ */
      -ms-transform: rotate(90deg);  /* IE9 */
       -o-transform: rotate(90deg);  /* Opera 10.5 */
          transform: rotate(90deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand');
               zoom: 1;
}
Kemal Fadillah
  • 9,760
  • 3
  • 45
  • 63
  • It is working fine but ie 7 and ie 8 looks not good (some expand and zoom). Can you send the code for ie7 & ie8 –  Sep 03 '11 at 10:44