Adding a jacket over my page

JavaScript
1

I need help with this please.

@Paul_Wilkins

@PaulOB

@Ray.H

jacket:

I want to put it over this:

Over the green part.

 width: 936px;
 height:1121px;

My attempt:
https://jsfiddle.net/g72cho6j/12/

I want the whole jacket to disappear after it’s clicked on.

Everything under it would be hidden, disabled, turned off.
However the best way to do that.

Would I attach display none to everything under it, or how would this work?

2

This hides the container: What I want.

.jacket .container {
  display: none;
}

I tried this:

.jacket.container.inactive {
  display: none;
}

I think I’m supposed to be doing something with the javascript.

Or I’m not implementing the css properly.

3

I need to hide the .container, then have it appear after it’s clicked. Removing the jacket.

The jacket shows, you click on it, then it disappears. And then the other stuff appears.

I tried this:

.jacket.active,
.jacket .container {

}

What am I doing wrong?

This shouldn’t be so difficult. I’ve used the hide feature before, but with this I don’t seem to get it.


(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
    wrapper.classList.remove("inactive");
    wrapper.classList.add("active");
    hide(wrapper.querySelector(".open"));
    hide(wrapper.querySelector(".cover"));
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.classList.add("inactive");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacket");
}());
4

I can’t figure this out.

the .jacket hides the .container

You click on the .jacket, the .jacket disappears and the .container shows.

I think it’s the css that needs to be adjusted. But I’m not sure

Maybe the javescript for this one might need to be reconfigured, or maybe it doesn’t and I have things out of place not in the right spot.

5

This would be the starting jacket I made.

When clicked on it the whole thing should disappear.

Revealing what’s behind it:

Over the green part.

 width: 936px;
 height:1121px;
6

Instead of hiding parts inside of the wrapper, you can just hide the wrapper itself.

  function hideInitialOverlay(wrapper) {
    // hide(wrapper.querySelector(".open"));
    // hide(wrapper.querySelector(".cover"));
    hide(wrapper);
  }
7

I’m confused because I don’t know which code I’m starting with.

8

Where working on just the jacket code right now then:

9

I added that:

Should I start adding the other code to it?

10

Now what, I just combined both codes?

It’s still the .container that needs to be hidden.

The .container is what holds everything behind the jacket.

This:

.container.active {
}
11

Yes . . . the container is being hidden.

12

Scroll down to the bottom.

It’s still there sitting below it.

image
image1015×332 55.8 KB

13

When I click the play button, everything in the container is hidden. Including all of that stuff below There is no scroll once you click the button.

14

On first load without clicking anything the container should be hidden.

It is not.

15

Container hidden:

.container {
  display: none;
}

Container not hidden:

16

Then just add the hide class to that container.

17

You mean this:
<div class="container hide">

1 Like
18

How do I make the container appear now after it’s clicked?

Once the jacket is clicked, it disappears and the container should show now.

19

What you’re finding there is that the container doesn’t belong inside of the jacket.
Move the container out of it, and you’ll have better solutions available to you.

20

All I did was move the div tag back under the jacket. Instead of the whole code.

<div class='outer'>
  <div class='tcell'>

    <div class="jacket">

      <svg class="open" width="308" height="308" viewBox="0 0 47.96 51.66">

  <path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
</svg>

      <div class="cover" title="OPEN"></div>
      <div class="linesa"></div>
      <div class="linesb"></div>
    </div>

(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
    // hide(wrapper.querySelector(".open"));
    // hide(wrapper.querySelector(".cover"));
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.classList.add("inactive");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }