Unload / Disable Javascript "On Layout Load"

Using JavaScript with Hype
1

Here is the hype file: Dropbox - File Deleted - Simplify your life

This is driving me crazy. Im using the scroll to change between scenes, the same code from here:

In the same post, I make a similar question: “Is it possible to "unload" the script so when I reach certain page” and I was answered by DBear:

You would need to use removeEventListener and whenever / wherever you want to remove it use:

window.removeEventListener("mousewheel", scrollScene);
window.removeEventListener("DOMMouseScroll", scrollScene);

And I just did that, but it didn’t worked, I didn’t bother him since I know I suck at coding and I assumed I must be doing something wrong or there is something else, dunno, like making a function or a timeout, or something.

But after so much trying and headaches, I decided to ask to the right people again:

Is it possible to "unload" the script so when I reach certain page? in this case, when I reach certain scene?

Right now Im trying to disable it on the 2nd scene called “how it works”, but there are certain pages in the work where Im required to force the user to navigate using the scroll wheel or force to use the menu on the header, so im in the need to stop the javascript “Jumpwithcroll()”

I also noticed that, even if the script is loaded in the first page, it still works on any scene, Im sure this is intentional.

1 Like
2

Ok, Im figuring out that there is not (yet) a simple way to do this, but for this particular script, using:

window.onwheel = function(){ return false; }

Disable it.

3

Hi

Based on the other post referenced here is some code that should do it for you.

Working with eventListeners in Hype (and in particular removing them) it’s best to add them to the scene element when loading / unloading.

If you run the following “On Scene Load” for your scenes you can check against the scene name and depending on which scene it is you can remove the listener.

// element when this is run on scene load references the "scene"
	element.addEventListener("mousewheel", scrollScene, false);
	element.addEventListener("DOMMouseScroll", scrollScene, false);
	
	if (hypeDocument.currentSceneName() == "Untitled Scene 3") { // check against the scene name in this case Scene 3
	
		element.removeEventListener("mousewheel", scrollScene, false);
		element.removeEventListener("DOMMouseScroll", scrollScene, false);
	
	}
	
	function scrollScene(e){
	
		var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
		
		if(upORdown === 1){
			hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 0.6)
		}else{
			hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 0.6)
		}
	}
2 Likes
4

WOW, Thanks, that did it!, I just noticed something:

This part doesn't seems to be necessary since using "element" instead of window, I THINK, limit the code to the referenced scene, the code still does’t work unless its summed by something else, like “On Layout Load”.

Im leaving it commented like this:

// element when this is run on scene load references the "scene"
element.addEventListener("mousewheel", scrollScene, false);
element.addEventListener("DOMMouseScroll", scrollScene, false);

/*if (hypeDocument.currentSceneName() == "Untitled Scene 3") { // check against the scene name in this case Scene 3

    element.removeEventListener("mousewheel", scrollScene, false);
    element.removeEventListener("DOMMouseScroll", scrollScene, false);

}*/

function scrollScene(e) {

    var upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    if (upORdown === 1) {
        hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 0.6)
    } else {
        hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop, 0.6)
    }
}

It does still works exactly the same, the code never made its way to Scene 3 because, it seems, its disabled as soon it leaves Scene 1, which for me, its better, since I can now limit where it can work, instead of trying to disable it.

5

Perhaps I didn't word it right. If you run it "on scene load" for all your scenes then it will work when it reaches scene 3 it will remove it.

Of course it will work as you've done it when added to any scene it will add a listener to that scene only. If you don't add it then there will be no scroll listener on that particular scene.

Whichever way you want to do it.

2 Likes