jQuery stop custom function from working if width is a certain size

Question

How do I make the imagePopUp function stop executing if the screen goes smaller than 768px when resizing? Here is my code:

// Image pop up
function imagePopUp() {
  $('.pop-up-img').click(function () {
    var pizza_img = $(this).attr('src');
    var close_button = "<span class='close-img-btn' onClick='closeImage()'><i class='fas fa-times'></i></span>";
    var pop_up_dark_bg = "<div class='pop-up-bg-div' onClick='closeImage()'></div>";
    var shown_img = "<div class='shown-img-div'><img id='shown-img' class='img-fluid mx-auto d-block' src='"+pizza_img+"'></div>";
    $('body').append(close_button);
    $('body').append(pop_up_dark_bg);
    $('body').append(shown_img);
  });
};

function closeImage() {
  $('.pop-up-bg-div').remove();
  $('.shown-img-div').remove();
  $('.close-img-btn').remove();
};

$(document).ready(function() {
  if ($(window).width() > 768) {
    imagePopUp();
  }
});

I tried:

$(window).resize(function() {
  if ($(window).width() > 768) {
    imagePopUp();
  }
});

but the function doesn't start unless the screen is resized. Also it just keeps adding on the imagePopUp function every time the screen is resized, so if you drag the screen to resize it, it starts running the function like 20 times.

What I want and imagine should look like is something like this:

$(document).ready(function() {
  if ($(window).width() > 768) {
    on loading the page, check the width and run the function once if its more than 768px width
  }
});



$(window).resize(function() {
  if ($(window).width() > 768) {
    run the function only once if it wasnt running already.
  } else {
    when the screen goes smaller than 768, stop the function from running completely
});

Right now I just "fixed" the problem by adding css display: none with @media to everything when the width is less than 768px. It still runs the code and adds the divs and images to the html after resizing but it just doesnt show them.

EDIT:

Thank you. I solved my problem. It's probably not the best way to do it but it works as intended. Here is the code if anyone else will need something similar in the future:

var running = false;

function imagePopUp() {
    running = true;
    $('.pop-up-img').click(function () {
      var pizza_img = $(this).attr('src');
      var close_button = "<span class='close-img-btn' onClick='closeImage()'><i class='fas fa-times'></i></span>";
      var pop_up_dark_bg = "<div class='pop-up-bg-div' onClick='closeImage()'></div>";
      var shown_img = "<div class='shown-img-div'><img id='shown-img' class='img-fluid mx-auto d-block' src='"+pizza_img+"'></div>";
      $('body').append(close_button);
      $('body').append(pop_up_dark_bg);
      $('body').append(shown_img);
    });
};

function closeImage() {
  $('.pop-up-bg-div').remove();
  $('.shown-img-div').remove();
  $('.close-img-btn').remove();
};

$(document).ready(function() {
  if ($(window).width() > 768 && running == false) {
    imagePopUp();
  }
});

$(window).resize(function () {
  if ($(window).width() < 768) {
    $(".pop-up-img").unbind();
    running = false;
  }
  else if ($(window).width() > 768 && running == false) {
    imagePopUp();
  }
});

As suggested I added the variable "running = false". To make the function stop from working I used "unbind". So when the screen becomes < 768px width when resizing, the event doesn't work anymore and the variable "running" goes from "true" to "false" again. That was needed so when the screen goes back to > 768px, the function would only be added once, because after it is added the "running" variable becomes "true", so it doesn't fit the "else if" statement requirements anymore.

Possible duplicate of [In Bootstrap open Enlarge image in modal](https://stackoverflow.com/questions/25023199/in-bootstrap-open-enlarge-image-in-modal) — Julian Camilleri, Oct 05 '18 at 09:13

Julian Camilleri · Answer 1 · 2018-10-05T09:13:21.683

You can make use of the .on() function in order to fire an event once the window is resized or loaded.

Example of non working code:

var running = false;

function imagePopup() {
  running = true;
  do the rest here
}

$(window).on("load resize",function(e){
    if ($(window).width() > 768 && running == false) {
       imagePopup();
    }
});

Read more here about on() - that's one way of doing it, if you're showing an image, you can always use a css selector to see if its showing or not rather than a flag (true, false).

At the end of the day; I believe; what you want is called a modal image; you can see an example of how to do it here.

jQuery stop custom function from working if width is a certain size

1 Answers1