OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How To Cancel / Delete a Function (when changing screen size) - Jquery

  • Thread starter Thread starter Justin
  • Start date Start date
J

Justin

Guest
How do you cancel / delete a function, dependant on the screen size? Currently, my functions carry over from portrait to landscape (and vice versa) .
So is it possible to delete/cancel a function? And if not what else should I do?

Jsfiddle for demo & more explanation: https://jsfiddle.net/tmcoqLgu/67/

Jquery Code:

Code:
  var width = [0, 575];
  var height = [0, 575];

  function ScreenTrigger() {
    if (window.innerWidth >= width[0] && window.innerWidth < width[1]) {
      $('.display').addClass("portrait");
      $('.display').removeClass("landscape");
      if ($('.display').hasClass("portrait")) {

        // This function will carry over to both screen sizes once you resize the screen.
        $("#btn").click(function() {
          alert("This is an alert message!");
        });

      };
    } else if (window.innerHeight >= height[0] && window.innerHeight < height[1]) {
      $('.display').addClass("landscape");
      $('.display').removeClass("portrait");
      if ($('.display').hasClass("landscape")) {
        //
        /* 

            Delete Alert Function Here

        */
        //
      };
    } else {
      $('.display').removeClass("landscape");
      $('.display').removeClass("portrait");
    }
  };
  window.onresize = ScreenTrigger;
  ScreenTrigger();

Adding double functions in both screen sizes (the same function, but with different content to counter act eachother), doesn't work for me because the DIV that I'm targetting is used different in both screens sizes.

Using if ($('.display').hasClass("portrait")) to wrap around the functions, to cancel 1 or the other, doesn't work either.
<p>How do you cancel / delete a function, dependant on the screen size?
Currently, my functions carry over from portrait to landscape (and vice versa)
.<br />
So is it possible to delete/cancel a function? And if not what else should I do?</p>
<p>Jsfiddle for demo & more explanation: <a href="https://jsfiddle.net/tmcoqLgu/67/" rel="nofollow noreferrer">https://jsfiddle.net/tmcoqLgu/67/</a></p>
<p>Jquery Code:</p>
<pre><code> var width = [0, 575];
var height = [0, 575];

function ScreenTrigger() {
if (window.innerWidth >= width[0] && window.innerWidth < width[1]) {
$('.display').addClass("portrait");
$('.display').removeClass("landscape");
if ($('.display').hasClass("portrait")) {

// This function will carry over to both screen sizes once you resize the screen.
$("#btn").click(function() {
alert("This is an alert message!");
});

};
} else if (window.innerHeight >= height[0] && window.innerHeight < height[1]) {
$('.display').addClass("landscape");
$('.display').removeClass("portrait");
if ($('.display').hasClass("landscape")) {
//
/*

Delete Alert Function Here

*/
//
};
} else {
$('.display').removeClass("landscape");
$('.display').removeClass("portrait");
}
};
window.onresize = ScreenTrigger;
ScreenTrigger();
</code></pre>
<p>Adding double functions in both screen sizes (the same function, but with different content to counter act eachother), doesn't work for me because the DIV that I'm targetting is used different in both screens sizes.</p>
<p>Using <code>if ($('.display').hasClass("portrait"))</code> to wrap around the functions, to cancel 1 or the other, doesn't work either.</p>
Continue reading...
 
Top