Hello and welcome to our community! Is this your first visit?
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
    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
    <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>
    		<!-- 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 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>
    	        <!-- end About blocks -->
    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
    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);
            "left": leftPos,
            "top": topPos
        }, 1200, AnimateIt);
    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.

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

  2. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,947 Times in 4,908 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.
    Be yourself. No one else is as qualified.


Posting Permissions

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