Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
​
<body data-ng-app="cssStuff" data-ng-controller="MainCtrl">
​
<div data-move-to-this>
​
    <div class="beatle-intro">
        <h3>Here is some info about people associated with the Beatles </h3>
        <br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
    </div>
    <div class="beatle-container">
        <div>
            <div class="beatle" data-beatle="john">
                <h3>John</h3>
                <br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
            </div>
            <div class="beatle" data-beatle="paul">
                <h3>Paul</h3>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
            </div>
            <div class="beatle" data-beatle="george">
                <h3>George</h3>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
            </div>
            <div class="beatle" data-beatle="ringo">
                <h3>Ringo</h3>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
            </div>
            <div class="beatle" data-beatle="yoko">
                <h3>Yoko</h3>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
            </div>
            <div class="beatle" data-beatle="pete">
                <h3>Pete Best</h3>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
            </div>
            <div class="beatle" data-beatle="george-m">
                <h3>George Martin</h3>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
            </div>
            <div class="beatle" data-beatle="brian">
                <h3>Brian Epstein</h3>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
            </div>
            <div class="beatle" data-beatle="neil">
                <h3>Neil Aspinall</h3>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue  imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
            </div>
        </div>
    </div>
</div>
</body>
 
​
    body {
        font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        background-color: aliceblue;
    }
​
    .beatle-intro {
        overflow: auto;
        border: 1px solid lightskyblue;
        display: inline-block;
        background-color: white;
        height: 500px;
        padding-left: 10px;
        padding-right: 10px;
        width: 25%;
    }
​
    .beatle-container {
        overflow: auto;
        border: 1px solid lightskyblue;
        display: inline-block;
        white-space: nowrap;
        width: 70%;
        background-color: white;
        height: 500px;
    }
​
    .beatle {
        width: 300px;
        max-width: 300px;
        display: inline-block;
        white-space: initial;
        padding-left: 10px;
    }
​
 
angular.module('cssStuff', [])
​
        .controller('MainCtrl', ['$scope', function ($scope) {
​
​
        }])
​
        .directive('moveToThis', function () {
            'use strict';
            return {
                restrict: 'A',
                link: function (scope, element) {
​
                var animationDistance = null;
​
                    element.bind('click', function (ev) {
                        console.log('I have been clicked');
                        
​
                        // find the distance of the 'beatle' div that was clicked and scroll / animate to the zero position of the beatle-container
​
                        // what was clicked...
                        var clickedBeatle = findUpDom(ev.target, 'data-beatle');
                        
                        if (clickedBeatle !== false) {
                            // get position of clicked DIV to container
                            if(animationDistance === null ) {
                                console.log('is null');
                                animationDistance = (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left);
                            } else {
                                console.log('already exisits');
                                animationDistance = animationDistance + (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left)  || (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left) ;
                            }
​
​
console.log(animationDistance, element[0].children[1].children[0].scrollLeft);
​
                            element[0].children[1].children[0].style['transition'] = '1s ease-in-out';
                            element[0].children[1].children[0].style['animation-iteration-count'] = '1';
                            element[0].children[1].children[0].style['animation-fill-mode'] = 'forwards';
                            element[0].children[1].children[0].style['transform'] = 'translate(' + animationDistance + 'px)';
                        }
​
                    });
​
​
                    var findUpDom = function (elem, attribute) {
​
                        if (elem.getAttribute(attribute)) {
                            return elem;
                        } else {
​
                            while (elem.parentNode) {
                                elem = elem.parentNode;
​
                                if (elem.getAttribute && elem.getAttribute(attribute)) {
                                    return elem;
                                    break;
                                }
                            }
                            return false;
                        }
​
                    };
​
                }
            };
        });
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MikeSavpro
0viewers