Question

I have the following code in a jQuery JavaScript document running on a page (THIS IS CURRENT):

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

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

gearsExists = false;

function detectscreen() {
    shouldExist = windowWidth() >= 1300;
    if (shouldExist != gearsExists) {
        if (shouldExist) {
                $('body').append('<div id="gearsfloat"><a href="#" id="clickGoTop"></a></div>');
                $('#clickGoTop').fadeTo(0,0);
                $('#clickGoTop').hover(function() {
                    $(this).stop().fadeTo(500,1);
                }, function() {
                    $(this).stop().fadeTo(500,0);
                });
        } else {
            $('#gearsfloat').remove();
            $('#clickGoTop').remove();
        }
        gearsExists = shouldExist;
    }
}

This code is from my previous question, branched here simply because I think it is related.

The problem here is that the beginning is fine: it is displayed. However, if the screen is resized to less than 1300, it disappears; still good.

Now I make the window again larger than 1300. Suddenly the gear element is doubled. Another screen squish and largen and BAM, there’s three now. Do this several times and it quickly adds up.

How can I stop this?

Answer 1

Haha! After a while, I decided to ignore everything said by everyone else for a while (sorry) and try to see if I could figure it out myself, and I did!

Thanks to SolutionYogi for all the help, but the code he gave me was out of my expertise; it was impossible to debug. My solution is not as pretty as his (if you can help optimize, please do), but it works:

function WinWidth() {
    // check width of content
    if(!window.innerWidth) {
        // you git, how dare you use ie
        return document.documentElement.clientWidth;
    } else {
        return window.innerWidth;
    }
};

function gearsAction() {
    if(WinWidth() >= 1300) {
        $('body').append(
            '<div id="gearsfloat"><a href="#" id="clickGoTop"></a></div>');

        $('#clickGoTop').fadeTo(0,0);

        $('#clickGoTop').hover(
            function() {$(this).stop().fadeTo(500,1);}, 
            function() {$(this).stop().fadeTo(500,0);});

    };
};

$(document).ready(function() {
    gearsAction();
});

$(window).resize(function() {
    $('#gearsfloat').remove();          
    gearsAction();
});