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.