Resize script appends object, does it over and over again
<p>I have the following code in a JavaScript file:</p>

<pre><code>$(document).ready(function() {
    detectscreen();
});

$(window).resize(function(){
        detectscreen();
    });

    function windowWidth() {
        if(!window.innerWidth) {
         // user is being a git, using ie
         return document.documentElement.clientWidth;
        } else {
         return window.innerWidth;
    }}

    function detectscreen() {
        if (windowWidth()&gt;1280) {
         $('body').append('&lt;div id="gearsfloat"&gt;&lt;/div&gt;');
    }}
</code></pre>

<p>Basically, what it does is append an object to the end of the document if the width is less than 1280 pixels, however what this does is append it every single time the page is resized.</p>

<p>I don't think I can use the <code>once</code> function because it would only run it once and then the next time it is resized, it's dead. Anything I can do?</p>

<p>&nbsp;</p>

<p><i>NOTE</i>: I, in fact, DO want it to be checked on the resize of the page, but the effect is that it happens over and over again.</p>

<pre><code>if (windowWidth()&gt;1280 &amp;&amp; !$('gearsfloat')) {
  $('body').append('&lt;div id="gearsfloat"&gt;&lt;/div&gt;');
}
</code></pre>

<p>The above (by Jason) <s>works</s> does <i>not</i> work but then it won't delete it when it gets less than 1280. Is there anything I can do?</p>
