Adding HTML fragment with JavaScript into Web Help
Posted: Thu Nov 24, 2016 8:22 am
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]
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,
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>Are there any methods to avoid this issue? Or are there any methods to add custom JavaScript code into Web Help Responsive output?
Regards,