Notorious_Creed Notorious_Creed - 3 months ago 11
CSS Question

JQuery to stop at last element .length & .size() not working

I dont understand why the code does not stop at the last element, with the next & previous buttom. It used to work, but does not anymore.

Working version:



$(document).ready(function() {
$('#next').click(function() {
if ($('.active').next('.case').length) {
$('.active').removeClass('active')
.next('.case')
.addClass('active');
}
});
$('#prev').click(function() {
if ($('.active').prev('.case').length) {
$('.active').removeClass('active')
.prev('.case')
.addClass('active');
}
});
});

html,
body,
section {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#next,
#prev {
position: fixed;
z-index: 101;
}
#next {
right: 0px;
}
#prev {
left: 0px;
}
#t1 {
float: left;
height: 100%;
width: 43%;
background-color: #c92639;
position: absolute;
left: 0px;
}
#logo >h1 {
color: white;
}
#logo >h3 {
width: 58%;
margin: 0 auto;
}
#t2,
#t3 {
height: 50%;
width: 57%;
margin-left: auto;
margin-right: 0px;
}
#t3 {
position: absolute;
right: 0px;
bottom: 0px;
background-color: #c8c8c8;
}
#t2 {
background-color: white;
position: absolute;
right: 0px;
top: 0px;
}
#t2 >img {
margin-top: 11%;
}
#logo {
margin-top: 40%;
}
#t3>ul {
display: inline-table;
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
#t3>ul>li {
display: inline-table;
width: 33%;
}
#t3>ul>li>div>img {
width: 53%;
margin-top: 25%;
}
#home {
display: none !important;
}
#circle1,
#circle2,
#circle3 {
border-radius: 128px;
width: 150px;
height: 150px;
margin: 0 auto;
box-shadow: 10px 10px 5px #888888;
}
#circle1 {
background: #32325f;
}
#circle2 {
background: white;
}
#circle3 {
background: #ef9d34;
}
.active {
display: initial !important;
z-index: 100;
}
#case {
display: none;
position: absolute;
top: 0px;
height: 100%;
width: 100%;
z-index: 99;
}
.stern1 {
background: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next">
<h1>next</h1>
</div>
<div id="prev">
<h1>prev</h1>
</div>

<div id="case" class="case active">
<div id="t1" class="tcee1">
<div id="logo">
<img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1>
<br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>

<div id="t2" class="case tcee2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tcee3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2>
<br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2>
<br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2>
<br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>

<div id="case" class="case">
<div id="t1" class="tstern1" style="background:blue;">
<div id="logo">
<img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1>
<br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2>
<br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2>
<br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2>
<br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>

<div id="case" class="case">
<div id="t1" class="tstern1" style="background:black;">
<div id="logo">
<img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1>
<br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2>
<br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2>
<br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2>
<br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>





Broken version:

I'm trying to make it stop at the last element with both buttons.



$(document).ready(function() {

$('#next').click(function() {
if ($('.in1,.in2,.in3').next('.t1,.t2,.t3').length) {

$('.t1').animate({
left: '-1000px'
})
$('.in1').removeClass('in1')
.next('.t1')
.addClass('in1');


$('.t2').animate({
right: '-1000px'
})
$('.in2').removeClass('in2')
.next('.t2')
.addClass('in2');

$('.t3').animate({
bottom: '-1000px'
})
$('.in3').removeClass('in3')
.next('.t3')
.addClass('in3');

}
});

$('#prev').click(function() {
if ($('.in1,.in2,.in3').prev('.t1,.t2,.t3').length) {

$('.t1').animate({
left: '-1000px'
})
$('.in1').removeClass('in1')
.prev('.t1')
.addClass('in1');


$('.t2').animate({
right: '-1000px'
})
$('.in2').removeClass('in2')
.prev('.t2')
.addClass('in2');

$('.t3').animate({
bottom: '-1000px'
})
$('.in3').removeClass('in3')
.prev('.t3')
.addClass('in3');

}
});

});

html,
body,
section {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#next,
#prev {
position: fixed;
z-index: 101;
}
#next {
top: 0px;
right: 0px;
}
#prev {
left: 0px;
}
.t1 {
float: left;
height: 100%;
width: 43%;
background-color: #c92639;
position: absolute;
left: -1000px;
}
.t2 {
background-color: white;
position: absolute;
right: 0px;
top: -1000px;
}
.t3 {
position: absolute;
right: 0px;
bottom: -1000px;
background-color: #c8c8c8;
}
.out {
-webkit-animation: forwards;
-webkit-animation-name: out3;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 4s;
/* Chrome, Safari, Opera */
animation: forwards;
animation-name: out3;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes out3 {
from {
bottom: 0px;
}
to {
bottom: -1000px;
}
}
/* Standard syntax */

@keyframes t1 {
from {
left: -1000px;
}
to {
left: 0px;
}
}
.t2,
.t3 {
height: 50%;
width: 57%;
margin-left: auto;
margin-right: 0px;
}
.in1 {
-webkit-animation: forwards;
-webkit-animation-name: t1;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 4s;
/* Chrome, Safari, Opera */
animation: forwards;
animation-name: t1;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t1 {
from {
left: -1000px;
}
to {
left: 0px;
}
}
/* Standard syntax */

@keyframes t1 {
from {
left: -1000px;
}
to {
left: 0px;
}
}
.in2 {
-webkit-animation: forwards;
-webkit-animation-name: t2;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 4s;
/* Chrome, Safari, Opera */
animation: forwards;
animation-name: t2;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t2 {
from {
top: -1000px;
}
to {
top: 0px;
}
}
/* Standard syntax */

@keyframes t2 {
from {
top: -1000px;
}
to {
top: 0px;
}
}
.in3 {
-webkit-animation: forwards;
-webkit-animation-name: t3;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 4s;
/* Chrome, Safari, Opera */
animation: forwards;
animation-name: t3;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t3 {
from {
bottom: -1000px;
}
to {
bottom: 0px;
}
}
/* Standard syntax */

@keyframes t3 {
from {
bottom: -1000px;
}
to {
bottom: 0px;
}
}
#logo >h1 {
color: white;
}
#logo >h3 {
width: 58%;
margin: 0 auto;
}
.t2 >img {
margin-top: 11%;
}
#logo {
margin-top: 40%;
}
.t3>ul {
display: inline-table;
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
.t3>ul>li {
display: inline-table;
width: 33%;
}
.t3>ul>li>div>img {
width: 53%;
margin-top: 25%;
}
#home {
display: none !important;
}
#circle1,
#circle2,
#circle3 {
border-radius: 128px;
width: 150px;
height: 150px;
margin: 0 auto;
box-shadow: 10px 10px 5px #888888;
}
#circle1 {
background: #32325f;
}
#circle2 {
background: white;
}
#circle3 {
background: #ef9d34;
}
#case {
display: none;
position: absolute;
top: 0px;
height: 100%;
width: 100%;
z-index: 99;
}
.stern1 {
background: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next">
<h1>next</h1>
</div>
<div id="prev">
<h1>prev</h1>
</div>

<!--page1-->
<div id="tcee1" class="t1 in1">
</div>
<div id="tstern1" class="t1" style="background:blue;">
</div>
<div id="tsky1" class="t1" style="background:black;">
</div>

<div id="tcee2" class="t2 in2">
</div>
<div id="tstern2" class="t2">
</div>
<div id="tsky2" class="t2">
</div>

<div id="tcee3" class="t3 in3">
<ul>
<li>
<div id="circle1">
</div>
</li>
<li>
<div id="circle2">
</div>
</li>
<li>
<div id="circle3">
</div>
</li>
</ul>
</div>
<!--page2-->
<div id="tstern3" class="t3">
<ul>
<li>
<div id="circle1">

</div>

</li>
<li>
<div id="circle2">

</div>
< </li>
<li>
<div id="circle3">

</div>

</li>
</ul>
</div>
<!--page3-->
<div id="tcee3" class="t3">
<ul>
<li>
<div id="circle1">
</div>

</li>
<li>
<div id="circle2">

</div>
</li>
<li>
<div id="circle3">
</div>
</li>
</ul>
</div>





answer:The condition ($('.in1,.in2,.in3').next('.t1,.t2,.t3').len‌​gth) will be true also when (for example) .in2 has a t3 as next sibling, in which case you would need false. You should just test one of them, like this: ($('.in1').next('.t1').length). If you have more questions like this, could I suggest that you create a new question for it? That way you'll have more ppl looking at it, and there is also some reward for both you and those that answer. – trincot

Answer

When you add the class .in1 to the last .t1, the expression $('.in1,.in2,.in3').next('.t1,.t2,.t3') matches the first .t2, because it's the next element after the last .t1.

You can solve this by wrapping all the .t1 in a DIV, and similarly for all the .t2 and .t3, so that .next() won't jump between the groups.

$(document).ready(function() {

  $('#next').click(function() {
    if ($('.in1,.in2,.in3').next('.t1,.t2,.t3').length) {

      $('.t1').animate({
        left: '-1000px'
      })
      $('.in1').removeClass('in1')
        .next('.t1')
        .addClass('in1');


      $('.t2').animate({
        right: '-1000px'
      })
      $('.in2').removeClass('in2')
        .next('.t2')
        .addClass('in2');

      $('.t3').animate({
        bottom: '-1000px'
      })
      $('.in3').removeClass('in3')
        .next('.t3')
        .addClass('in3');

    }
  });

  $('#prev').click(function() {
    if ($('.in1,.in2,.in3').prev('.t1,.t2,.t3').length) {

      $('.t1').animate({
        left: '-1000px'
      })
      $('.in1').removeClass('in1')
        .prev('.t1')
        .addClass('in1');


      $('.t2').animate({
        right: '-1000px'
      })
      $('.in2').removeClass('in2')
        .prev('.t2')
        .addClass('in2');

      $('.t3').animate({
        bottom: '-1000px'
      })
      $('.in3').removeClass('in3')
        .prev('.t3')
        .addClass('in3');

    }
  });

});
html,
body,
section {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#next,
#prev {
  position: fixed;
  z-index: 101;
}
#next {
  top: 0px;
  right: 0px;
}
#prev {
  left: 0px;
}
.t1 {
  float: left;
  height: 100%;
  width: 43%;
  background-color: #c92639;
  position: absolute;
  left: -1000px;
}
.t2 {
  background-color: white;
  position: absolute;
  right: 0px;
  top: -1000px;
}
.t3 {
  position: absolute;
  right: 0px;
  bottom: -1000px;
  background-color: #c8c8c8;
}
.out {
  -webkit-animation: forwards;
  -webkit-animation-name: out3;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: out3;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes out3 {
  from {
    bottom: 0px;
  }
  to {
    bottom: -1000px;
  }
}
/* Standard syntax */

@keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
.t2,
.t3 {
  height: 50%;
  width: 57%;
  margin-left: auto;
  margin-right: 0px;
}
.in1 {
  -webkit-animation: forwards;
  -webkit-animation-name: t1;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t1;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
/* Standard syntax */

@keyframes t1 {
  from {
    left: -1000px;
  }
  to {
    left: 0px;
  }
}
.in2 {
  -webkit-animation: forwards;
  -webkit-animation-name: t2;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t2;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t2 {
  from {
    top: -1000px;
  }
  to {
    top: 0px;
  }
}
/* Standard syntax */

@keyframes t2 {
  from {
    top: -1000px;
  }
  to {
    top: 0px;
  }
}
.in3 {
  -webkit-animation: forwards;
  -webkit-animation-name: t3;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation: forwards;
  animation-name: t3;
  animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes t3 {
  from {
    bottom: -1000px;
  }
  to {
    bottom: 0px;
  }
}
/* Standard syntax */

@keyframes t3 {
  from {
    bottom: -1000px;
  }
  to {
    bottom: 0px;
  }
}
#logo >h1 {
  color: white;
}
#logo >h3 {
  width: 58%;
  margin: 0 auto;
}
.t2 >img {
  margin-top: 11%;
}
#logo {
  margin-top: 40%;
}
.t3>ul {
  display: inline-table;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
.t3>ul>li {
  display: inline-table;
  width: 33%;
}
.t3>ul>li>div>img {
  width: 53%;
  margin-top: 25%;
}
#home {
  display: none !important;
}
#circle1,
#circle2,
#circle3 {
  border-radius: 128px;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  box-shadow: 10px 10px 5px #888888;
}
#circle1 {
  background: #32325f;
}
#circle2 {
  background: white;
}
#circle3 {
  background: #ef9d34;
}
#case {
  display: none;
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 99;
}
.stern1 {
  background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>

<!--page1-->
<div>
  <div id="tcee1" class="t1 in1">
  </div>
  <div id="tstern1" class="t1" style="background:blue;">
  </div>
  <div id="tsky1" class="t1" style="background:black;">
  </div>
</div>

<div>
  <div id="tcee2" class="t2 in2">
  </div>
  <div id="tstern2" class="t2">
  </div>
  <div id="tsky2" class="t2">
  </div>
</div>

<div>
  <div id="tcee3" class="t3 in3">
    <ul>
      <li>
        <div id="circle1">
        </div>
      </li>
      <li>
        <div id="circle2">
        </div>
      </li>
      <li>
        <div id="circle3">
        </div>
      </li>
    </ul>
  </div>
  <!--page2-->
  <div id="tstern3" class="t3">
    <ul>
      <li>
        <div id="circle1">

        </div>

      </li>
      <li>
        <div id="circle2">

        </div>
        < </li>
          <li>
            <div id="circle3">

            </div>

          </li>
    </ul>
  </div>
  <!--page3-->
  <div id="tcee3" class="t3">
    <ul>
      <li>
        <div id="circle1">
        </div>

      </li>
      <li>
        <div id="circle2">

        </div>
      </li>
      <li>
        <div id="circle3">
        </div>
      </li>
    </ul>
  </div>
</div>

Comments