title: Change element attribute when window resized (using WordPress)
body: <p>I am very new to this and might be a newbie question with a so simple solution, but it is giving me a lot of headache.</p>
  
  <p>I am making a WordPress site. Need to change a header image depending on a window width. Tried so many combinations that I found online, but none of them works. No idea if I should be using JS or Jquery.</p>
  
  <p>This is what I got:</p>
  
  <p>In my "header.php" file i have this:</p>
  
  <pre><code>&lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;" alt="&lt;?php bloginfo('name'); echo " - "; bloginfo('description');?&gt;" id="logo" /&gt;
  </code></pre>
  
  <p>In my "functions.php" file i have this:</p>
  
  <pre><code>wp_enqueue_script( 'osmpg-logo', get_template_directory_uri() . '/js/logo.js', array(), '20150329', true );
  </code></pre>
  
  <p>This is the problem. This is my "logo.php" file:</p>
  
  <pre><code>$(document).ready(function($){
  
      $(window).resize(function() {
          var logo = $('logo');
          logo.attr('src') += '/images/logo.png';
          var windowsize = $(document).width();
          if ((windowsize) &lt;= 800){
              logo.attr('src') = str.replace("logo", "logo1");
          }
      }
  
  });
  </code></pre>
  
  <p>I know that the script does execute. I see it when I use debugging tools in browser. It just has no effect on my image. It is always only the result of "get_template_directory_uri();"</p>
  
  <p>What I want is to add '/images/logo.png' for 800+ width, or '/images/logo1.png' for 799+ width, after the result of get_template_directory_uri(); template tag.</p>
  
  <p>EDIT:
  Now I have this 'error free' code. Now I need to make it do what I need to do.</p>
  
  <pre><code>jQuery(document).ready(function($){
  
      // cache the element outside rezise handler, so that the DOM isn't searched on every resize:
      var $logo = $('#logo');
  
      $(window).resize(function() {
          //declare current value of the src attribute:
          var $src = $logo.attr('src');
          //declare current window size:
          var windowsize = $(document).width();
          //check current window size and src attribute:
          if ((windowsize) &gt;= 800 &amp;&amp; $src !== '/images/logo.png'){
              //set new src value:
              $logo.attr($src, '/images/logo.png');
          //check current window size and src attribute again:
          }else if((windowsize) &lt; 800 &amp;&amp; src !== '/images/logo1.png'){
              //set new src value:
              $logo.attr($src, '/images/logo1.png');
          }
      });
  
      // update logo when page is displayed:
      $(window).trigger('resize');
  
  });
  </code></pre>
  
  <p>EDIT 2:
  This code works, but only in IE. In Chrome, breaking point is 818px and not 801px. Any ideas? Maybe document.width includes browser scrollbar?</p>
  
  <pre><code>jQuery(document).ready(function($){
  
      var logo = $('#logo');
  
      $(window).resize(function() {
  
          var src = logo.attr('src');
  
          var logo_prefix = src.replace('/images/logo.png', '');
          logo_prefix = logo_prefix.replace('/images/logo1.png', '');
  
          var logo0 = logo_prefix + '/images/logo.png';
          var logo1 = logo_prefix + '/images/logo1.png';
  
          var windowsize = $(document).width();
  
          if ((windowsize) &gt; 800 &amp;&amp; src !== logo0){
  
              logo.attr('src', logo0);
  
          }else if((windowsize) &lt;= 800 &amp;&amp; src !== logo1){
  
              logo.attr('src', logo1);
          }
      });
  
      $(window).trigger('resize');
  
  });
  </code></pre>