I was asked in my company to make every screen of our app responsive to height, here is my solution :)
Just extend from Responsive, set your elements and the offset, and you are ready to go !
#div1 | |
#div2 | |
#div3 |
class Responsive | |
constructor: (@name) -> | |
@cache() | |
@minHeight() | |
@resize() | |
window.onresize = => @resize() | |
resizeEl: (el, offset) -> | |
clientHeight = document.documentElement.clientHeight | |
el.height clientHeight - offset | |
getMinHeight: (el) -> | |
parseInt el.css("minHeight").replace("px", "") | |
setMinHeight: (el, height) -> | |
el.css "minHeight", "#{height}px" | |
class ResponsiveBox extends Responsive | |
cache: -> | |
@el = | |
div1: $("#div1") | |
div2: $("#div2") | |
div3: $("#div3") | |
@offset = | |
div2: @el["div1"].height() + | |
@el["div3"].height() | |
minHeight: -> | |
# No used in this example | |
resize: -> | |
@resizeEl @el["div2"], @offset["div2"] | |
new ResponsiveBox() |
#div1 | |
height: 50px | |
width: 100px | |
background-color: orange | |
#div2 | |
height: 50px | |
width: 100px | |
background-color: red | |
#div3 | |
height: 50px | |
width: 100px | |
background-color: orange |