CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dumbquestionsbydumbpeople
dumbquestionsbydumbpeople

Reputation: 317

OnClick function not working correctly for repositioning content

I have two issues with my current code.

I'm trying to create an onclick event where that .maincontentcontainer is repositioned when #moreinfo is clicked.

However, when I click it for the second time, it isn't returned to it's original position AND it doesn't work when I click it for a third time, fourth time, etc.

Any help would be great

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") === "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({right: "50%"});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "50%"});
	        $(".maincontentcontainer").attr("trigger", "0");    
	      }
    });
}); 
.container {
  height: 100vh;
}

.contentcontainer {
  position: relative;
  height: inherit;
  bottom: 0;
}

.maincontentcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.maincontentcontainer img {
  position: absolute;
  top: 20%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.maincontentcontainer h3 {
  position: absolute;
  top: 45%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  z-index: 5;
  color: #ffd700;
  font-size: 200%;
  font-family: Lato;
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 45px;
  width: 100%;
  /* float: left; */
  line-height: 1;
  display: flex;
  justify-content: space-between;
}

#one {
  background-color: #ffd700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="container">
  <div class="contentcontainer">
    <div class="maincontentcontainer" trigger="0">
      <h3>Test</h3>
      <img src="https://static1.squarespace.com/static/5463c1d9e4b065276e6675d3/t/5ae6d699562fa7d975d137ce/1525077665893/El+Cap.jpg"></div>
  </div>
  <div class="bottom">
    <h3 id="moreinfo" class="header">More info</h3>
  </div>
</div>
</div>

Upvotes: 3

Views: 59

Answers (3)

Nick
Nick

Reputation: 1422

To fix your original problem, you are pushing the image too far in your else statement. Change left: 50% to left: 20% to move the image back to where it was originally placed.

Additionally, in order to be able to click it repeatedly, you need to reset the position of the image. You can do this by adding left: 0 to the right animation, and right: 0 to the left animation.

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") === "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({right: "50%",left:0});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "20%",right:0});
	        $(".maincontentcontainer").attr("trigger", "0");    
	      }
    });
});
.container {
  height: 100vh;
}

.contentcontainer {
  position: relative;
  height: inherit;
  bottom: 0;
}

.maincontentcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.maincontentcontainer img {
  position: absolute;
  top: 20%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.maincontentcontainer h3 {
  position: absolute;
  top: 45%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  z-index: 5;
  color: #ffd700;
  font-size: 200%;
  font-family: Lato;
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 45px;
  width: 100%;
  /* float: left; */
  line-height: 1;
  display: flex;
  justify-content: space-between;
}

#one {
  background-color: #ffd700;
}
#moreinfo{
  z-index:10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="container">
  <div class="contentcontainer">
    <div class="maincontentcontainer" trigger="0">
      <h3>Test</h3>
      <img src="https://static1.squarespace.com/static/5463c1d9e4b065276e6675d3/t/5ae6d699562fa7d975d137ce/1525077665893/El+Cap.jpg"></div>
  </div>
  <div class="bottom">
    <h3 id="moreinfo" class="header">More info</h3>
  </div>
</div>
</div>

Upvotes: 2

Musa
Musa

Reputation: 97672

I see two issues, one is that the <h3> covers the More info so you cant click it a second time, to demonstrate this I changed its z-index.
The other issue is that your image eventually has left: 50% and right: 50% so no animation will occur, you'll have to clear one for each animation.

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") === "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({right: "50%",left:0});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "50%",right:0});
	        $(".maincontentcontainer").attr("trigger", "0");    
	      }
    });
});
.container {
  height: 100vh;
}

.contentcontainer {
  position: relative;
  height: inherit;
  bottom: 0;
}

.maincontentcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.maincontentcontainer img {
  position: absolute;
  top: 20%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.maincontentcontainer h3 {
  position: absolute;
  top: 45%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  z-index: 5;
  color: #ffd700;
  font-size: 200%;
  font-family: Lato;
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 45px;
  width: 100%;
  /* float: left; */
  line-height: 1;
  display: flex;
  justify-content: space-between;
}

#one {
  background-color: #ffd700;
}
#moreinfo{
  z-index:10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="container">
  <div class="contentcontainer">
    <div class="maincontentcontainer" trigger="0">
      <h3>Test</h3>
      <img src="https://static1.squarespace.com/static/5463c1d9e4b065276e6675d3/t/5ae6d699562fa7d975d137ce/1525077665893/El+Cap.jpg"></div>
  </div>
  <div class="bottom">
    <h3 id="moreinfo" class="header">More info</h3>
  </div>
</div>
</div>

Upvotes: 0

lankovova
lankovova

Reputation: 1426

  • First of all, to be able to click on moreInfo text even if image is on top of that, you should set z-index for #moreinfo element to be greater than one in image.
  • Second problem, is that you have to reset left or right property for image and h3 elements each time animation is applied.

Check out code below. Hope this helps.

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") == "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({ right: "50%", left: 0});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "50%", right: 0});
	        $(".maincontentcontainer").attr("trigger", "0");    
	      }
    });
});
.container {
  height: 100vh;
}

.contentcontainer {
  position: relative;
  height: inherit;
  bottom: 0;
}

.maincontentcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.maincontentcontainer img {
  position: absolute;
  top: 20%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.maincontentcontainer h3 {
  position: absolute;
  top: 45%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  z-index: 5;
  color: #ffd700;
  font-size: 200%;
  font-family: Lato;
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 45px;
  width: 100%;
  /* float: left; */
  line-height: 1;
  z-index: 999;
  display: flex;
  justify-content: space-between;
}

#one {
  background-color: #ffd700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="container">
  <div class="contentcontainer">
    <div class="maincontentcontainer" trigger="0">
      <h3>Test</h3>
      <img src="https://static1.squarespace.com/static/5463c1d9e4b065276e6675d3/t/5ae6d699562fa7d975d137ce/1525077665893/El+Cap.jpg"></div>
  </div>
  <div class="bottom">
    <h3 id="moreinfo" class="header">More info</h3>
  </div>
</div>
</div>

Upvotes: 0

Related Questions