Home/ Questions/Q 903817
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T15:56:57+00:00

How do I determine if the .circle elements in the code below are still

  • 0

How do I determine if the .circle elements in the code below are still “onscreen”? That is are they outside the visible area of the containing #wrapper element?

Here’s the code:

<html>
<style type="text/css">
    body {
        background-color: #000;
        margin: 2px;
        padding: 0;
    }
    #wrapper {
        background-color: #ccf;
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    .circle {
        background-color: #fff;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        -moz-border-radius: 40px;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .stopped {
        background-color: #ccc;
    }
</style>

<!-- And this script: -->

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function randomDirection(){
    var directions = ['+=','+=','+=','-='];
    var direction = directions[Math.floor(Math.random()*directions.length)]
    var amount = Math.floor(Math.random()*40); 
    var unit = 'px';
    return direction + amount + unit;
}
$(document).ready(function(){
    var again = function() {
        $('.circle:not(".stopped")').each(function(){
            $(this).animate({
                top: randomDirection(), left: randomDirection()
            }, 300);
        });
        setTimeout(again, 300);
    }
    for (var i=0; i< 50; i++) {
        $('.circle:first').clone().appendTo('#wrapper');
    }
    $('.circle').click(function(){
        $(this).addClass('stopped');
    });
    again();
});
</script>

<!-- and this body -->

<body><div id="wrapper"><div class="circle">&nbsp;</div></div></body>
</html>

Basically I want to add the .stopped class once the .circle element has left the visible area of the #wrapper element.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    something like

    $('.circle.runned').each(function(){
    if($(this).offset().left + $(this).width < $('#wraper').offset().left
        || $(this).offset().left > $('#wraper').width()
        || $(this).offset().top + $(this).height < $('#wraper').offset().top
        || $(this).offset().top > $('#wraper').height()
    ){
        $(this).removeClass('runned').addClass('stopped');
    }
});

    Update from artlung: I modified your code to match mine, and this works great, replacing what I have:

    var again = function() {
    // not_stopped = $('.circle:not(".stopped")');
    // $('#debug').text(not_stopped.length)
    $('.circle:not(".stopped")').each(function(){
        if ($(this).offset().left + $(this).width < $('#wrapper').offset().left
            || $(this).offset().left > $('#wrapper').width()
            || $(this).offset().top + $(this).height < $('#wrapper').offset().top
            || $(this).offset().top > $('#wrapper').height()
        ){
            $(this).addClass('stopped');
        } else {
            $(this).animate({
                top: randomDirection(), left: randomDirection()
            }, 300);
    }
    });
    setTimeout(again, 300);
    • 0