Check if a div touches another div

Question

I've made margin of 2 divs move (using variable and variable++ or -- with style attribute in js to change margin) Like that:

<!DOCTYPE html>

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset="utf-8" />
        <title>Game</title>
        <style>
            body{
                position: absolute;
                background: #f00;
            }
            .point{
                position: absolute;
                width: 15px;
                height: 15px;
                background: #fff;
                border-radius: 10px;
                margin: 0px 0 0;
            }
            .player{
                position: absolute;
                text-align: center;
                width: 200px;
                height: 20px;
                background: #0005ff;
                margin: 550px 550px 0px;
            }
        </style>
        <script>
            var num = 550;
            $(document).keydown(function (event) {
                switch (event.keyCode) {
                    // Left Arrow              
                    case 37: num = num-- - 15;
                        document.getElementById('player').style.margin = '550px ' + num + 'px 0px';
                        break;
                    // Right Arrow              
                    case 39: num = 15 + num++;
                        document.getElementById('player').style.margin = '550px ' + num + 'px 0px';
                        break;
                }
            });
            var nump = 0;
            $(document).load(function () {
                nump++;
                document.getElementById('point').style.margin = nump + 'px 0px 0px';
            });
        </script>
    </head>
    <body>
        <div class="point" id="point"></div>
        <div class="player" id="player"></div>
    </body>
</html>

Now I got problem about moving div named point.The div, point is not moving when I use $(document).load but the other div works. How can I fix that?

My second question is how can i check when div "point" touch div "player" then i'll return div point to the start and make a loop.

have a look at this post: http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery — Roshan, Jun 17 '13 at 08:51
try `$(window).load` but your code above will only move `point` by 1px — Pete, Jun 17 '13 at 09:38

Shinov T · Accepted Answer · 2013-06-19T04:23:09.853

try this to move the point

var nump = 0;
        var touch = false;
        var flagtouch;
        $(document).ready(function () {
        flagtouch = setInterval(function(){
            movePoint(nump);
        },1000);        
        });
        function  movePoint()
        {
            document.getElementById('point').style.margin = nump + 'px 0px 0px';
            touch = chekTouch();   // check whether the divs touches and return true if touched
            if(touch)
            {
              clearInterval(flagtouch);
            }
            else
            {
            nump = nump+5;
            }
        }

I've figure out the move but now i still havn't succed to check when div touch another div. Can you help me with that? — copypaste, Jun 17 '13 at 09:53

score 0 · Answer 2 · answered Jun 17 '13 at 09:27

For the second question:

With http://api.jquery.com/position/, you can known the position of both divs, and as you know too the width and height of the elements, you can calculate the region occupied by each element, and then when the elements touch each other.

Check if a div touches another div

2 Answers2