title: Display different content if window size is below a certain size?
body: <p>I asked this question earlier but wasn't as clear as I should be. Basically I wish to change HTML content (that contains external javascript - see below) depending on windows size/screen res. The question is now changed to better reflect what I need to do. Also I would like this to be done via an external javascript file if possilbe.</p>
  
  <p>I have this code that displays all vertical buttons for sharing my content however I want to display horizontal buttons if the user is using a smaller window size. It will have a different div and some of the code wil be changed i.e. "data-count="horizontal".</p>
  
  <p>It would be awesome to also do this via my external JS file so it is not inline.</p>
  
  <p>But that is not essential.</p>
  
  <p>Thanks in advance.</p>
  
  <p>Also using fluid width CSS is not an option due to my having a sidebar with ads that can't be changed in size and that the html content needs changed - not just CSS.</p>
  
  <pre><code>&lt;div id="sharepost"&gt;
      &lt;div class="sharer"&gt;
          &lt;a href="http://twitter.com/share" class="twitter-share-button" data-url="&lt;?php the_permalink(); ?&gt;" data-text="&lt;?php the_title(); ?&gt;" data-count="vertical" data-via="code_love" data-related="love:code"&gt;Tweet&lt;/a&gt;
          &lt;script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;
      &lt;/div&gt;
      &lt;div class="sharer"&gt;
          &lt;a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=&lt;?php the_permalink(); ?&gt;&amp;t=&lt;?php the_title(); ?&gt;"&gt;Share&lt;/a&gt;
          &lt;script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"&gt;&lt;/script&gt;
      &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="sharer"&gt;
          &lt;a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="&lt;?php the_permalink(); ?&gt;"&gt;&lt;/a&gt;
          &lt;script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"&gt;&lt;/script&gt;
      &lt;/div&gt;
      &lt;div class="sharer"&gt;
          &lt;script src="http://www.stumbleupon.com/hostedbadge.php?s=3"&gt;&lt;/script&gt;
      &lt;/div&gt;
      &lt;span class="st_email" &gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>An example of what needs to be done but this doesn't work.</p>
  
  <pre><code>   function shareStuff() {
  
  if ($(window).width() &lt; 1024) {
     &lt;div id="sharepost"&gt;&lt;div class="sharer"&gt;&lt;a href="http://twitter.com/share" class="twitter-share-button" data-url="&lt;?php the_permalink(); ?&gt;" data-text="&lt;?php the_title(); ?&gt;" data-count="vertical" data-via="code_love" data-related="love:code"&gt;Tweet&lt;/a&gt;&lt;script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;&lt;/div&gt;
  &lt;div class="sharer"&gt;&lt;a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=&lt;?php the_permalink(); ?&gt;&amp;t=&lt;?php the_title(); ?&gt;"&gt;Share&lt;/a&gt;&lt;script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"&gt;&lt;/script&gt;&lt;/span&gt;
  &lt;/div&gt;&lt;div class="sharer"&gt;&lt;a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="&lt;?php the_permalink(); ?&gt;"&gt;&lt;/a&gt;&lt;script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"&gt;&lt;/script&gt;&lt;/div&gt;&lt;div class="sharer"&gt;&lt;script src="http://www.stumbleupon.com/hostedbadge.php?s=3"&gt;&lt;/script&gt;&lt;/div&gt;&lt;span class="st_email" &gt;&lt;/span&gt;
  &lt;/div&gt;
  
  } else {
    &lt;div id="sharepost"&gt;&lt;div class="sharer"&gt;&lt;a href="http://twitter.com/share" class="twitter-share-button" data-url="&lt;?php the_permalink(); ?&gt;" data-text="&lt;?php the_title(); ?&gt;" data-count="horizontal" data-via="code_love" data-related="love:code"&gt;Tweet&lt;/a&gt;&lt;script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;&lt;/div&gt;
  &lt;div class="sharer"&gt;&lt;a name="fb_share" type="horizontalk" href="http://www.facebook.com/sharer.php?u=&lt;?php the_permalink(); ?&gt;&amp;t=&lt;?php the_title(); ?&gt;"&gt;Share&lt;/a&gt;&lt;script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"&gt;&lt;/script&gt;&lt;/span&gt;
  &lt;/div&gt;&lt;div class="sharer"&gt;&lt;a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="&lt;?php the_permalink(); ?&gt;"&gt;&lt;/a&gt;&lt;script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"&gt;&lt;/script&gt;&lt;/div&gt;&lt;div class="sharer"&gt;&lt;script src="http://www.stumbleupon.com/hostedbadge.php?s=3"&gt;&lt;/script&gt;&lt;/div&gt;&lt;span class="st_email" &gt;&lt;/span&gt;
  &lt;/div&gt;
  } }
  </code></pre>