Jquery, remove created div if outside screen width

Question

I got this function which adds a div each second. it then moves across the screen, and I'd like for it to remove the divs once they're outside the screen. Is it possible to "attach" such a timer to the divs as I create them?

   function deployRandom(){     
        $(".bottomEvents").append("<div class='floatingDiv'>hello world</div>")
        $(".floatingDiv").animate({ 
            marginLeft: "+=250px",
        }, 1000 );      
    }

Roman Romanovsky · Accepted Answer · 2015-10-12 00:06:10Z

2

The main idea is that: You must know if your div get out of the range("out of window size").

First you must know window width:

$(window).width();

than you must know your div position to the left

currentDiv.position().left + currentDiv.width()

and than if your div out of range you must hide it.

Here small example: https://jsfiddle.net/RomanGroovyDev/pyzuLtzd/3/

answered Oct 12, 2015 at 0:06

Roman Romanovsky

5785 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan De Paz Centeno · Accepted Answer · 2015-10-12 00:05:22Z

You can append every created div to an array and check for theirs position with a unique dispatcher timer:

var divsArray = [];

function clearOutsideDivs()
{
    var newDivsArray = [];

    for (var i=0; i<divsArray.length; ++i)
    {
        var currentDiv = divsArray[i];
        var currentDivMarginLeft = parseInt(currentDiv.css('margin-left'), 10);

        if (currentDivMarginLeft > $(window).width())
            currentDiv.remove();
        else
            newDivsArray.push(currentDiv);
    }

    divsArray = newDivsArray;
}

function deployRandom(){
    var generatedDiv = $("<div class='floatingDiv'>hello world</div>");
    $(".bottomEvents").append(generatedDiv);
    divsArray.push(generatedDiv);

    $(".floatingDiv").animate({ 
        marginLeft: "+=250px",
    }, 1000, clearOutsideDivs);   
}

jsFiddle example here.

Sorry for the late response. Incredible answer, and very appreciated. Works perfectly :)

Collectives™ on Stack Overflow

Jquery, remove created div if outside screen width

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related