CODEWITHSUNDEEP
jquerycss
Mohanrajan
Mohanrajan

Reputation: 721

how to switch between left and right css rules using Jquery?

I have used css class, for example 

.dropdown-menu{right:0;}

Now I just need to replace css property at client side, that is

.dropdown-menu{left:0;}

Upvotes: 4

Views: 239

Answers (3)

Hugo Yates
Hugo Yates

Reputation: 2111

You can also use removeClass() and addClass() from JQuery if you set up specific classes for what you need:

$('#MyElement').removeClass('rightClass');
$('#MyElement').addClass('leftClass');

Using $('#MyElement').removeClass(); will remove all classes.

So using the OP's example, you'd have:

.dropdown-menu-right {right:0;}
.dropdown-menu-left {left:0;}

Then in the JQuery swap them out i.e:

$('#MyDropDownMenu').removeClass('dropdown-menu-right');
$('#MyDropDownMenu').addClass('dropdown-menu-left');

This saves you having to worry about styling existing outside your stylesheet(s) making it easier/simpler to make changes in the future.

edited to include working example of this in action:

http://jsfiddle.net/CatmanDoes/e213jza6/

JQuery - removeClass , addClass

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176946

you can do like this 

$(".dropdown-menu").css('right', '').css( 'left','0' )

try out pure javascript solution 

   document.getElementsByClassName(".dropdown-menu").style.removeAttribute('right');
   $(".dropdown-menu")..css( 'left','0' )

Upvotes: 1

laaposto
laaposto

Reputation: 12213

You can try:

$('.dropdown-menu').css({
  'right':'auto',
  'left': '0'
 });

Set the default value for right rule and the one you want for left

Upvotes: 2

Related Questions