Transparent HypeDocument that doesn't block clicks

Using JavaScript with Hype
1

Is it possible to have a transparent hype document that won’t block mouse events, etc from passing through to other page elements below it? Except obviously if the user passes over an element in the document.

2

You can set elements to ‘Ignore all Pointer Elements’ in the Action inspector – are you finding that your document is blocking elements below it?

3

Thanks Daniel. Just wanted to check that Hype itself, minus any elements, doesn’t do anything to block pointer events if the background is transparent.

4

A div ordered above another div that takes points will by default always eat the mouse events.
You’ll want to add pointer-events:none; to the *_hype_container div like so:

<div id="untitled_hype_container" style="margin:auto;position:relatie;width:600px;height:400px;overflow:hidden; pointer-events:none;">
		<script type="text/javascript" charset="utf-8" src="Untitled.hyperesources/untitled_hype_generated_script.js?"></script>
	</div>
5

@jonathan
Can I add that as a style to the head html of the hype document within Hype to make it more portable and lasting?

6

Yes-ish; you’ll need the right selector for the main div. In previews, it is always “index_hype_container” but will be renamed on exports based on your document name (unless your document is named “index!”). So you’d need to know the export name for it to be in your head and probably use both selectors.

<style>
#index_hype_container {
   pointer-events: none;
}
#documentname_hype_container {
   pointer-events: none;
}
</style>

(I had originally accidentally copied code from the v4 which now defines a class="HYPE_document" in the div; this will make it easier in the future!)

The better way might be to use javascript in the head that uses the Hype API to get the main content div ID, for which there is an API. It would be something like:

<script>

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":(function (hypeDocument) {
    var hypeDocumentElement = document.getElementById(hypeDocument.documentId());
    hypeDocumentElement.style["pointerEvents"] = "none";
    hypeDocumentElement.style["pointer-events"] = "none";
  })});

</script>
1 Like