Adding HTML fragment with JavaScript into Web Help

Post here questions and problems related to editing and publishing DITA content.
tmakita
Posts: 100
Joined: Fri Apr 08, 2011 7:58 am

Adding HTML fragment with JavaScript into Web Help

Post by tmakita »

Hi,

One of my user want to add "Back To Top" button in Web Help Responsive output HTML. As it is important request, I tried to add HTML fragment by specifying "webhelp.fragment.after.toc_or_titles" parameter as "${pd}/backButton.xhtml".

[${pd}/backButton.xhtml]

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css" scoped="scoped"><![CDATA[
#jump-page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 0.8em;
z-index:10;
}
#jump-page-top span {
background: #666;
text-decoration: none;
color: #fff;
width: 70px;
padding: 10px 0;
text-align: center;
display: block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#jump-page-top span:hover {
text-decoration: none;
background: #999;
}]]>
</style>
<script type="text/javascript"><![CDATA[$(document).ready(function() {
var topBtn = $('#jump-page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 10) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 100);
return false;
});
});]]></script>
<p id="jump-page-top"><span>PAGE TOP</span></p>
</body>
</html>
The Web Help build ends fine. But "Back To Top" button always appears. This is because "if ($(this).scrollTop() > 10)" is changed into "if ($(this).scrollTop() > 10)" in the build process.

Are there any methods to avoid this issue? Or are there any methods to add custom JavaScript code into Web Help Responsive output?

Regards,
--
/*--------------------------------------------------
Toshihiko Makita
Development Group. Antenna House, Inc. Ina Branch
Web site:
http://www.antenna.co.jp/
http://www.antennahouse.com/
--------------------------------------------------*/
alin
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: Adding HTML fragment with JavaScript into Web Help

Post by alin »

Hello,

Please use XML comments to wrap the CSS and JS content instead of CDATA sections.
For example:

Code: Select all


<script type="text/javascript">
<!--
$(document).ready(function () {
var topBtn = $('#jump-page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 10) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({scrollTop: 0}, 100);
return false;
});
}); //--></script>
Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
tmakita
Posts: 100
Joined: Fri Apr 08, 2011 7:58 am

Re: Adding HTML fragment with JavaScript into Web Help

Post by tmakita »

Hi Alin,

Thank you for your quick reply.
Now it works fine!

Regards,
--
/*--------------------------------------------------
Toshihiko Makita
Development Group. Antenna House, Inc. Ina Branch
Web site:
http://www.antenna.co.jp/
http://www.antennahouse.com/
--------------------------------------------------*/
harris914
Posts: 8
Joined: Tue Mar 06, 2018 10:57 am

Re: Adding HTML fragment with JavaScript into Web Help

Post by harris914 »

Hi Alin,

I was looking at your example above. I have a XSL file. Can I include JavaScript in it? I wan to handle a button click event. Is it possible using XSL in Oxygen XML?

Thanks
cosmin_andrei
Posts: 135
Joined: Mon Jun 12, 2017 10:50 am

Re: Adding HTML fragment with JavaScript into Web Help

Post by cosmin_andrei »

Hello,

You can find more details about how to include a Javascript in WebHelp Responsive output, here:
https://www.oxygenxml.com/doc/versions/ ... -html.html
Regards,
Cosmin
--
Cosmin Andrei
oXygen XML Editor and Author Support
Post Reply