Javascript in Webhelp responsive output

syed
Posts: 56
Joined: Tue Nov 14, 2017 8:34 pm

Javascript in Webhelp responsive output

Post by syed » Wed Dec 18, 2019 1:22 pm

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
Posts: 334
Joined: Mon Dec 05, 2011 6:08 pm

Re: Javascript in Webhelp responsive output

Post by ionela » Thu Dec 19, 2019 3:41 pm

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
Ionela Istodor
oXygen XML Editor and Author Support

syed
Posts: 56
Joined: Tue Nov 14, 2017 8:34 pm

Re: Javascript in Webhelp responsive output

Post by syed » Fri Dec 20, 2019 2:17 pm

Hi Ionela,

Attached are the files.

Thanks..
oxygen.zip
(3.67 KiB) Downloaded 23 times

syed
Posts: 56
Joined: Tue Nov 14, 2017 8:34 pm

Re: Javascript in Webhelp responsive output

Post by syed » Thu Jan 02, 2020 11:14 am

Hi Ionela,

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

Thanks....

Radu
Posts: 6927
Joined: Fri Jul 09, 2004 5:18 pm

Re: Javascript in Webhelp responsive output

Post by Radu » Tue Jan 07, 2020 2:57 pm

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

syed
Posts: 56
Joined: Tue Nov 14, 2017 8:34 pm

Re: Javascript in Webhelp responsive output

Post by syed » Tue Jan 28, 2020 10:09 am

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 31 times
Syed

syed
Posts: 56
Joined: Tue Nov 14, 2017 8:34 pm

Re: Javascript in Webhelp responsive output

Post by syed » Tue Jan 28, 2020 1:13 pm

Hi,

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

Thanks...

Post Reply