innerHTML with scripts keeps on top of everything

Using JavaScript with Hype
1

So, I have one issue regarding elements with javascript inside innerHTML: it keeps on top of everything else and I can’t interact with some elements that are on top of this element.

So this is what happening in my document/project:

  1. I have one rectangle that I had put some HTML in it with some javascript;
  2. I have created 2 SYMBOLS which I configured them to have some actions on swipe left or swipe right that are on top of the box mentioned above;
  3. when I try to preview or export the document, the swipes on the symbols won’t work because of the box with the javascript. Seems like the box is on top of it even if it’s not (the z-index are correct).

You may give me advice to use a HTML Widget element instead, and it works, but with the HTML Widget element I can’t scroll the content on Chrome for Android (as it generates an iframe) and in the actual version of Chrome an iframe makes the scrollbar stays fixed on the top (as I stated in this topic: Chrome bug: rendering scrollable iframe (seems fixed for desktop, still buggy for Android)). As this seems to be a browser bug, I can’t rely on the developers to fix them as I need to get this done by this week.

I’m using the following script in my project: http://vnjs.net/www/project/freewall/
This is the script I’m using inside the innerHTML (if I remove it, I can interact with the symbols, but the script won’t work, even if I put on the HEAD):

$(function() {
	$(".free-wall").each(function() {
		var lwidth = $(window).width();
		var wall = new freewall(this);
		wall.reset({
			selector: '> div',
			animate: true,
			cellW: 320,
			cellH: 160,
			onResize: function() {
				var cwidth = wall.container.width();
				wall.container.find('.full-width')
				.each(function(index, item){
					wall.fixSize({
						block: item,
						width: cwidth
					});
				});
				wall.fitWidth();
			},
		});
		wall.fitWidth();
	});
	$(window).trigger("resize");
});

Any advices?

In short, all I want to do is to create 2 hotspots on the left and right sides of the project where the user can swipe LEFT or RIGHT to bring some menus (like most of mobile apps). I created 2 SYMBOLS because symbols can use the on swipe left and on swipe right. I tried with the regular on drag action but it is not precise (if I drag on the horizontal axis but even going a little bit vertical, it still activates the menus).

This is a clean file which I reproduced the error: innerhtml_and_symbols_issue-001.hype.zip (21.9 KB)
This is a video I recorded to illustrate the error: http://kazuhiro.nishi.co/allen/upoint/temp/innerhtml_and_symbols_issue-001.mp4

Thanks in advance.

2

Can you share the project ?

3

Unfortunately, no. But I just recorded a video and I’ll upload it now so you guys can see what’s really going on. I hope it can help you guys understanding the issue in a better way.

Thanks for replying!

4

Actually what I need to see is whats happening to the div via console.

What you have written does not really explain what its actually doing and what it should be, per element.

Can you create a doc identical; to the issue ?

5

Going to try to reproduce the error with a clean file as fast as I can. In any case, if you want to take a peek on what I recorded, this is the link: http://kazuhiro.nishi.co/allen/upoint/temp/innerhtml_and_symbols_issue-001.mp4

6

I created the file. It’s on the main post or you can get it here: innerhtml_and_symbols_issue-001.hype.zip (21.9 KB)

Thanks in advance!

7

Okay, the problem seems to be the stack of Divs.

What seems to be happening is this. A symbol is a div, what is inside it is also a div, so from the stack it is only 3 deep to get to the swipe.

Where the darker element is, its now 2 deeper, and so the swipe will not work, as it is under the 2 deep stack.

Screen Shot 2015-05-18 at 17.44.37.png1036×256 156 KB

you would think z-index would sort this out, but my thinking is due to the number in the stack, and the iframes within that element and the fact you have freewall which is giving 100% of the window width.

You can test this by shrinking the container and you will see the swipe works up and down, until its in front of the darken div.

This must be something to do with freewall rather than Hype.

8

Hey MrAddy, thanks for helping out!

Do you have any suggestions on what can be done regarding this issue? I actually don’t know how to tweak freewall as the developer didn’t create an in-depth documentation and to make it even better I’m not a javascript guy. T_T

9

Give me a few hours, ill try and make it work when the kids are in bed :smile:

10

Thanks a lot man. Looking forward your solution. :stuck_out_tongue_closed_eyes:

11

innerhtml_and_symbols_issue-002.hype.zip (100.3 KB)

Try this :smile:

1 Like
12

WOW! It works man! I notice you gave the first div container a ID and called it back at the script. That was the only thing you’ve done or is there something else I’m missing?

Either way, that’s awesome man. I really appreciate your help!

13

In the script, within the darker element, I changed the name of the main container from window too the div I changed.

So yeah, it was looking for the full width of the window, rather than the element.

1 Like