• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Change Language Button on website created with RH 2019 (classic version)

New Here ,
Feb 22, 2024 Feb 22, 2024

Copy link to clipboard

Copied

Hi all,

I am developing a website for documents using RH 2019 (Classic Version) and I am having trouble to insert buttons to let the user to change the language (for example: switching between Italian and English). I inserted this code:

 

<div class="engLang">
<input onclick="setLanguage('ENG')" type="image" name="image" width="30" src="../Azure_Blue/engicon.png" />
</div>
<div class="itaLang">
<input onclick="setLanguage('ITA')" type="image" name="image" width="30" src="../Azure_Blue/itaicon.png" />
</div>

 

into the <div class="topic main"><div class="functionholder"><div class="buttons"> into topic.slp file and it works for desktop version of the website.

I want to insert the same buttons into the mobile and landscape version of the website and I tried to insert buttons into <div class="functionbar"><div class="nav"> for the landscape version and into <div class="mobilespecialfunctions"> for the mobile version but it does not work as the other buttons (basically my buttons are always displayed in every version of my website). I saw that the other buttons, for example <a class="menubutton">, have some attributes but I cannot understand how to use them on my custom buttons. Here is the code for <a class="menubutton"> for the mobile version:

 

<div class="mobilespecialfunctions" data-class="sidebar-opened: $mc.isSidebarTab(@KEY_ACTIVE_TAB); mobile-header-visible: @.l.mobile_header_visible; searchpage-mode: @Key_ACTIVE_TAB == 'fts'" data-attr="aria-hidden: !@KEY_SCREEN_PHONE" role="banner">
<a class="menubutton" data-attr="href: '#'; title:@KEY_LNG.NavTip; aria-hidden: !@.l.mobile_menu_enabled" data-click="$mc.toggleSideBar()"
data-if="@.l.mobile_menu_enabled === true">
<span class="rh-hide" aria-hidden="true" data-html="@KEY_LNG.NavTip"></span>
</a>

</div>

 

Could you please help me to understand how to show only the proper buttons on the specific version of my website like the other ones?

Thank you in advance for the help.

Views

93

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Feb 26, 2024 Feb 26, 2024

Hi @Jeff_Coatsworth , Hi @Amebr , Thanks for the help. I solved adding the "Change language" buttons in the correct place into Topic.slp file without modifying the layout.css or layout-rtl.css file. Using the web browser's developer tools, I found that the "functionbar" object is in common to all the layouts (media-desktop, media-landscape, media-mobile). So I decided to not use media-landscape layout and I add my custom buttons into "mobilespecialfunctions" object for media-mobile layout and in

...

Votes

Translate

Translate
Community Expert ,
Feb 22, 2024 Feb 22, 2024

Copy link to clipboard

Copied

Maybe someone on here knows enough Javascript to help you out, but I suspect you're going to need to find a programmer to assist in this.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 22, 2024 Feb 22, 2024

Copy link to clipboard

Copied

I think you just need to add your classes into the appropriate spot in the stylesheet. Find the section in the layout.css that contains the body.media-desktop div.header div.brs_next style and add your styles in the same format. That should hide your desktop icons from your mobile views.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 26, 2024 Feb 26, 2024

Copy link to clipboard

Copied

LATEST

Hi @Jeff_Coatsworth , Hi @Amebr , Thanks for the help. I solved adding the "Change language" buttons in the correct place into Topic.slp file without modifying the layout.css or layout-rtl.css file. Using the web browser's developer tools, I found that the "functionbar" object is in common to all the layouts (media-desktop, media-landscape, media-mobile). So I decided to not use media-landscape layout and I add my custom buttons into "mobilespecialfunctions" object for media-mobile layout and into "functionholder" object for media-desktop layout. To not use media-landscape layout I choose 1023px as limit for both "Phone maximum width" and "Tablet maximum width" properties set into Layout Customization: <LayoutName>\Media Query. Thanks to both of you for the help

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp