Adding HTML fragment with JavaScript into Web Help

Post by **tmakita** » 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]

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,

alin · Post by **alin** » Thu Nov 24, 2016 11:01 am

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

Post by **tmakita** » Thu Nov 24, 2016 11:40 am

Hi Alin,

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

Regards,

harris914 · Post by **harris914** » Fri Mar 16, 2018 10:59 am

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

Post by **cosmin_andrei** » Mon Mar 19, 2018 4:37 pm

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

Adding HTML fragment with JavaScript into Web Help

Adding HTML fragment with JavaScript into Web Help

Re: Adding HTML fragment with JavaScript into Web Help

Re: Adding HTML fragment with JavaScript into Web Help

Re: Adding HTML fragment with JavaScript into Web Help

Re: Adding HTML fragment with JavaScript into Web Help