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)


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


.block {


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

Here is my JSFiddle:

Thank you I really appreciate the help!

Solution :

Working fiddle:

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(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"}

    CSS Howto..

    How to achieve “responsiveness” of this template?

    CSS - how to apply styles to first elements in a static generated list

    How can I :hover over different links in one line while getting the spacing correct?

    How to add CSS for dynamic MenuItems in MenuList and How to get the value of the MenuItem in XUL

    Style elements based on how many elements there are using just CSS?

    How can I create a horizontal selector in a form with only html and css?

    How to apply CSS to table cell depending on conditions

    How to make CSS sourcemapping work in Chrome with Compass (SASS)

    How to apply CSS only to numbers in paragraph? (without )

    How to position the twitter widget

    How to get list of custom CSS properties

    How do you tell which css class to modify?[Example inside]

    How to make this HTML change work? [closed]

    How to force html/css padding/margin on an element?

    How to avoid an hover on a menu item to affect the menu items on the right

    how to make html email look exactly the same as previewed just in browser?

    How to inherit the background color of textarea from parent element in Internet Explorer?

    How to fix clickable background with Wordpress theme and CSS

    How to make div position fixed without floating

    How to replace a specific text in CSS? [duplicate]

    CSS: How to align text to the center of the image (left side)

    How do I select columns including colspans in a table?

    How do I centre align two BTN button within a jumbotron in HTML

    How to style CGI python with CSS?

    How to use relative/absolute paths in css URLs?

    How to change background on hover for 2 elements using css

    How to position iframe (calendar) inside php echo statement?

    Background images: how to fill whole div if image is small and vice versa

    How can I set a CSS property on the html element with jQuery?

    How to rotate a div