Javascript in Webhelp responsive output

[syed]

Hi,

There are many discussions around including Javascript to Webhelp Responsive output. I think i am not understanding something basic here.

I would like to include a dropdown button to the head/body. The button allows users to switch to different languages.

Attached is the HTML and CSS file. I am following this section of the topic to refer the HTML by using webhelp.fragment.head parameter.

https://www.oxygenxml.com/doc/versions/ ... ransformat

The output topics does not include the referred HTML.

Syed

[ionela]

Hi Syed,

Could you please provide us a snippet of the HTML fragment you've used and we'll try to figure out a possible cause of this problem.
If the snippet contains sensitive information, you can send it by email to support AT oxygenxml DOT com.

Regards,
Ionela

[syed]

Hi Ionela,

Attached are the files.

Thanks..

oxygen.zip

(3.67 KiB) Downloaded 226 times

[syed]

Hi Ionela,

Did you get a chance to check the attached JavaScript file?

Thanks....

[Radu]

Hi Syed,

Sorry for the delay.

Try to use only this part:

Code: Select all

<script type="text/javascript">

function toggleVersion() {
   var el = document.getElementById('menu_version');
   if (el.className.match('visible')) {
      el.className = 'menu_version';
   } else {
      el.className = 'menu_version visible';
   }
}

</script>

in the webhelp.fragment.head parameter and then this part:

Code: Select all

<div class="mainNav">
			
			<div class="version">
			  <button class="change_version_action" onclick="toggleVersion()">Change language</button>
			  <p id="menu_version" class="menu_version">
			    <a href="../EN/EN.html" target="_blank">English</a>
			    <a href="../FR/FR.html" target="_blank">French</a>
			  </p>
		    </div>
		</div>

using the webhelp.fragment.before.body parameter.
More information about various parameters:

https://www.oxygenxml.com/doc/versions/ ... eters.html

After publishing you can double check by looking inside each HTML document and see if the HTML fragments have been properly expanded.

Regards,
Radu

[syed]

Hi Ionela,

I am back to this topic now. Your suggestion had put the button at the right place. However, the toggle function of the script was not working. So, i have now copied the code from w3school. I think for some reason the Javascript code is not getting picked up by the transform.

Attaching the files for your review. The output.png in the zip displays the js.html file that is not able to be picked up by the transform. When i manually add the code to index.html, the dropdown works fine.

Can you let me know what could be the problem and the solution?

header.zip

(18.01 KiB) Downloaded 196 times

Syed

[syed]

Hi,

The inline comment was missing in the javascript code. After i added, the Javascript worked fine.

Thanks...