enable resizing the icon when clicking the maximaize or minimaize button in the browser

Question

I have written this code to resize the icon on resizing the browser. The code does not work when clicking the maximaize button or the minimaize button.

How can I enable invoking my displayWindowSize function when clicking the maximaize and minimaize button in the browser to resize the switch_ico icon?

<script>
    //window.onresize = displayWindowSize;
    //window.onload = displayWindowSize;

    $(window).resize(function()
     {   
      setTimeout(function() {
          displayWindowSize();
      }, 100);
    });

    function displayWindowSize() {
      var tpReportWidth = $("#tpReport").width();
      var iconWidth = $("#switch_icon").width();
      var newIconWidth = Math.round(tpReportWidth/49.6).toFixed(2)
      console.log('tpReportWidth: ' + tpReportWidth + " ,iconWidth: " + iconWidth + 'newIconWidth: ' + newIconWidth);
      $("#switch_icon").attr('height',newIconWidth);
      $("#switch_icon").attr('width',newIconWidth);
    };
</script>

Please write your htmls.I think ther should be an error in defining `tpReport` or `switch_icon` — Ali Sheikhpour, Jan 10 '18 at 11:40
What works for me this answer here. https://stackoverflow.com/questions/16824026/re-calculate-width-after-browser-resize. I had problem with the delay. I set the value to 200. I used the code of the answer in the link. — window, Jan 10 '18 at 14:47

score 0 · Answer 1 · answered Jan 09 '18 at 10:12

The resize events do definitely trigger in chrome/firefox.
A resize, maximize, unmaximize event will trigger the resize event.
A minimize (the one which hide the browser completely) will trigger a visibility change event.

Are you sure the problem isn't caused by something else?
the code below will increase a counter each them a resize/visibility change is triggered.

note that since the snippet is run in an iframe, you'll have to expand the snippet to full-page in order to see the events

//window.onresize = displayWindowSize;
//window.onload = displayWindowSize;

$(window).resize(function() {
  setTimeout(function() {
    displayWindowSize();
  }, 100);
});

var resizeCount=0;
function displayWindowSize(){
  $('.resize-count').text("resizes:" + ++resizeCount);

};


document.addEventListener("visibilitychange", function() {
  displayMinimize()
}, false);
var minimizeCount=0;
function displayMinimize(){
  $('.visibility-count').text("visibility:" + ++minimizeCount);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="resize-count">
resizes: none
</div>


<div class="visibility-count">
visibility: none
</div>

enable resizing the icon when clicking the maximaize or minimaize button in the browser

1 Answers1