Same ID to elements on different scenes

Hrishikesh · May 24, 2019, 3:06am

I’m trying to create my own cookie consent box in the top of the page just so that it works perfectly with the theme, colours, etc. of my website. I was usin an external service till now, but, customising it was a problem.

So, I’ve 2 groups on each scene:

1: Header (id: header, class: sticky)
2: Group (this contains all the other elements of my webpage).

In the header group, there’s a button that sets a cookie and deleted the group from the page using this code:

var child = hypedocument.getElementById("header");
child.parentNode.removeChild(child);

The problem is, because it’s a cookie consent, it needs to be added in all scenes because I don’t know what’s the first scene a user might check. The user might get there by any link.

So, the code works as long as there is just one element with that ID, but, as soon as I add the same ID to the group on other scenes, I get uncaught error cannot read parent node property of null (something similar on those lines) in console and the element doesn’t get deleted. I searched for the error and found out that even if the same ID is on multiple pages, it won’t work. So, I tried by giving a unique ID and it worked.

So, my problem is, I have like 15 or so scenes and each has like 2 layouts. Giving different IDs to that element on each scene and layout will not just take time, but, also clutter my functions panel.

So, is there some workaround this? Like, doing it all in just 1 function or something?

P.S.: I’m using Advanced Export option to export each scene into its individual HTML file.

MarkHunte · May 24, 2019, 4:32pm

Look at using a class name instead of an id.

Also you may need to then make sure you have the right one on the current scene element.

There are plenty of example on site in getting the current scene element including using the
Extension hypeDocument.sceneInfo

in the

extensions project

You can then querySelector() that scene element for the class
i.e

var sceneInfo = hypeDocument.sceneInfo()
var child = sceneInfo.sceneElement.querySelector('.header');

Hrishikesh · May 24, 2019, 11:15am

I tried that, but, for some reason, even that wasn’t working (mostly, I was doing it wrong).

However, I had a look at the link you sent for the extension project and found another one that worked: hypedocument.currentSceneElement

So, this code went to my <head>:

	<script>

		function extendHype(hypeDocument, element, event)
			{
				hypeDocument.currentSceneElement = function()
					{
    					return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
					}
		
				return true;
			}

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

And that’s the code of my fuction to delete the element is the cookie is found:

	var cookieName = getCookie("privacy");

	if (cookieName === 'yes')
		{
			var elm = hypeDocument.currentSceneElement();
			var child1 = elm.querySelector('.sticky');
			child1.parentNode.removeChild(child1);
		}

MarkHunte · May 24, 2019, 12:12pm

Glad it’s working.

I suspect it was the typo i the code above if you copied and pasted.

Looks like I have some sort of smart quote going on there

er’);

should be.

var child = sceneInfo.sceneElement.querySelector('.header');

testExample.hype.zip (22.0 KB)

The extension itself uses the same type of query for the scene element as the one you used. Just has more options for scene info. (both stem from this thread incidentally )

MaxZieb · May 27, 2019, 6:40am

@jonathan
Petition to add hypeDocument.currentSceneElement to the official API in 4.0.0 or 4.0.1!

Update:
In the context of naming it would probably be named something along hypeDocument.getCurrentSceneElement As all other getter/setter are called get/set

MarkHunte · May 24, 2019, 1:26pm

Totally agree, I use the scene element all the time.

jonathan · May 27, 2019, 1:06am

Added to the list!

(Given how useful it is to scope to it when searching for elements via class name I’m surprised it wasn’t added as part of 3.0 frankly!)