Why is the border sticking out when it opens, and, how do I fix that so it doesn’t?
Is something not aligned properly?
code: https://jsfiddle.net/dyaf7x1e/
What is a good way to determine where all the closing tags go to?
How do you know which goes to which?
A way to know which closing tag belongs to which opening tag.
code: https://jsfiddle.net/xfjyoLza/
As an example:
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="curtain">
<div class="container hide">
<div class="video-wrapper">
<div class="video-ratio-keeper">
</div>
<div class="wrap ">
<div class="video video-frame"></div>
</div>
</div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
<div class="jacket" title="Play">
<svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</svg>
</div>
</div>
</div>
</div>
</div>
Well, first of all, I think you have too many divs. If you have a div and it’s only child is another div you can probably just collapse those. Remember that you can give it more than one class.
As far as seeing which goes with which, a good editor will let you select an element tag and it will highlight the closing tag paired with that - I don’t think JS Fiddle does that. You can also collapse a node - press right to the right of the line number and you can collapse and expand different sections of code - it will do it up to the closing tag.
Another thing would be to break up your code so that you don’t have so much html in one file - but that could be difficult if you are working in vanilla land still.
And sometimes when I was doing vanilla HTML I would sometimes up a comment and the end of the line of the closing tag line to tell it with which opening tag it was associated.
1 Like
Do these 2 closing </div> tags go anywhere, or do they stay where they are?
What’s the rule of thumb, if it doesn’t break the code, then leave them where they are?
<div class="container"></div> <!-- .container -->
<div class="video video-frame"></div><!-- .video-frame -->
code: https://jsfiddle.net/oph29brq/
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="curtain ">
<div class="container"></div> <!-- .container -->
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div><!-- .video-frame -->
</div><!-- .wrap -->
</div> <!-- .video-wrapper -->
</div><!-- .video-ratio-keeper -->
<div class="panel-left"></div><!-- .panel-left -->
<div class="panel-right"></div><!-- .panelright -->
<div class="jacket" title="Play">
<svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</svg>
</div><!-- .jacket -->
</div> <!-- .curtain -->
</div> <!-- .curtain-ratio-keeper -->
</div> <!-- .curtain-wrapper -->
</div><!-- .tcell -->
</div><!-- .outer -->
What exactly is .containers job in this code, and should it be called something else other than container?
Don’t containers usually enclose other things?
https://jsfiddle.net/Lkqhzje7/
This one has nothing inside.
<div class="container">
</div>
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="curtain ">
<div class="container">
</div> <!-- .container -->
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="wrap">
<div class="video video-frame">
</div><! -- .video-frame -->
</div><!-- .wrap -->
</div> <!-- .video-wrapper -->
</div><!-- .video-ratio-keeper -->
<div class="panel">
</div><!-- .panel-left -->
<div class="jacket" title="Play" >
<svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</svg>
</div><!-- .jacket -->
</div> <!-- .curtain -->
</div> <!-- .curtain-ratio-keeper -->
</div> <!-- .curtain-wrapper -->
</div><!-- .tcell -->
</div><!-- .outer -->
They stay where they need to be.
What exactly is
.containersjob in this code, and should it be called something else other than container?
I don’t know, it’s not my code. Is this not your code?
Don’t containers usually enclose other things?
Usually. Do we know that something won’t be added to the DOM programmatically?
Also, I still don’t understand why you aren’t considering simplifying the hierarchy here.
Could:
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="curtain ">
<!-- stuff ... -->
</div> <!-- .curtain -->
</div> <!-- .curtain-ratio-keeper -->
</div> <!-- .curtain-wrapper -->
</div><!-- .tcell -->
</div><!-- .outer -->
be reduced to:
<div class="outer tcell curtain-wrapper curtain-ratio-keeper curtain">
<!-- stuff ... -->
</div>
or something like that?
You seem to have a lot of unnecessary div nesting.
I don’t know there might be some reason, like targeting CSS. But I’d be willing to bet, some of the complexity could be reduced.
1 Like
parentNode vs. ParentElement
How do you know which gets used?
Should these be using all of one or the other?
Is there a way to determine which gets used where and when?
Code 1
https://jsfiddle.net/08a7bywp/1/
const thewrap = cover.parentNode.querySelector(".wrap");
const wrapper = evt.currentTarget.parentNode;
Code 2
https://jsfiddle.net/08a7bywp/
const thewrap = cover.parentElement.querySelector(".wrap");
const wrapper = evt.currentTarget.parentElement;
Code 3
https://jsfiddle.net/dt92v7q8/
const thewrap = cover.parentElement.querySelector(".wrap");
const wrapper = evt.currentTarget.parentNode;
Code 4
https://jsfiddle.net/08a7bywp/2/
const thewrap = cover.parentNode.querySelector(".wrap");
const wrapper = evt.currentTarget.parentElement;
With regards to your question, this talks about that distinction:
In general, it seems that you could benefit from brushing up on HTML and vanilla JS DOM manipulation.
1 Like
Because I am dealing with Elements, I should be using elements. That’s what I read.
In the javascript, what should be used here in the querySelector?
In this part of the javascript.
Should .container .video or .wrap be used in the querySelector?
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentElement.querySelector(" ");
hide(cover);
show(thewrap);
}
.container .video .wrap appear in the html.
<div class="container"></div>
<div class="wrap ">
<div class="video video-frame">
</div>
None are being used in the CSS.
.video is being used here in the javascript.
function initPlayer(wrapper) {
videoPlayer.init({
video: wrapper.querySelector(".video")
});
}
code https://jsfiddle.net/b4guenfd/4/
What would you put there?
const thewrap = cover.parentNode.querySelector(" ");
Looking at this, does something seem wrong there?
<div class="container"></div> <!-- .container -->
<div class="video-wrapper">
<div class="video-ratio-keeper">
<div class="wrap ">
<div class="video video-frame"></div> <!-- ..video-frame -->
</div><!-- .wrap -->
</div> <!-- .video-wrapper -->
</div><!-- .video-ratio-keeper -->
I’m confused… is this code you copied from somewhere else?
In the javascript, what should be used here in the querySelector?
Whichever one you want to target.
None are being used in the CSS.
Then why are they there?
Looking at this, does something seem wrong there?
Yeah, unless it is a styling issue, i don’t understand why you have 5 layers of divs.
Thank you for your help, appreciated. Working on it now.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.