title: detect browser size and apply css for every resolution
body: <p>I have this function that I use to apply some css to a menu when browser is resized or when the menu is rendering on different resolutions. 
  My problem is this, why the browser is not interpreting correctly my function? because when I resize my browser in full mode from half mode the browser interprets only <code>'800-1024'</code> resolution but if I do <code>ctrl+f5</code> in browser (clear all) interprets correctly my resolution so what is wrong in my function? </p>
  
  <pre><code>function renderMenuCorection(){
                  if ($('#containerHeader').exists()) {
                      var resizeObject = {
  
                          '0-640': '9px,2px,-3px,12px',
                          '640-800': '10px,2px,-5px,12px',
                          '800-1024': '10px,8px,-8px,15px',
                          '1024-1300': '12px,12px,-13px,11px',
                          '1300-2000': ',20px,-21px'
                      }
  
                      var win = $(window);
                      var win_width = win.width();
  
                      if (win_width &gt; 0 &amp;&amp; win_width &lt;= 640) {
                          var value = getValueByKey(resizeObject, '0-640');
                          modifayMenu(value);
                      }
                      else 
                          if (win_width &gt; 640 &amp;&amp; win_width &lt;= 800) {
                              var value = getValueByKey(resizeObject, '640-800');
                              modifayMenu(value);
                          }
                          else 
                              if (win_width &gt; 800 &amp;&amp; win_width &lt;= 1024) {
                                  var value = getValueByKey(resizeObject, '800-1024');
                                  modifayMenu(value);
                                  alert("I'm on: 800-1024 ," + win_width);
                              }
                              else 
                                  if (win_width &gt; 1024 &amp;&amp; win_width &lt;= 1300) {
                                      var value = getValueByKey(resizeObject, '1024-1300');
                                      modifayMenu(value);
                                      alert("I'm on: 1024-1300 ," + win_width);
                                  }
  
                                  else 
                                      if (win_width &gt; 1300 ) {
                                         var value = getValueByKey(resizeObject, '1300-2000');
                                          modifayMenu(value);
                                      }
                  }
              }
            function modifayMenu(value){
              var vals = value.split(',')
                  $('#containerHeader').find('.roundMenuLi').each(function(index, item){
                      $(item).find('a').css('font-size', vals[0]);
                      $(item).css('padding-right', vals[1]);
                      $(item).css('padding-left', vals[1]);
                      $(item).find('#secondUl').css('margin-left', vals[2]);
                      $(item).css('padding-bottom', vals[3]);
                });
  
              }
            function getValueByKey(obj, myKey){
  
                  $.each(obj, function(key, value){
  
                      if (key == myKey) {
                          returnValue = value;
                      }
                  });
                  return returnValue;
              }
  </code></pre>
  
  <p>Thank you !</p>