title: Load script if screen wide enough AND if parent div is in view
body: <p>I have a twitter feed I currently display on my website when the viewport is 1250px or wider. So when the screen is wide enough, it calls in some content (which calls the javaScript file for the twitter feed. </p>
  
  <p>My current code is this...</p>
  
  <pre><code>function checkSize(){
      if ($(window).width() &gt; 1250) {
          $(".tweet").load("/ajax/");
      }
  }
  
  checkSize();
  
  $(window).resize(function() {
      checkSize();
  });
  </code></pre>
  
  <p>Now this works fine, however as the twitter script is near the bottom of the page, how can I  only load the script when the div appears in user view?</p>
  
  <p>I have tried something like this however it does not work</p>
  
  <pre><code>function checkSize(){
      if ($(window).width() &gt; 1250 &amp;&amp; $(".tweet").is(':visible'))  {
          $(".tweet").load("/ajax/");
      }
  }
  </code></pre>
  
  <p>So to confirm, I want to only call in this content when the screen width is 1250px or wider AND when the user is at the bottom of the page so the parent div is visible (.tweet).</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>I have added a codepen to test with here <a href="http://codepen.io/anon/pen/ezksD" rel="nofollow">http://codepen.io/anon/pen/ezksD</a></p>