CODEWITHSUNDEEP
jqueryhtmlcss
FiveFour Xone
FiveFour Xone

Reputation: 5

how do i add a .resize function to the same .scroll function in jquery

How do i add a .resize function to the same .scroll function in jquery so that i can, when i scroll to a certain point on the page/at the bottom of the page it appears 2 divs on desktop and when on mobile when i scroll to a certain point/at the bottom of the page it appears one after another.

Since this is a very big website i'll paste only the js file if you want an idea go on the website and check out the js css and html under "Sources" in inspect element. i've placed in comments where i think the resize function would be

here's the website https://54x1.github.io/AniBuy/pages/indexv2.html

here's the js file

$(document).ready(function() {

  $('body').fadeIn(1000);
  var oncedone1 = false;
  var oncedone2 = false;
  var oncedone3 = false;
  var oncedone1v1 = false;
  var oncedone2v1 = false;
  var oncedone3v1 = false;
  var oncedone4v1 = false;

  $(document).ready(function() {

    $(window).scroll(function() {
      /*$(window).resize(function() {*/
      /*desktop > 768px*/
      if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone1 == false /*&& $(window).width() > 768*/ ) {
        $(".breakpoint").fadeIn(2500).css({
          "display": "grid"
        });
        $("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime, #home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").hide();
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone2 == false) {
          $("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime").fadeIn(2500).css({
            "display": "grid"
          });
          if ($(window).scrollTop() + $(window).height() > $(document).height() - 1 && oncedone3 == false) {
            $("#home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").fadeIn(2500).css({
              "display": "grid"
            });
            oncedone1 = true;
            oncedone2 = true;
            oncedone3 = true;
            //oncedone4 = true;
          }

        }
      }
      /*mobile / < 768px*/
      //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone1v1 == false /*&& $(window).width() < 768*/) {
      //$(".breakpoint").fadeIn(2500).css({ "display": "grid" });
      //$("#home-page-best-anime, .home-page-best-anime, #home-page-season-anime, .home-page-season-anime, #home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").hide();
      //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone2v1 == false) {
      //  $("#home-page-best-anime, .home-page-best-anime").fadeIn(2500).css({ "display": "grid" });
      //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone3v1 == false) {
      //  $("#home-page-season-anime, .home-page-season-anime").fadeIn(2500).css({ "display": "grid" });
      //if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && oncedone4v1 == false) {
      //  $("#home-page-genre-anime, #home-page-action-anime, .home-page-action-anime").fadeIn(2500).css({ "display": "grid" });
      //oncedone1v1 = true;
      //oncedone2v1 = true;
      //oncedone3v1 = true;
      //oncedone4v1 = true;
      //}
      //}
      // }
      //}
    });
  });
});

Upvotes: 0

Views: 47

Answers (2)

Steve Mulvihill
Steve Mulvihill

Reputation: 717

You can use the .on() method to attach multiple event handlers to an element.

$(document).on('resize scroll', function (e) {
  alert(e.type);
});

Then use e.type to get the event type that triggered the function.

Upvotes: 1

Evelijn
Evelijn

Reputation: 371

That is probably not something you want to do with jQuery, but with css. It's quite easily solved with media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Upvotes: 0

Related Questions