CODEWITHSUNDEEP
javascriptjquerydragendjs
Thomas
Thomas

Reputation: 39

height issue with Dragend JS

I am using Drangend JS (https://github.com/Stereobit/dragend) but I am having issues with setting the height to automatic.

I have two divs in the slide, one 200px the other 500px. The page uses the height of the tallest div (500px), but I want the height of the page to change to the height of div currently visible when swiped or clicked . If div one is visible, the page height should be 200px and if div 2 is visible, the page height should be 500px

<body>
 <div id="demo">
   <ul>
    <li class="first dragend-page" ></li>
    <li class="last dragend-page"></li>
  </ul>
</div>


 <ul class="nav">
   <li data-page="1" >1</li>
   <li data-page="2">2</li>
</ul>
</body>

Below is my code

 <script>

$(function() {
  $("#demo").dragend({
    afterInitialize: function() {
      this.container.style.visibility = "visible";
    },
    onSwipeEnd: function() {
      var first = this.pages[0],
          last = this.pages[this.pages.length - 1];

      $(".prev, .next").removeClass("deactivated");
      $(".nav li").removeClass("active");

      $(".nav li").eq(this.page).addClass("active");

    }
  });


  $(".nav").click(function() {
    var page = $(event.target).data("page");

    $("#demo").dragend({
      scrollToPage: page
    });

    $(event.target).addClass("active");

  })

});
</script>

Upvotes: 4

Views: 381

Answers (0)

Related Questions