Class of <body>

Using JavaScript with Hype
1

I have a lightbox type pop-ups on some of my scenes.

I’d like to disable the scrolling of body when those lightboxes are open and let the body scroll again when they’re closed.

So, I found this on Stack Overflow:

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}



$('body').addClass('noscroll');
$('body').removeClass('noscroll');

I implemented that by adding the body.noscroll thing in the <head> and added 2 JavaScript functions: setClass and removeClass and triggered them when required. That didn’t work for me as I got $ isn't defined in console.

So, I looked for pure JS to apply and remove class and found this:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.add("mystyle");
}

Now, if I want to use it, I’d prefer to use class to select elements (if possible in this case as I need to select the whole body except for the lightbox) based on this discussion. Even if that’s not an option, and I have to go by using ID, I’m not sure how to add ID to the body.

What can be done?

2

Have a look at

3

Hello.

I’m very sorry for a delayed response. I was caught-up in a lot of other work.

Anyways, I checked your link and yes, it’s almost the exact thing that I want, but, I’m not quite sure how to implement it in my document (my way of showing pop-ups is kind of different).

Here’s my file: https://drive.google.com/open?id=1nd5nPy9WRq-FC0PUKv7Jvk8OPza3FoZQ and the scene in which it is to be done is ‘Privacy’.

4

I will be honest with you, I had a look at your project before…
The problem is there is sooooo much complex linking/coding and then pages going of to fixed urls and not the scenes in the project that I gave up trying to look at your previous issues.

Even with this issue you are posting the same thing but do not pin point where in your project you are talking about.

I do not really want to wade through all of this project to try and figure out where you are talking about then only to have problems testing myself when the links go of to your server…

My suggestion would be to create a simple project which shows what you are trying to do with your setup for a particualr issue and post that.

I hope this helps…

5

My sincere apologies for not being forum-friendly.

I have now narrowed down the file only to the scene in question and deleted all other layouts, images, functions, etc. that are not required. Also, I’ll explain what’s happening on the scene:

The scene has 2 timelines: Main and Pop-up.

Main timeline contains the onhover effects for some groups, while, the actual lightboxes are in the pop-up timeline.

The scene starts with (excluding the cookie warning), an icon in the top, followed by a title and a description. All of this is static and does nothing significant. This is how the scene looks normally:

image
image.png1718×928 234 KB

Then comes the main part. I have my policy divided in 5 main categories. So, I have made groups of those 5 points. Those groups contain a text element and a box:

image
image.png1718×928 224 KB

The small animations you can see in the timeline are nothing, but, just hover effects on those groups. I have added those go to time in timeline hover effects in group’s onhover property.

Now, when these groups are clicked, animation from another timeline called ‘Pop-ups’ is played. This basically contains the lightbox. As you can see, it starts growing:

image
image.png1718×928 232 KB

…and the text is displayed:

image
image.png1718×928 284 KB

And then, when the close button in the top-right of the lightbox is clicked, the animation plays in reverse (but, I have added the reversed animation in timeline and continued the timeline).

So, I want the scroll of the body behind this pop-up to be locked while this pop-up is open.

Here’s the file: Scene.hype.zip (337.3 KB)

I hope this helps a bit and apologise again. Let me know if any more clarification is needed, but, this was probably the best break-down of the scene in question.

1 Like
6

Thanks, much better… one thing unlock elements when you are posting, otherwise we have to do it on all of them to find the one we want as we cannot just drill down on the scene editor…

Add a new function. Maybe name it freeze()

Add the example code to it

	if (! window.scrollable){ window.scrollable = false}
	
	
	if (!window.scrollable){
	document.body.style.overflow= 'hidden';
	window.scrollable = true;
	} else {
	document.body.style.overflow= 'scroll';
	window.scrollable = false;
	}

Then for all of your groups named ‘Point’

add the run javascript action to the on Mouse click. pointing to the new freeze()

46

On the close button (X) do the same.

2 Likes
7

Yeah, well, that was easy. Thanks a lot.

And yeah, I'll make sure that I ask questions in a better way from now.

8

I just made a few changes to the code:

if (!window.scrollable)
	{
		window.scrollable = false
	}

if (!window.scrollable)
	{
		document.body.style.overflow = 'hidden';
		document.body.style.paddingRight = '10px';
		window.scrollable = true;
	}
else
	{
		document.body.style.overflow = 'auto';
		document.body.style.paddingRight = '0px';
		window.scrollable = false;
	}

I added the document.body.style.paddingRight property to compensate for the ‘motion’ caused when the scrollbar gets ‘deleted’.

Note: The 10px value is correct in my case because I’m using custom webkit scrollbars. That value might be different for other custom or default scrollbars. Also, (possibly) some browsers might ignore the webkit scrollbar property and show their default scrollbar only. In that case, the padding will not completely remove the ‘motion’, instead, it might even add more of it.

Also, I changed the document.body.style.overflow value to auto or else, the browser adds scrollbar to the the bottom (horizontal scrollbar) also.

Just added it here, just in (rare) care that someone like me stumbles upon the same problem.

1 Like
9

I had noticed that. Sure it did not used to happen when I first wrote it.

Good catch.