"tchat"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/lieuwex/pen/AwqsI?limit=all&page=48&q=draggable" /> <link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style class="cp-pen-styles">/* https://codepen.io/safakotur/pen/ibHga <3333333 */ * { -webkit-font-smoothing: antialiased; font-family: sans-serif; overflow: hidden } .chatHead { background: #fff url('https://www.gravatar.com/avatar/763664ead00ca1ed8e12db1d5ad703c5?s=75&d=identicon&r=PG') no-repeat -3px -5px; position: fixed; width: 70px; height: 70px; left: 0; top: 0; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border: solid 1px #fff; z-index: 10000; pointer-events: initial; text-decoration: none; overflow: initial; box-shadow: 0 2px 12px 1px rgba(0,0,0,.89); } .chatHeadLeader { z-index: 100000; } .chatHead i { width: 17px; height: 24px; -webkit-border-radius: 4px/3px; -moz-border-radius: 4px/3px; border-radius: 4px/3px; background-color: #adafb5; background-image: -webkit-linear-gradient(bottom, #ff1919, #ff5959); background-image: -moz-linear-gradient(bottom, #ff1919, #ff5959); background-image: -o-linear-gradient(bottom, #ff1919, #ff5959); background-image: -ms-linear-gradient(bottom, #ff1919, #ff5959); background-image: linear-gradient(to top, #ff1919, #ff5959); display: block; color: #fff; font-style: normal; font-family: 'Helvetica'; font-weight: bold; font-size: 16px; text-align: center; line-height: 28px; box-shadow: 0px 1px 3px #000; -moz-box-shadow: 0px 1px 3px #000; -webkit-box-shadow: 0px 1px 3px #000; border: 1px solid rgba(255, 0, 0, .5); margin: -5px 0 0 -5px; text-shadow: 0 2px 0 #c51414; cursor: default; -webkit-transition: transform .2s ease-in-out; -moz-transition: transform .2s ease-in-out; -ms-transition: transform .2s ease-in-out; -o-transition: transform .2s ease-in-out; transition: transform .2s ease-in-out; } i.under { -webkit-transform: translateY(55px); -moz-transform: translateY(55px); -ms-transform: translateY(55px); -o-transform: translateY(55px); transform: translateY(55px); } i.right { -webkit-transform: translateX(55px); -moz-transform: translateX(55px); -ms-transform: translateX(55px); -o-transform: translateX(55px); transform: translateX(55px); }</style></head><body> <div class="chatHead chatHeadLeader"> <i class="chatHeadBadge">5</i> </div> <div class="chatHead chatHeadFollower" style="background: #fff url('http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash4/404911_10200598009661667_1705503855_n.jpg') no-repeat -3px -5px; background-size: 80px 80px;"></div> <div class="chatHead chatHeadFollower" style="background: #fff url('https://www.gravatar.com/avatar/733664ead00ca1ed8e12db1d5fe703c5?s=75&d=identicon&r=PG') no-repeat -3px -5px; background-size: 80px 80px;"></div> <div class="chatHead chatHeadFollower" style="background: #fff url('https://www.gravatar.com/avatar/763664ead00ca1ed8e12db1d5eh703c5?s=75&d=identicon&r=PG') no-repeat -3px -5px; background-size: 80px 80px;"></div> <h1>Sadly im not good with physics :c</h1> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='https://rawgit.com/facebook/rebound-js/master/rebound.min.js'></script><script src='https://rawgit.com/lodash/lodash/2.4.1/dist/lodash.min.js'></script> <script > /* copyright 2014 Lieuwe Rooijakkers (https://www.github.com/lieuwex) */ (function() { var delayIds, el, fn, i, j, ref, snap; el = $(".chatHead"); this.springs = {}; this.system = new rebound.SpringSystem(); snap = function(value, side) { switch (side) { case "top": return el.css({ transform: "translate3d(0px, " + value + "px, 0px)" }); case "left": return el.css({ transform: "translate3d(" + value + "px, 0px, 0px)" }); case "right": return el.css({ transform: "translate3d(" + ($(window).width() + value) + "px, 0px, 0px)" }); case "bottom": return el.css({ transform: "translate3d(0px, " + ($(window).height() + value) + "px, 0px)" }); } }; springs.top = system.createSpring(40, 6); springs.left = system.createSpring(40, 6); springs.right = system.createSpring(40, 6); springs.bottom = system.createSpring(40, 6); springs.top.addListener({ onSpringUpdate: function(spring) { var val; val = spring.getCurrentValue(); val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, -20); return snap(val, "top"); } }); springs.left.addListener({ onSpringUpdate: function(spring) { var val; val = spring.getCurrentValue(); val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, -20); return snap(val, "left"); } }); springs.right.addListener({ onSpringUpdate: function(spring) { var val; val = spring.getCurrentValue(); val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, -40); return snap(val, "right"); } }); springs.bottom.addListener({ onSpringUpdate: function(spring) { var val; val = spring.getCurrentValue(); val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, -40); return snap(val, "bottom"); } }); $(".chatHead").css({ top: 25 }); springs.right.setCurrentValue(-50).setAtRest(); springs.right.setEndValue(1); fn = function(i) { var follower; follower = $(".chatHeadFollower")[i]; follower.style.top = (25 + (5 * (i + 1))) + "px"; return follower.style.zIndex = 99999 - i; }; for (i = j = 0, ref = $(".chatHeadFollower").length; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {if (window.CP.shouldStopExecution(1)){break;} fn(i); } window.CP.exitedLoop(1); delayIds = []; $(".chatHeadLeader").draggable({ scroll: false, start: function() { springs.top.setAtRest(); springs.left.setAtRest(); springs.right.setAtRest(); springs.bottom.setAtRest(); return $(".chatHeadFollower").css({ opacity: 0 }); }, drag: function() { var k, left, ref1, results, top; top = Number($(".chatHeadLeader").css("top").replace(/[^\d\.\-]/ig, "")); left = Number($(".chatHeadLeader").css("left").replace(/[^\d\.\-]/ig, "")); springs.top.setCurrentValue(top / -20).setAtRest(); springs.left.setCurrentValue(left / -20).setAtRest(); springs.right.setCurrentValue(($(window).width() - left) / 40).setAtRest(); springs.bottom.setCurrentValue(($(window).height() - top) / 40).setAtRest(); $(".chatHeadBadge").removeClass("under"); $(".chatHeadBadge").removeClass("right"); $(".chatHead").css({ transform: "translate3d(0px, 0px, 0px)" }); results = []; for (i = k = 0, ref1 = $(".chatHeadFollower").length; 0 <= ref1 ? k < ref1 : k > ref1; i = 0 <= ref1 ? ++k : --k) {if (window.CP.shouldStopExecution(2)){break;} results.push((function(i, top, left) { var func; func = function() { var follower; follower = $(".chatHeadFollower")[i]; follower.style.opacity = 1; follower.style.left = left + "px"; follower.style.top = top + "px"; return follower.style.zIndex = 99999 - i; }; return delayIds.push(_.delay(func, 20 * (i + 1))); })(i, top, left)); } window.CP.exitedLoop(2); return results; }, stop: function() { var closest, delayId, fn1, k, l, left, len, ref1, top, value, values; for (k = 0, len = delayIds.length; k < len; k++) {if (window.CP.shouldStopExecution(3)){break;} delayId = delayIds[k]; clearTimeout(delayId); } window.CP.exitedLoop(3); delayIds = []; top = Number($(".chatHeadLeader").css("top").replace(/[^\d\.\-]/ig, "")); left = Number($(".chatHeadLeader").css("left").replace(/[^\d\.\-]/ig, "")); fn1 = function(i, top, left) { var follower; follower = $(".chatHeadFollower")[i]; follower.style.left = (left + (5 * (i + 1))) + "px"; follower.style.top = (top + (5 * (i + 1))) + "px"; return follower.style.zIndex = 99999 - i; }; for (i = l = 0, ref1 = $(".chatHeadFollower").length; 0 <= ref1 ? l < ref1 : l > ref1; i = 0 <= ref1 ? ++l : --l) {if (window.CP.shouldStopExecution(4)){break;} fn1(i, top, left); } window.CP.exitedLoop(4); values = [ { side: "top", value: top }, { side: "left", value: left }, { side: "right", value: $(window).width() - left }, { side: "bottom", value: $(window).height() - top } ]; closest = _.first(_.sortBy(values, function(v) { return v.value; })).side; value = _.first(_.sortBy(values, function(v) { return v.value; })).value; if (closest === "top") { springs[closest].setCurrentValue(value / -20).setAtRest(); $(".chatHead").css({ top: 0 }); $(".chatHeadBadge").addClass("under"); } else if (closest === "left") { springs[closest].setCurrentValue(value / -20).setAtRest(); $(".chatHead").css({ left: 0 }); $(".chatHeadBadge").addClass("right"); } else if (closest === "right") { springs[closest].setCurrentValue(value / 40).setAtRest(); $(".chatHead").css({ left: 0 }); } else if (closest === "bottom") { springs[closest].setCurrentValue(value / 40).setAtRest(); $(".chatHead").css({ top: 0 }); } return springs[closest].setEndValue(1); } }); }).call(this); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: