jQuery stops working when nesting div

Question

I have a question regarding nested divs and applying classes. In my project I have a div with an id of "content" and inside it a div with an id of "imagewrap" which itself contains and image and some other elements. Here is the html:

 <div id="content">

    <div id="imagewrap" class="notVisible">
      <img src="Images/Image1.jpg" id="front" />

      <div id="previous" class="buttons" onclick="change(-1);"></div>

      <div id="next" class="buttons" onclick="change(1);"></div>
    </div>

  </div> <!-- end of content -->

I want that image to fade in so I have added a class of "notVisible" to the div "imagewrap" and I got some jQuery removing this class and adding a class of "visible" after a delay. js and css:

css

#content {
    height: 100%;
    width: 100vw;
    background-color: white;
    min-height: 580px;
    text-align: center;}

#imagewrap{
    position: relative;
    z-index: 5;
    display: inline-block;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;}

.notVisible {
    opacity: 0;}

.visible {
    opacity: 1;
    transition: opacity 0.7s ease-in-out;}

js:

function showPicture() {

$( "#imagewrap" ).removeClass( "notVisible" );

$( "#imagewrap" ).addClass( "visible" );

}

    setTimeout(showPicture, 7000);

This works as expected. Just to test, I have tried adding the class "notVisible" to the div "content" instead and changing the function showPicture() like so:

 function showPicture() {

    $( "#content" ).removeClass( "notVisible" );

    $( "#content" ).addClass( "visible" );

    }

and this also works with the image fading in. The problem I encounter is that I want now to restructure my html by nesting my "content" div in a tag with an id of "container", like so:

   <section id="container">
     <div id="content">

        <div id="imagewrap" class="notVisible">
          <img src="Images/Image1.jpg" id="front" />

          <div id="previous" class="buttons" onclick="change(-1);"></div>

          <div id="next" class="buttons" onclick="change(1);"></div>
        </div>

      </div> <!-- end of content -->
   </section> <!--end of container-->

and when I do this, the image stops fading in. I have tried applying the class of "notVisible" to the "container" div instead and changing the showPicture() function accordingly and it doesn't work. Why is this not working? Thanks for your time.

Can you replicate your issue on a snippet here or codepen or Jsfiddle ... I copy your code and it works fine https://jsfiddle.net/e0s6ukgm/ — DaniP, Apr 17 '17 at 14:01
Hi I have done a snippet (first time i do one) and it's not working because i don't know how to include the images, but it might give you an idea https://jsfiddle.net/caqub5xg/1/ — Paul, Apr 17 '17 at 14:13
Does your browser supports section tag? Are you sure the code you're running it's exactly what you posted here? — derloopkat, Apr 17 '17 at 14:20
Your actual problem is related to the styles for the img with teh id `#front` that ultra negative values and the absolute position can't show the img just removinf those styles fix the problem and you can see the img fadein https://jsfiddle.net/caqub5xg/2/ .... Why you have those ? — DaniP, Apr 17 '17 at 14:25

score 1 · Answer 1 · edited May 23 '17 at 12:25

1

Read this post What is the difference between <section> and <div>?

section is not a generic element. Replace your section with a div and it should work.

<div id="container">
     <div id="content">

        <div id="imagewrap" class="notVisible">
          <img src="Images/Image1.jpg" id="front" />

          <div id="previous" class="buttons" onclick="change(-1);"></div>

          <div id="next" class="buttons" onclick="change(1);"></div>
        </div>

      </div> <!-- end of content -->
   </div> <!--end of container-->

edited May 23 '17 at 12:25

Community

1
1

answered Apr 17 '17 at 14:05

gforce301

2,944
1
19
24

1

I'm wondering how this could be related with the actual issue .... even if you use a section it works https://jsfiddle.net/e0s6ukgm/ .... of course with a div it works too or with header or with nav ..... and go on semantic is not related here – DaniP Apr 17 '17 at 14:10

jQuery stops working when nesting div

1 Answers1