Auto-height textarea using as minimum JS as possible.
A Pen by Yair Even Or on CodePen.
/** | |
* This function takes a canvas, context, width and height. It scales both the | |
* canvas and the context in such a way that everything you draw will be as | |
* sharp as possible for the device. | |
* | |
* It doesn't return anything, it just modifies whatever canvas and context you | |
* pass in. | |
* | |
* Adapted from Paul Lewis's code here: | |
* http://www.html5rocks.com/en/tutorials/canvas/hidpi/ |
void setup() { | |
size(720, 720, P3D); | |
smooth(8); | |
noStroke(); | |
fill(200); | |
ortho(-width/2, width/2, -height/2, height/2, -width/2, 3*width); | |
} | |
int N = 16, n = 5, l = 50, r = 2; //"n" is side length of the inner cube | |
float t, ang = PI/100; |
const getViewportSize = () => { | |
const e = document.documentElement; | |
const g = document.getElementsByTagName('body')[0]; | |
const x = window.innerWidth || e.clientWidth || g.clientWidth; | |
const y = window.innerHeight || e.clientHeight || g.clientHeight; | |
return {x, y} | |
} |
0 ..... | |
1 ..... 21 X.... 41 XX... 61 XXX.. 81 XXXX. | |
2 ..... 22 X.... 42 XX... 62 XXX.. 82 XXXX. | |
3 ..... 23 X.... 43 XX... 63 XXX.. 83 XXXX. | |
4 ..... 24 X.... 44 XX... 64 XXX.. 84 XXXX. | |
5 /.... 25 X/... 45 XX/.. 65 XXX/. 85 XXXX/ | |
6 /.... 26 X/... 46 XX/.. 66 XXX/. 86 XXXX/ | |
7 /.... 27 X/... 47 XX/.. 67 XXX/. 87 XXXX/ | |
8 /.... 28 X/... 48 XX/.. 68 XXX/. 88 XXXX/ | |
9 /.... 29 X/... 49 XX/.. 69 XXX/. 89 XXXX/ |
/** | |
* Fix for vw, vh, vmin, vmax on iOS 7. | |
* http://caniuse.com/#feat=viewport-units | |
* | |
* This fix works by replacing viewport units with px values on known screen sizes. | |
* | |
* iPhone 6 and 6 Plus cannot run iOS 7, so are not targeted by this fix. | |
* Target devices running iOS 8+ will incidentally execute the media query, | |
* but this will still produce the expected result; so this is not a problem. |
# this directive processor enhances sprockets with the ability to load bower | |
# and npm packages | |
# | |
# usage is simple | |
# | |
# //= browserify 'my_library' | |
# window.MyLibrary | |
# browserify.modules['my_library'] | |
# | |
# if you would like to to control the name of what's loaded do this |
sass-convert -R ./ -F sass -T scss && rm *.sass |
@charset "UTF-8"; | |
@import | |
"foundation-sites/scss/util/util", | |
"settings", | |
"foundation-sites/scss/foundation"; | |
@include foundation-global-styles; | |
@include foundation-grid; | |
@include foundation-typography; |
helpers do | |
def retina_image_tag(default_name, options={}) | |
retina_name = default_name.gsub(%r{\.\w+$}, '@2x\0') | |
image_tag(default_name, options.merge('data-interchange' => "[#{asset_path(:images, retina_name)}, (retina)]")) | |
end | |
end |
Auto-height textarea using as minimum JS as possible.
A Pen by Yair Even Or on CodePen.