Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Avoiding divs

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    164
    Thanks
    75
    Thanked 1 Time in 1 Post

    Avoiding divs

    Hi, Just have a little problem I am trying to resolve. I have a simple block of code with different containers
    Code:
    <div id="about" class="section relative-container">
    	<div class="container">
            <div class="square"></div>
            <div class="square1"></div>
            <div class="square2"></div>
    
    		<!-- heading -->
    		<div class="row">
    			<div class="section-heading text-center" data-animated="fadeInDown">
    				<h1 class="title">Next Event: <span>Ellen // Bob </span></h1>
                    <p class="subtitle"><i class="fa fa-download" class="icon-download"></i>Location:Golf Club</p>
    			</div>
    		</div>
    		<!-- end heading -->
    
    		<!-- About blocks -->
    		<div class="row">
    			<div class="col-md-8 about-block about-block-img">
    				<img src="next-event.jpg" width="100%" alt="Next event">
    			</div>
    			<div class="col-md-4 about-block" id="tickets-content">
                    <a href="#tickets-block"><i class="fa fa-ticket"></i><h3 id="tickets">Buy Tickets</h3></a>
    			</div>
    		</div>
    	        <!-- end About blocks -->
    
    	</div>
    </div>
    The divs I am interested in for now are square, square1 and square2. Using css I just make these divs look like squares. I now use some javascript to move them about their container
    Code:
    function AnimateSquare() {
        var theDiv = $(".square"),
            theContainer = $("#about"),
            maxLeft = theContainer.width() - theDiv.width(),
            maxTop = theContainer.height() - theDiv.height(),
            leftPos = Math.floor(Math.random() * maxLeft),
            topPos = Math.floor(Math.random() * maxTop);
    
        theDiv.animate({
            "left": leftPos,
            "top": topPos
        }, 1200, AnimateIt);
    }
     AnimateSquare();
    My question is I am after just natural movement of the square. At the moment, when it goes past another div which contains information e.g. About block, the square goes behind this div and then comes out the other side. Is there anyway to make the square bounce of this div instead and continue its narural movement? My aim is to make the square animate within the main container, but bounce of any objects within that container rather than go behind them.

    Cheers
    Last edited by nick2price; 08-16-2014 at 04:12 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    Only by using programming logic.

    For example, if square1 is moving right, then you want to check to see if its right-side edge hits any other object's left-side edge.

    So assuming that you know that square1 is at position (top=120px, left=390px) and you know that square1 is 200px wide, then you would need to check to see if the left edge of any OTHER object is at 590px. If so, start square1 moving left, instead of right.

    And now, of course, you will be looking to see if the left edge of square1 matches the right side of any object.

    Note that, at the same time, you need to be checking to see if square1 hits the bounds of its container. So, while moving right, you look for its right edge to match the right edge of the container. Animation is tedious. But you can write a function or two to the make it much easier.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •