CODEWITHSUNDEEP
jqueryscrolltop
Gregory Schultz
Gregory Schultz

Reputation: 844

How to scrollup when a div has a programmerly added class

I'm having problems with my code. When you click on next, it does calculations and adds a class scrollup (in this example, it's the first three posts). When you click previous, it's suppose to scroll up if a div has a class .scrollup. When clicking previous it does not scroll up, even if the item has .scrollup.

Example HTML:

<button id="prev-item">Previous</button>
<button id="next-item">Next</button>
<div class="main">
  <div class="item first"><div class="current">item 1</div></div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
</div>

JS: 

$("#next-item").on("click", function () {
    var curr = $('.main .current').parent(); //find .current's parent
    var $children = $('.main').children();
    var firstcal = $children.length;
    var actual = firstcal - 7
    $children.each(function (i) {
        if (i < actual) {
            $(this).addClass('scrollup')
        }
    });
    if (curr.next().length > 0) {
        $('.main').animate({scrollTop: '+=35px'}, 400);
        curr.children('.current').contents().unwrap(); // remove .current
        curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
    }
});

$("#prev-item").on("click", function () {
    if (!$(this).hasClass("first")) {
        var curr = $('.main .current').parent(); //find .current's parent
        if (curr.next().length > 0) {
            if ($(this).hasClass("scrollup")) {
                $('.main').animate({scrollTop: '-=35px'}, 400);
            }
            curr.children('.current').contents().unwrap(); // remove .current
            curr.prev().wrapInner('<div class="current"></div>'); // add it to the next element
        }
    }
});

JS Fiddle: https://jsfiddle.net/openbayou/425Leuq6/

Upvotes: 2

Views: 1198

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

The problem is: $(this) needs to be curr in some positions in your code

  • if ($(this).hasClass("scrollup")){ .. $(this) in your line of code here refer to the #prev-item button and the previous button doesn't have scrollup class .. the scrollup class is for item/parent element of the current class element.. so with $(this) the if statement will not work .It needs to be curr.hasClass("scrollup")
  • Also the same thing in !$(this).hasClass("first") should be !curr.hasClass("first") And use var curr line before the if statement .. see the code below

$("#next-item").on("click", function(){
  var curr = $('.main .current').parent(); //find .current's parent
  var $children = $('.main').children();
    var firstcal = $children.length;
    var actual = firstcal - 7
    $children.each(function (i) {
      if (i < actual) {
        $(this).addClass('scrollup')
      }
    });
  if (curr.next().length > 0) { 
    $('.main').animate({scrollTop: '+=35px'}, 400);
    curr.children('.current').contents().unwrap(); // remove .current
    curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
  }
});
$("#prev-item").on("click", function(){
  /* HERE >>*/ var curr = $('.main .current').parent(); //find .current's parent
  /* HERE >>*/if (!curr.hasClass("first")) {
     if (curr.next().length > 0) { 
      /* HERE >>*/ if (curr.hasClass("scrollup")){
        $('.main').animate({scrollTop: '-=35px'}, 400);
      }
      curr.children('.current').contents().unwrap(); // remove .current
      curr.prev().wrapInner('<div class="current"></div>'); // add it to the next element
    }
  }
});
.current { color: red; }
.item { padding: 7px; }
.main { height: 265px; overflow: auto; }
.scrollup { border-left: 5px solid blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="prev-item">Previous</button>
<button id="next-item">Next</button>
<div class="main">
  <div class="item first"><div class="current">item 1</div></div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
</div>

Looking for /* HERE >>*/ commented in the code to know which lines changed

Upvotes: 1

Related Questions