Hi all,
Just wondering if it is possible to change the alignment on click or a button for a live website? A client is asking for everything right aligned… but most people will find this hard to read.
Hoping there’s an easy one click solution that anyone who tries to read right aligned text and finding it hard can click and it will be right aligned… apart from doubling the website with left aligned text…
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link )
mww
(Milan )
January 16, 2023, 5:07am
2
Hi @WrightDesigner ,
You could add an event listener to the button like this in Page Settings > Custom Code > Before </body>
tag:
$('#button').on('click', function() {
$('#paragraph').toggleClass('rtl');
});
(Make sure you replace ‘#paragraph
’ with the ID of the text you want to change)
Then add a CSS class to Project Settings > Custom Code > Head Code :
.rtl {
direction: rtl !important;
}
Hope this makes sense! Here’s a CodePen to demonstrate: https://jsfiddle.net/d3xkacnu/6/
1 Like
Hi, just saw this thanks for your reply! I’ll try this out
1 Like
Hi there, I’m probably doing something wrong but doesn’t seem to be working for me :-/
Button is named with the class “ra-toggle” and text block is name with the class “toggle-text”.
Any help is most appreciated.
mww
(Milan )
January 29, 2023, 11:01am
5
Hi @WrightDesigner ,
You should be able to fix this by changing the script tags to style tags for the CSS:
<style>
.rtl {
direction: rtl !important;
}
</style>
and make sure if you’re using a class (ra-toggle/toggle-text) in jQuery that you use a .
before the class name like so:
<script>
$('.ra-toggle').on('click', function() {
$('.toggle-text').toggleClass('rtl');
});
</script>