CODEWITHSUNDEEP
javascriptjquery
neorg
neorg

Reputation: 25

jQuery Run function only once on window resize

I have a function that i have to run only once if specific width is reached.

Function is used to transpose table (columns with rows) only on mobile

What I need:

1. ON LOAD
a. if width <992 run transposeTable (mobiles)
b. if width> 992 do nothing

2. ON RESIZE
a. if width <992 run transposeTable ONLY ONCE BUT if loaded page has a smaller width than 992px do nothing (see 1)
b. if width> 992 run transponseTable ONLY ONCE BUT if loaded page has a width greater than 992px to nothing (see 1)

here's solution (with some modifications) thanks to @Olaf Nankman 

var transposed = "desktop";
$(document).ready(function(){
    if($(window).width() < 992){
        transposed = "mobile"
        transposeTable();
    }else{
        transposed = "desktop"
    }
})
$(window).resize(function(){
    if($(window).width() < 992 && transposed != "mobile"){
        transposed = "mobile"
        transposeTable();
    }

    if($(window).width() > 992 && transposed != "desktop"){
        transposed = "desktop"
        transposeTable();
    }
})

Upvotes: 1

Views: 1583

Answers (2)

Zoran Velickovic
Zoran Velickovic

Reputation: 1

If this can help, work fine for my needs

var x;
$(window).resize(function() {
  if ($(this).width() <= 600 && (x === 2 || x === undefined)) {
    if(x !== undefined){
      //function here
      $("body").append('size: small<br/>');
    }
    x = 1;
  }
  else if ($(this).width() > 600 && $(this).width() <= 1140 && (x === 1 || x === 3 || x === undefined)){
    if(x !== undefined){
      //function here
      $("body").append('size: medium<br/>');
    }
    x = 2;
  }
  else if ($(this).width() > 1140 && (x === 2 || x === undefined)){
    if(x !== undefined){
      //function here
      $("body").append('size: large<br/>');
    }
    x = 3;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Samū
Samū

Reputation: 518

You must store that you've already called the transposeTable function, and you should transpose the table to desktop with another function... For example:

// Create 2 apart functions, one for mobile, one for desktop
function transposeTableMobile(){
    // Transpose to mobile
}
function transposeTableDesktop(){
    // Transpose to desktop
}

// Create a variable to check if already transposed
var transposed = "desktop";
$(document).ready(function(){
    // On page load
    // Transpose the table
    // Since this function runs only once,
    // we don't need to check if the table
    // is transposed
    if($(window).width() < 992){
        transposed = "mobile"
        transposeTableMobile();
    }else{
        transposed = "desktop"
        transposeTableDesktop();
    }
})
$(window).resize(function(){
    // On page resize
    // We check if the table is transposed to mobile,
    // if not, but should be, transpose it and store that
    // we transposed the table
    if($(window).width() < 992 && transposed != "mobile"){
        transposed = "mobile"
        transposeTableMobile();
    }else if(transposed != "desktop"){
        transposed = "desktop"
        transposeTableDesktop();
    }
})

Upvotes: 1

Related Questions