Chathead JS

by handtrix

HTML

<img src="http://gravatar.com/avatar/bee20060b0b1571f6b6678866d0a75de?d=identicon&size=300" class="chathead" />

<h1>Chathead JS</h1>

CSS

/* Chathead styles */
 .chathead {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    border: 4px solid #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    position: absolute;
    right: -10px;
    z-index: 9999999;
}
/* Page Styles */
 body {
    background: url(http://subtlepatterns.com/patterns/fabric_plaid.png);
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
    padding-top: 150px;
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    color: #929292;
    opacity: 0.3;
    font-size: 120px;
    line-height: 1;
    letter-spacing: -2px;
    text-align: center;
}

JavaScript

/* Chathead JS */
$(".chathead").draggable({
    opacity: 0.95,
    scope: "chathead",
    scroll: true
}).on("dragstop", function (e) {
    var bodyWidth = $(document.body).width(),
        middle = bodyWidth / 2,
        $this = $(this),
        offset = 10;
    if (middle > e.pageX) {
        $this.animate({
            left: -offset
        });
    } else {
        $this.animate({
            left: bodyWidth + 10 + offset - $this.width()
        });
    }
});