Changing RTL on click on Button or Java Script Class

Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 11 June 2018

Dear Sir,

Can we convert Right-to-Left (Arabic) Theme on click on Button or Calling Javascript Class. ?

Or any text or section to make it RTL by calling javascript class is also fine to us. We are having multi-language website theme where I like to convert or switch from LTR (Left to Right English) to RTL (Right to Left Arabic) alignment of Entire theme or certain text.

Demo Link Arabic + English - http://demo.fortiushealthclinic.com/

Regards
Suffian Ahmed

Dear Sir, Can we convert Right-to-Left (Arabic) Theme on click on Button or Calling Javascript Class. ? Or any text or section to make it RTL by calling javascript class is also fine to us. We are having multi-language website theme where I like to convert or switch from LTR (Left to Right English) to RTL (Right to Left Arabic) alignment of Entire theme or certain text. Demo Link Arabic + English - http://demo.fortiushealthclinic.com/ Regards Suffian Ahmed
Vote to pay developers attention to this features or issue.
21 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 12 June 2018

Hi,

Unfortunately it is not so simple as it seems. One class will not change anything. Different direction of the theme controls requires different css alignment and positioning properties. One single class will not change anything as we;; as page direction attribute.

Thank you,
Olivia

Hi, Unfortunately it is not so simple as it seems. One class will not change anything. Different direction of the theme controls requires different css alignment and positioning properties. One single class will not change anything as we;; as page direction attribute. Thank you, Olivia
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 12 June 2018

Hi Olivia,

Can you share class names and script so that we will try it to achieve the same...

Mainly we need all headers, text fields, header section like header logo, caption etc need to convert into RTL format.

We will call the JavaScript function from our button or link uisng third party scripts.

Please help us, we need must for our clients. Please do something and provide the sample script so that we will work on it.

Later in the coming feature you can implement the same functionality in the next updates.

Waiting for your valuable support please.

Regards
Suffian Ahmed

Hi Olivia, Can you share class names and script so that we will try it to achieve the same... Mainly we need all headers, text fields, header section like header logo, caption etc need to convert into RTL format. We will call the JavaScript function from our button or link uisng third party scripts. Please help us, we need must for our clients. Please do something and provide the sample script so that we will work on it. Later in the coming feature you can implement the same functionality in the next updates. Waiting for your valuable support please. Regards Suffian Ahmed
Support Team
Support Team posted this 13 June 2018

Hi,

Unfortunately we do not offer such solutions. it is not something simple. This is quite complex task.
If you need classes the best way is to manually inspect desired elements using browser developer tool (f12 in Chrome). The classes start with bd- e.g. "bd-headerarea-..", "bd-textblock-..." etc. Each class has own numeric identifier. They are different in each theme.
Are you sure that there is no way to use different themes for RTL and LTR?

Thank you,
Olivia

Hi, Unfortunately we do not offer such solutions. it is not something simple. This is quite complex task. If you need classes the best way is to manually inspect desired elements using browser developer tool (f12 in Chrome). The classes start with bd- e.g. "bd-headerarea-..", "bd-textblock-..." etc. Each class has own numeric identifier. They are different in each theme. Are you sure that there is no way to use different themes for RTL and LTR? Thank you, Olivia
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 13 June 2018

Hi Sir,

No, we are given request to keep only one theme..

Kindly check the link whter we used it English & Arabic vesrion both in single theme.

URL - http://demo.fortiushealthclinic.com/

Click on the language button top right under horizontal menu to switch between langauges in the same theme.

The only thing we are missing is RTL when we click on Arabic version of a Language Button.

Please help us now.

Thanks in advance,

Regards
Suffian Ahmed

Hi Sir, No, we are given request to keep only one theme.. Kindly check the link whter we used it English & Arabic vesrion both in single theme. URL - http://demo.fortiushealthclinic.com/ Click on the language button top right under horizontal menu to switch between langauges in the same theme. The only thing we are missing is RTL when we click on Arabic version of a Language Button. Please help us now. Thanks in advance, Regards Suffian Ahmed
Support Team
Support Team posted this 13 June 2018

Hi,

Unfortunately we cannot help with this. It will be easy when using two different themes, but we cannot implement RTL and LTR behavior in one theme.

Sincerely,
Hella

Hi, Unfortunately we cannot help with this. It will be easy when using two different themes, but we cannot implement RTL and LTR behavior in one theme. Sincerely, Hella
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 14 June 2018

Hope you implement this feature in the coming soon....

Thanks for your support, we will get back to you if we still need any support regarding the same.

Let me check with some third party script to make it work with RTL and LTR.

Thanks in advance,

Regards
Suffian Ahmed

Hope you implement this feature in the coming soon.... Thanks for your support, we will get back to you if we still need any support regarding the same. Let me check with some third party script to make it work with RTL and LTR. Thanks in advance, Regards Suffian Ahmed
Support Team
Support Team posted this 15 June 2018

You are welcome. Let us know if you have any other issues.

Sincerely,
Hella

You are welcome. Let us know if you have any other issues. Sincerely, Hella

Last edited 15 June 2018 by Support Team

Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 15 June 2018

Thanks for your updates...

Hope we can make use of it the following links samples to convert the existing LTR to RTL

http://rtlcss.com/
https://rtl.daskhat.ir/
https://blog.scottlogic.com/2015/02/13/rtl.html
https://fortysevenmedia.com/blog/archives/styling_right-to-left_text_with_css_on_a_multi-lingual_site

Need your quick response and input regarding the above links

Appreciate your quick support and response on this above samples.

Thanks in advance, don't say no please check the links and update me please.... Please... Pkwase... :-( :-( :-(

Regards
Suffian Ahmed

Thanks for your updates... Hope we can make use of it the following links samples to convert the existing LTR to RTL http://rtlcss.com/ https://rtl.daskhat.ir/ https://blog.scottlogic.com/2015/02/13/rtl.html https://fortysevenmedia.com/blog/archives/styling_right-to-left_text_with_css_on_a_multi-lingual_site Need your quick response and input regarding the above links Appreciate your quick support and response on this above samples. Thanks in advance, don't say no please check the links and update me please.... Please... Pkwase... :-( :-( :-( Regards Suffian Ahmed

Last edited 15 June 2018 by Web IT Solutions LLP

Support Team
Support Team posted this 15 June 2018

All those links can convert the CSS to the RTL, but you need to target that CSS only for the moments when the Arabic language is selected. As I see, the dir attribute is not changing on your site when clicking on the Arabic language. So there is no possibility to target your RTL CSS.

Sincerely,
Hella

All those links can convert the CSS to the RTL, but you need to target that CSS only for the moments when the Arabic language is selected. As I see, the `dir` attribute is not changing on your site when clicking on the Arabic language. So there is no possibility to target your RTL CSS. Sincerely, Hella
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 15 June 2018

Oho... Is there any way to make it work, please.

The Arabic conversion we are using some third party services where they are converting hiding and unhiding Arabic font by clickin on the button.

So, if entire theme converts into RTL is also fine to us... I mean header section, menus, footer section and it's images etc along with body tags, headers, text etc..

Entire theme converting is also fine can we call this on by clicking that language button. ???

Regards
Suffian Ahmed

Oho... Is there any way to make it work, please. The Arabic conversion we are using some third party services where they are converting hiding and unhiding Arabic font by clickin on the button. So, if entire theme converts into RTL is also fine to us... I mean header section, menus, footer section and it's images etc along with body tags, headers, text etc.. Entire theme converting is also fine can we call this on by clicking that language button. ??? Regards Suffian Ahmed
Support Team
Support Team posted this 15 June 2018

Hi,

We do not control this functionality and do not provide support for such custom modifications. You can search for the plug-ins that will make that conversion.

Sincerely,
Hella

Hi, We do not control this functionality and do not provide support for such custom modifications. You can search for the plug-ins that will make that conversion. Sincerely, Hella
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 15 June 2018

Dear Sir,

Can we get non WordPress plugin ?

My website is pure HTML website... So, I need plugin for my pure HTML website. Please refer some links for the same.

Share some third party links or just refer some names which acheice my request and works successful. I will make it work and get support from them please.

Need your special assistance for the same, you have share such a great support so far and requesting you to give support on this too one more time please.

Note: I searched for some third party plugin but all are WordPress support plugins but no plugin supports non WordPress themes or wensite.

Regards
Suffian Ahmed

Dear Sir, Can we get non WordPress plugin ? My website is pure HTML website... So, I need plugin for my pure HTML website. Please refer some links for the same. Share some third party links or just refer some names which acheice my request and works successful. I will make it work and get support from them please. Need your special assistance for the same, you have share such a great support so far and requesting you to give support on this too one more time please. Note: I searched for some third party plugin but all are WordPress support plugins but no plugin supports non WordPress themes or wensite. Regards Suffian Ahmed
Support Team
Support Team posted this 20 June 2018

Hi,

Actually we do not provide support for such custom modifications. You may need some JS code to change the lang attribute when the appropriate language is selected. I'm not sure that we could help about that. Search for some solutions over the internet.

Sincerely,
Hella

Hi, Actually we do not provide support for such custom modifications. You may need some JS code to change the `lang` attribute when the appropriate language is selected. I'm not sure that we could help about that. Search for some solutions over the internet. Sincerely, Hella
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 20 June 2018

Hi Hella,

You mean this is code to change the lang attribute.

https://stackoverflow.com/questions/13606290/html-change-language-using-element-lang

https://stackoverflow.com/questions/32008125/using-javascript-to-change-website-languageRegards

Suffian Ahmed

Hi Hella, You mean this is code to change the lang attribute. https://stackoverflow.com/questions/13606290/html-change-language-using-element-lang https://stackoverflow.com/questions/32008125/using-javascript-to-change-website-languageRegards Suffian Ahmed
Support Team
Support Team posted this 20 June 2018

Hi,

No, she means lang attribute of the html tag. I see that the language selector changes the lang attribute. But dir attribute is still ltr when it should be rtl.
I think this topic is close to what you need:
https://stackoverflow.com/questions/14030792/change-html-dir-attribute-using-jquery

Thank you,
Olivia

Hi, No, she means `lang` attribute of the `html` tag. I see that the language selector changes the `lang` attribute. But `dir` attribute is still `ltr` when it should be `rtl`. I think this topic is close to what you need: https://stackoverflow.com/questions/14030792/change-html-dir-attribute-using-jquery Thank you, Olivia
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 21 June 2018

Hi Olivia,

Yes Ok, got it ;-)

You mean like this, simple script which changes RTL by clicking on a button.

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_dir

We can make use of this on menu dir and header images dir to make it RTL along with all paragraphs, headers like h1 h2 ... etc.

Is I am in the right direction ? Please give us one more then, really appreciate your quick and valuable reply.

Thanks in advance,

Regards
Suffian Ahmed

Hi Olivia, Yes Ok, got it ;-) You mean like this, simple script which changes RTL by clicking on a button. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_dir We can make use of this on menu dir and header images dir to make it RTL along with all paragraphs, headers like h1 h2 ... etc. Is I am in the right direction ? Please give us one more then, really appreciate your quick and valuable reply. Thanks in advance, Regards Suffian Ahmed
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 21 June 2018

Hi Olivia,

We are working on simply to apply float: right to the horizontal menu in the header when we click on the language function button using javascript.

Refer the home.html page to check the code as below,

URL - http://demo.fortiushealthclinic.com/home.html

<script>
function myFunction() {
    document.getElementById('lanrtl').style.cssText = 'float: right!Important;';
}
</script>

Dynamically adding ID to the specific CSS Class as below,

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  $('div.bd-hmenu-7').attr('id', 'lanrtl');
</script>

It will come as below in the dynamic code, or we can add it manually is also fine.

<nav id class data-responsive-menu data-responsive-levels data-responsive-type data-offcanvas-delay data-offcanvas-duration data-offcanvas-timing-function>

But, the point it the code document.getElementById(&#39;lanrtl&#39;).style.cssText = &#39;float: right!Important;&#39;; is not applying or staying and its changing back to float: left Why ???

Even we tried using !Important to over right the style but still no success.

We just like to make the header horizontal menu float to right in Arabic format by default. Just direction alignment we like to make it.

Refer the demo link above in home.html page we have added that script. not in index.html.

Please refer to the above link to check the code and let us know why float style value is getting change again back to left from right. ?

Just need header conversion float to the right when we click on language button (calling javascript calls to achieve the same). Please help us !!!!!

Waiting for your valuable reply.

Thanks in advance,

Regards
Suffian Ahmed

Hi Olivia, We are working on simply to apply `float: right` to the horizontal menu in the header when we click on the language function button using javascript. Refer the home.html page to check the code as below, URL - http://demo.fortiushealthclinic.com/home.html <script> function myFunction() { document.getElementById('lanrtl').style.cssText = 'float: right!Important;'; } </script> Dynamically adding ID to the specific CSS Class as below, <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $('div.bd-hmenu-7').attr('id', 'lanrtl'); </script> It will come as below in the dynamic code, or we can add it manually is also fine. &lt;nav id class data-responsive-menu data-responsive-levels data-responsive-type data-offcanvas-delay data-offcanvas-duration data-offcanvas-timing-function&gt; But, the point it the code `document.getElementById(&#39;lanrtl&#39;).style.cssText = &#39;float: right!Important;&#39;;` is not applying or staying and its changing back to `float: left` Why ??? Even we tried using `!Important` to over right the style but still no success. We just like to make the header horizontal menu float to right in Arabic format by default. Just direction alignment we like to make it. Refer the demo link above in home.html page we have added that script. not in index.html. Please refer to the above link to check the code and let us know why float style value is getting change again back to left from right. ? Just need header conversion float to the right when we click on language button (calling javascript calls to achieve the same). Please help us !!!!! Waiting for your valuable reply. Thanks in advance, Regards Suffian Ahmed

Last edited 21 June 2018 by Web IT Solutions LLP

Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 21 June 2018

Added some sample images for the better understanding from your end...

Regards
Suffian Ahmed

Added some sample images for the better understanding from your end... Regards Suffian Ahmed
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 21 June 2018

Can we apply the style after loading the page once after clicking language button etc

https://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

 $(window).load(function() {
     // executes when complete page is fully loaded, including all frames, objects and images
     alert("window is loaded");

    // this function works only when we click on the Arabic button
    function myFunction() {
        document.getElementById('lanrtl').style.cssText = 'float: right!Important;';
     }
     });

Is that possilbe... ?

Regards
Suffian Ahmed

Can we apply the style after loading the page once after clicking language button etc https://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/ $(window).load(function() { // executes when complete page is fully loaded, including all frames, objects and images alert("window is loaded"); // this function works only when we click on the Arabic button function myFunction() { document.getElementById('lanrtl').style.cssText = 'float: right!Important;'; } }); Is that possilbe... ? Regards Suffian Ahmed
Web IT Solutions LLP
301 Posts
Web IT Solutions LLP posted this 30 June 2018

Dear Sir,

Demo English - http://demo.fortiushealthclinic.com/home.html?lang=en
Demo Arabic - http://demo.fortiushealthclinic.com/home.html?lang=ar

Is there any way to change the float to the right when we call java function using the code...

<script>
function myFunction() {
    document.getElementById('lanrtl').style.cssText = 'float: right!Important;';
}
</script>

Dynamically adding ID to the specific CSS Class as below,

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  $('div.bd-hmenu-7').attr('id', 'lanrtl');
</script>

We need Horizontal Menu to align to Right Float when we click on Arabic Button... Just let us know how to achieve the same, any way to call the code and apply CSS Float: Right or Text-Align: Right when we call the javascript function...

I just want the horizontal to align to the right side...

Can we make this horizontal menu to RTL (Right to Left Position) by clicking on Javascript function... Check the screenshot attached...

Please do help us ASAP.

Regards
Suffian Ahmed

Dear Sir, Demo English - http://demo.fortiushealthclinic.com/home.html?lang=en Demo Arabic - http://demo.fortiushealthclinic.com/home.html?lang=ar Is there any way to change the float to the right when we call java function using the code... <script> function myFunction() { document.getElementById('lanrtl').style.cssText = 'float: right!Important;'; } </script> Dynamically adding ID to the specific CSS Class as below, <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $('div.bd-hmenu-7').attr('id', 'lanrtl'); </script> We need Horizontal Menu to align to Right Float when we click on Arabic Button... Just let us know how to achieve the same, any way to call the code and apply CSS Float: Right or Text-Align: Right when we call the javascript function... I just want the horizontal to align to the right side... Can we make this horizontal menu to RTL (Right to Left Position) by clicking on Javascript function... Check the screenshot attached... Please do help us ASAP. Regards Suffian Ahmed

Last edited 30 June 2018 by Web IT Solutions LLP

You must log in or register to leave comments