CoffeeScript

by vjeux

HTML

<script src="https://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js"></script>
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s)[2].innerHTML.split(n);d.write('<'+s+' type="text/coffeescript">'+b.slice(2,b.length-2).join(n)+'</'+s+'>')})()</script>
    
    
<div id="frame"></div>
<div class="sidebar" data-anchor="left, #frame, right"></div>
<div class="chat" data-anchor="top right, html, top right"></div>

CSS

#frame {
  width: 100px;
  height: 200px;
  background-color: #333; 
}

.sidebar {
  width: 50px;
  height: 120px;
  background-color: red; 
}

.chat {
  width: 100px;
  height: 100px;
  background-color: blue; 
}

body {
  background-color: #111;   
}

JavaScript

# Anchor by Vjeux
String::contains = (str) -> -1 isnt this.indexOf str
    
$('[data-anchor]').each ->
    [point, relativeTo, relativePoint] = ($(this).data 'anchor').split ','

    $relativeTo = $ relativeTo
    $this = $ this

    weigth = (source, def, data) ->
        for key, val of data
            if source.contains key
                return val
        return def
        
    offset = $relativeTo.offset()

    offset.left += $relativeTo.width() * weigth relativePoint, 0.5, left: 0, right: 1
    offset.top += $relativeTo.height() * weigth relativePoint, 0.5, top: 0, bottom: 1

    offset.left -= $this.width() * weigth point, 0.5, left: 0, right: 1
    offset.top -= $this.height() * weigth point, 0.5, top: 0, bottom: 1
        
    $this.css
        position: 'absolute'
        top: offset.top
        left: offset.left