title: change href depending on window size
body: <p>I have button for which I need href value depending upon window width. href value should be updated when page load as well as on window resize.</p>
  
  <p><strong><a href="http://jsbin.com/lafawusi/1/edit" rel="nofollow">jsbin</a></strong></p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;a href="http://google.com" class="myButton js-button"&gt;Google&lt;/a&gt;
  </code></pre>
  
  <p><strong>jQuery</strong>   </p>
  
  <pre><code> $(function(){
  
        function mobileButtonLink(){
  
            var mobLoginLink = 'https://mobile.google.com',          
                $loginButton = $('.js-button'),                    
                storedLoginLink = $loginButton.attr('href'),          
                winwidth = $(window).width();    
  
          if (winwidth &lt; 600) {
            $loginButton.attr('href', mobLoginLink);
            console.log(mobLoginLink);
          }else{
            console.log(storedLoginLink);
            $loginButton.attr('href', storedLoginLink); 
  
          } 
        } 
  
        mobileButtonLink();
  
        $(window).resize(mobileButtonLink);
  
  
      });
  </code></pre>
  
  <p>in greater than 600 its not getting updated by old href value if page is loaded in below 600 viewport. Is there any better way to achieve this by using revealing pattern etc. </p>