How to reverse direction of moving div once it reaches side of screen?


Tags: javascript,jquery,css

Problem :

I have an absolutely positioned div that uses the jQuery .animate function to move horizontally from the right to left of the screen. My problem is that once the div reaches the far left side, it continues and eventually disappears from the screen. How do you make it so that once the div reaches the left side, it will reverse and start going to the right? (and then vice versa so that the right side won't continue going right, but goes left again once it reaches the end)

HTML:

<div class="container">
    <div class="block"></div>
</div>

CSS:

.block {
    float:right;
    position:absolute;
    right:100px;
    width:100px;
    height:100px;
    background:red;
}

jQuery:

$('.block').click(function() {
    $(this).animate(
        {"right": "+=100px"},"slow");
});

Here is my JSFiddle: https://jsfiddle.net/ebkc9dzL/

Thank you I really appreciate the help!



Solution :

Working fiddle: https://jsfiddle.net/ebkc9dzL/19/

You need to have a variable outside the click function that will tell you the direction of the animation, so that once inside the click function you can calculate the location of the animated object using getBoundingClientRect() (mdn reference).

Then, if object is moving left and its left distance is less than its own width, you need to move it only enough so that it comes to the edge. If it's AT the edge (left is zero), you need to change the direction.

If it's moving right and its right distance is less than its own width, you need to move it only enough (calculated by window.innerWidth - 100, since 100 is width of your object) so that it comes to the edge. If it's AT the right edge, you need to change direction.

Changing direction in object you pass to jQuery's animate function is a simple matter of adding or subtracting from its "right" attribute.

var direction = "+";
$('.block').click(function() {
    var obj = {},
        distance = 100,
        rect = this.getBoundingClientRect();

    if(direction=="+"){
        if(rect.left>0 && rect.left < 100)
            distance = rect.left;
        else if(rect.left<=0)
            direction = "-";
    }
    else {
        if(rect.right >(window.innerWidth-100) && rect.right+1<window.innerWidth)
            distance = (window.innerWidth-rect.right);
        else if(rect.right+1 >=window.innerWidth){
            direction = "+";
        }
    }

    obj = {"right": direction+"="+distance.toString()+"px"}
    $(this).animate(obj,"slow");
});

    CSS Howto..

    how do I get plus sign in rectangle in css?

    CSS: How to create vertical and horizontal grids on the same element?

    How do I create triangles like this? [closed]

    How to apply “!important” from CSS via jQuery? [duplicate]

    Rails 4: how to identify and format links, hashtags and mentions in model attributes?

    HTML CSS How to swap css attributes

    How to center the Nav-Bar

    How to position the tip arrow of bootstrap popover next to a text field- CSS/Jquery

    CSS - Table mode how to display correctly?

    how to create a css attribute swapper between two elements?

    How to make a smooth dashed border rotation animation like 'marching ants'

    How to display a box of color beside a table row using CSS?

    showing/hiding content is not working in JQuery/CSS

    How to create a progress bar animation

    How can I change the style of thumbnails?

    how to Styling a “choose file” button using css Only

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    How to apply inline and/or external CSS loaded dynamically with jQuery

    How to apply CSS to Selected One in Meteor?

    How to avoid this hardcoded index.js when use webpack?

    How to style text in JQuery?

    How to exclude a child from the parent css property?

    How can CSS interfere with JavaScript?

    How could I get a layout like the one shown in the attached image? [closed]

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    How to use a custom Style Sheet in WordPress

    How to modify CSS or JS file from “materialize:materialize” package in Meteor

    What is the best way to store css data inside database and call it similar to how a css file would be

    How can I apply a font type to everything using css

    How to Make an OS X Style Search in XHTML/CSS