CODEWITHSUNDEEP
htmlweblocalization
Jefferson X Masonic
Jefferson X Masonic

Reputation: 593

RTL AND LTR direction using button

Hii I have a simple HTML page with menu, content and options button at the top of my page for RTL an LTR direction, I want users to switch the direction as they wish using the button option, can someone please provide simple sample page or tutorial how can I archive this?

Upvotes: 0

Views: 3294

Answers (1)

Haroon
Haroon

Reputation: 111

You can do this by appending a class to HTML body tag, on the options button click.

I have used two buttons/functions to change the page direction. You can do this by using a single button/function and setting up a flag to identify the page direction

function changeToLTR(){
  $('body').removeClass('direction-rtl').addClass('direction-ltr')
}

function changeToRTL(){
  $('body').removeClass('direction-ltr').addClass('direction-rtl');
}
.menu {
  width : 100%;
  height: 50px;
  background-color: black;
  color: white;
}

.direction-ltr {
   direction: ltr; 
}

.direction-rtl {
   direction: rtl; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class='menu'>Menu</div>
<div class='options'>
<button onclick ='changeToRTL()'>Right to Left</button>
<button onclick ='changeToLTR()'>Left to Right</button>
<div>
<div class='content'>
<h2>Content</h2>
Loreum ipsum doler sit amet....
</div>

Upvotes: 1

Related Questions