Can't launch other JS function from within Hype consistently

Elements
1

I can’t figure this out… I have a simple Hype Banner that has three Elements each with their own ID. Additionally the page is running a LayerSlider PopUp that is looking for a click on the IDs that are within the Hype document.

The problem is lack of consistency and not knowing how to debug on a greater level to see if it’s to do with loading sequence, DOM or ?

There is a test page here that shows the issue:
https://www.islandwaterpark.com/indexVid.php

I added a simple Div that has one of the expected ids which works without issue. The Hype banner sometimes works on some of the videos other times not so I was thinking a loading sequence issue. But also FireFox and Chrome work differently (Firefox fails 100% in testing on my Mac).

Viewing the Console does not show anything specific to this issue so I am lost and thinking recoding the Hype Banner to do it’s own Lightbox popup, though in the past I was not able to successfully get that to work either :frowning:

What am I missing?

SafetyTips_r2.zip (80.7 KB)

IndexVid
IndexVid.jpg2932×1412 562 KB

2

What might be happening is that the listener function is trying to listen for a click on an element which does not yet exist in the DOM. You probably need to run your function after the Hype document has loaded:

<script>
    function documentHasloaded(hypeDocument, element, event) {

        var lsjQuery = jQuery;
        lsjQuery(document).ready(function () {
            if (typeof lsjQuery.fn.layerSlider == "undefined") {
                if (window._layerSlider && window._layerSlider.showNotice) {
                    window._layerSlider.showNotice('layerslider_225', 'jquery');
                }
            } else {
                lsjQuery("#layerslider_225").layerSlider({
                    createdWith: '6.7.1',
                    sliderVersion: '6.7.6',
                    type: 'popup',
                    popupShowOnce: false,
                    popupShowOnClick: '#vid3',
                    plugins: ["popup"]
                });
            }
        });

    }

    if ("HYPE_eventListeners" in window === false) {
        window.HYPE_eventListeners = Array();
    }
    window.HYPE_eventListeners.push({
        "type": "HypeSceneLoad",
        "callback": documentHasloaded
    });
</script>

It looks like you could combine each of your three functions in here as well since you are repeating a lot of code.

3

I’ll give that a try… Thanks for the tip and also idea of moving the functions within Hype.