CODEWITHSUNDEEP
javascriptjqueryresponsive-designresize
fred
fred

Reputation: 485

execute js code on window resize breakpoint

I have some js code that I would like to run only when the window is at a "large" screen size, let's say 900px. I want to use it like a media query in css, so the code can toggle on and off at a specific break point. So I'm assuming I need some sort of condition with the resize function like this:

$(window).resize(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 900) {

    }
});

And then put the code I want to execute between the curly brackets, but its not working.

This is the code that I would like to execute when the screen is resized to 900px:

   function makeRowDiv(buildRow) {
      var row = document.createElement('div');
      row.className = 'row expanded row-spacing';
      for (var i = 0; i < buildRow.length; ++i) { 
        row.appendChild(buildRow[i]);
      } 
      return row;
    }

    window.onload = function () {
      var work = document.getElementById('work'),
          items = work.getElementsByTagName('div'),
          newWork = document.createElement('div');
      var buildRow = [],
          count = 0;
      for (var i = 0; i < items.length; ++i) {
        var item = items[i];
        if (item.className.indexOf('columns') == -1) {
          continue;
        }
        // Extract the desired value.
        var matches = /large-(\d+)\s* large-offset-(\d+)/.exec(item.className),
            delta = parseInt(matches[1], 10) + parseInt(matches[2], 10);
        if (count + delta > 12 && buildRow.length != 0) {
          newWork.appendChild(makeRowDiv(buildRow));
          count = 0;
          buildRow = [];
        }
        buildRow.push(item.cloneNode(true));
        count += delta;
      } 
      if (buildRow.length != 0) {
        newWork.appendChild(makeRowDiv(buildRow));
      } 

      // Replace work with newWork.
      work.parentNode.insertBefore(newWork, work);
      work.parentNode.removeChild(work);
      newWork.id = 'work';
    };

I'm assuming that its possible to so with the

Upvotes: 2

Views: 3678

Answers (3)

azs06
azs06

Reputation: 3517

You could do something like this

function makeRowDiv(buildRow) {
      var row = document.createElement('div');
      row.className = 'row expanded row-spacing';
      for (var i = 0; i < buildRow.length; ++i) { 
        row.appendChild(buildRow[i]);
      } 
      return row;
    }
function loadData() {
      var work = document.getElementById('work'),
          items = work.getElementsByTagName('div'),
          newWork = document.createElement('div');
      var buildRow = [],
          count = 0;
      for (var i = 0; i < items.length; ++i) {
        var item = items[i];
        if (item.className.indexOf('columns') == -1) {
          continue;
        }
        // Extract the desired value.
        var matches = /large-(\d+)\s* large-offset-(\d+)/.exec(item.className),
            delta = parseInt(matches[1], 10) + parseInt(matches[2], 10);
        if (count + delta > 12 && buildRow.length != 0) {
          newWork.appendChild(makeRowDiv(buildRow));
          count = 0;
          buildRow = [];
        }
        buildRow.push(item.cloneNode(true));
        count += delta;
      } 
      if (buildRow.length != 0) {
        newWork.appendChild(makeRowDiv(buildRow));
      } 

      // Replace work with newWork.
      work.parentNode.insertBefore(newWork, work);
      work.parentNode.removeChild(work);
      newWork.id = 'work';
    };
  window.onload = loadData;

  window.onresize = function(){
	  if(window.innerWidth < 900){
        loadData();
        makeRowDiv(buildRow)
      }
  }

Assuming you want to call the function that you added on window.onload for window resize event also.

Upvotes: 1

z1haze
z1haze

Reputation: 440

you can use a media query in javascript as well and use that as your condition

var mq = window.matchMedia( "(max-width: 900px)" );
if (mq.matches) {
  // window width is less than 900px
} else {
  // window width is more than 900px
}

Upvotes: 6

Idoshin
Idoshin

Reputation: 361

Try this:

	$(window).on('resize',function () {
      var $width = $(window).width();
      console.log($width);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Related Questions