{"id":45863,"date":"2018-11-05T21:01:43","date_gmt":"2018-11-05T13:01:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=45863"},"modified":"2018-11-05T16:27:08","modified_gmt":"2018-11-05T08:27:08","slug":"create-auto-resizing-elements-with-scalablejs","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/","title":{"rendered":"Create Auto-Resizing Elements with Scalable.js"},"content":{"rendered":"<p>If you need to <strong>make flexible elements that auto-fill their containers<\/strong> I would highly recommend <a href=\"https:\/\/scriptartist.github.io\/Scalable\/\" target=\"_blank\">Scalable<\/a>. This free open-source JS script is perfect for creating a fluid design without much stress.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/image-cropping-jquery-plugin-cropper\/\">Crop and Resize Images With This Simple jQuery Plugin<\/a><\/p>\n<figure><a href=\"https:\/\/scriptartist.github.io\/Scalable\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-auto-resizing-elements-with-scalablejs\/01-scalable-demo-preview.jpg\" alt=\"Scalable.js script\" width=\"1000\" height=\"372\"><\/a><\/figure>\n<p>Everything in the Scalable.js library is malleable so you can alter every container\u2019s style, size, position, and internal contents. Need elements aligned to the top or bottom of the page? Scalable has options for that.<\/p>\n<p>Take a peek at the <a href=\"https:\/\/github.com\/ScriptArtist\/Scalable\" target=\"_blank\">GitHub repo<\/a> to learn more about how this works.<\/p>\n<p>At its most basic form, this script takes a target page element along with some options for customizing the display. Here\u2019s some sample code taken straight from GitHub:<\/p>\n<pre>var scalable = new Scalable(containerEl, options);<\/pre>\n<p>Naturally, the first parameter is whichever container element you\u2019re targeting(ideally a <strong>&lt;div&gt;<\/strong> or something similar).<\/p>\n<p>The options parameter should take an array of key=&gt;value pairs. These options include <strong>container height values, min and max widths, along with min and max scales<\/strong> (ie. how much it can scale with the internal elements).<\/p>\n<p>Have a look over the <a href=\"https:\/\/scriptartist.github.io\/Scalable\/\" target=\"_blank\">main project page<\/a> for a usable demo. You can drag the corners of the container to auto-resize the flexible item inside. This is pretty cool since below that area you\u2019ll find <strong>usable code<\/strong> taken directly from the page.<\/p>\n<figure><a href=\"https:\/\/scriptartist.github.io\/Scalable\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-auto-resizing-elements-with-scalablejs\/02-scalable-animation-example.gif\" alt=\"Scalablejs demo animation\" width=\"600\" height=\"336\"><\/a><\/figure>\n<p>There are ways to handle flexible elements with just pure CSS. However, these methods can feel dated and they don\u2019t offer as much control as JavaScript.<\/p>\n<p>If you\u2019d like to try this out just grab a copy <a href=\"https:\/\/github.com\/ScriptArtist\/Scalable\" target=\"_blank\">from GitHub<\/a> and see what you think.<\/p>\n<p>Scalable is still in active development but it\u2019s an easy script to edit for your needs.<\/p>","protected":false},"excerpt":{"rendered":"<p>If you need to make flexible elements that auto-fill their containers I would highly recommend Scalable. This free open-source JS script is perfect for creating a fluid design without much stress. Read Also: Crop and Resize Images With This Simple jQuery Plugin Everything in the Scalable.js library is malleable so you can alter every container\u2019s&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3497],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Auto-Resizing Elements with Scalable.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"If you need to make flexible elements that auto-fill their containers I would highly recommend Scalable. This free open-source JS script is perfect for\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Auto-Resizing Elements with Scalable.js\" \/>\n<meta property=\"og:description\" content=\"If you need to make flexible elements that auto-fill their containers I would highly recommend Scalable. This free open-source JS script is perfect for\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-05T13:01:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/create-auto-resizing-elements-with-scalablejs\/01-scalable-demo-preview.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Create Auto-Resizing Elements with Scalable.js\",\"datePublished\":\"2018-11-05T13:01:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/\"},\"wordCount\":285,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-auto-resizing-elements-with-scalablejs\\\/01-scalable-demo-preview.jpg\",\"keywords\":[\"Javascript Library\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/\",\"name\":\"Create Auto-Resizing Elements with Scalable.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-auto-resizing-elements-with-scalablejs\\\/01-scalable-demo-preview.jpg\",\"datePublished\":\"2018-11-05T13:01:43+00:00\",\"description\":\"If you need to make flexible elements that auto-fill their containers I would highly recommend Scalable. This free open-source JS script is perfect for\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-auto-resizing-elements-with-scalablejs\\\/01-scalable-demo-preview.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-auto-resizing-elements-with-scalablejs\\\/01-scalable-demo-preview.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-auto-resizing-elements-with-scalablejs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Auto-Resizing Elements with Scalable.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Auto-Resizing Elements with Scalable.js - Hongkiat","description":"If you need to make flexible elements that auto-fill their containers I would highly recommend Scalable. This free open-source JS script is perfect for","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/","og_locale":"en_US","og_type":"article","og_title":"Create Auto-Resizing Elements with Scalable.js","og_description":"If you need to make flexible elements that auto-fill their containers I would highly recommend Scalable. This free open-source JS script is perfect for","og_url":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-11-05T13:01:43+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-resizing-elements-with-scalablejs\/01-scalable-demo-preview.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Create Auto-Resizing Elements with Scalable.js","datePublished":"2018-11-05T13:01:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/"},"wordCount":285,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-resizing-elements-with-scalablejs\/01-scalable-demo-preview.jpg","keywords":["Javascript Library"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/","url":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/","name":"Create Auto-Resizing Elements with Scalable.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-resizing-elements-with-scalablejs\/01-scalable-demo-preview.jpg","datePublished":"2018-11-05T13:01:43+00:00","description":"If you need to make flexible elements that auto-fill their containers I would highly recommend Scalable. This free open-source JS script is perfect for","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-resizing-elements-with-scalablejs\/01-scalable-demo-preview.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-auto-resizing-elements-with-scalablejs\/01-scalable-demo-preview.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/create-auto-resizing-elements-with-scalablejs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Auto-Resizing Elements with Scalable.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bVJ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=45863"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45863\/revisions"}],"predecessor-version":[{"id":45864,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45863\/revisions\/45864"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=45863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=45863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=45863"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=45863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}