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 can I get width and height of big image after displaying it on html-page?

    How to create a backdrop for a dialog?

    How to create footers in CSS

    How to use global stylesheet with css loader

    How to set the css property of dynamic data

    How to make 2 level scrolling tab in CSS like this in HTML 5

    CSS how to change color of a specific primary-panel in a if-block

    How to make outer div inherit height of inner, non-floated divs?

    How to display clicked on/off SVG icon from admin panel page and display result on a different page

    How to fit css textbox to content?

    CSS how to select first occuring element after another element

    How to manipulate the window list color?

    How do I align these links inside inline-blocks to the top?

    How do I make CSS take into account a sidebar with absolute positioning

    how do responsive recaptcha images

    How to animate a progress bar in Bootstrap 4?

    Show and hide table column using jQuery

    How are CSS elements combined

    How to word wrap text in HTML?

    How to select a child element inside a div using CSS

    Given an image button with borders how to stretch/repeat middle part in CSS for variable length content?

    Bootstrap 3 / CSS: How to properly vertically align in panel heading

    how to display an image on small screens and videos on large screen in html

    How to add text using css in textarea? [closed]

    How to apply css, after Jquery adds a class?

    How to use CSS :hover to make extra div block elements display?

    How to override CSS? [closed]

    How can I get a label to right align in a table “cell” (td)?

    Show the menu at the center of the data toggle

    How do I simulate a hover with a touch in touch enabled browsers?