{"id":15560938,"url":"https://github.com/w3co/jcf","last_synced_at":"2025-10-05T08:52:47.864Z","repository":{"id":19919900,"uuid":"23185880","full_name":"w3co/jcf","owner":"w3co","description":"Advanced form elements customization using CSS/JS","archived":false,"fork":false,"pushed_at":"2019-07-19T06:40:38.000Z","size":807,"stargazers_count":202,"open_issues_count":21,"forks_count":54,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-09-11T06:10:37.359Z","etag":null,"topics":["forms","javascript","jcf","jquery","select","styling"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/w3co.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-21T12:15:56.000Z","updated_at":"2024-09-19T14:30:03.000Z","dependencies_parsed_at":"2022-07-08T01:00:36.574Z","dependency_job_id":null,"html_url":"https://github.com/w3co/jcf","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/w3co/jcf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3co%2Fjcf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3co%2Fjcf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3co%2Fjcf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3co%2Fjcf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/w3co","download_url":"https://codeload.github.com/w3co/jcf/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3co%2Fjcf/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278431554,"owners_count":25985685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["forms","javascript","jcf","jquery","select","styling"],"created_at":"2024-10-02T16:04:11.166Z","updated_at":"2025-10-05T08:52:47.845Z","avatar_url":"https://github.com/w3co.png","language":"JavaScript","readme":"# JCF - JavaScript Custom Forms\nThis library allows crossbrowser customization of form elements using CSS.\n\nCheck [live demo](http://psd2html.com/jcf).\n\n## Browser support\nThe script was tested in the following browsers:\n\n - Internet Explorer 8+\n - Firefox\n - Chrome\n - Safari\n - Opera\n - Windows 8+ Touch desktops\n - Windows Phone 8+\n - Android 4+\n - iOS7+\n\n## Installation\n\nInstall using [npm](http://npmjs.org/):\n`npm install jcf`\n\nInstall using [Bower](http://bower.io/):\n`bower install jcf`\n\nCDN: this library is available at [cdnjs](https://cdnjs.com/)\n\n## Usage\nThe script requires [jQuery 1.7+](http://jquery.com/) to work properly. To add script in your page simply attach core file - `jcf.js` and some of modules you want to use for customization:\u003c/p\u003e\n\n```html\n\u003cscript src=\"js/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jcf.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jcf.select.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jcf.radio.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jcf.checkbox.js\"\u003e\u003c/script\u003e\n```\n\nWhen the page is loaded all you have to do is simply call function:\n\n```js\n$(function() {\n\tjcf.replaceAll();\n});\n```\n\nPlease note that JCF does not replace original form elements with own components. It just creates additional DOM nodes to support CSS styling. All DOM events are invoked on original elements and in most cases JCF could be easily turned on or off without affecting your existing event listeners.\n\n## How to use JCF with AngularJS 1.x\n\nTo use this script with Angular you still need to attach all scripts above (including jQuery) and also attach directive:\n\n```js\n\u003cscript src=\"js/jcf.angular.js\"\u003e\u003c/script\u003e\n```\n\nWhen the directive is connected as dependency in your app you can add `jcf` attribute to the form field and such element will be customized:\n```html\n\u003c!-- customize select: --\u003e\n\u003cselect jcf\u003e\n    ...\n\u003c/select\u003e\n\n\u003c!-- customize range input with specific options: --\u003e\n\u003cinput type=\"range\" jcf='{\"orientation\": \"vertical\"}'\u003e\n```\n\n## General API Information\n\nGlobal `jcf` object has several methods to control custom form elements on the page:\n\n`jcf.replaceAll( [context] )` - Replace elements on the whole page. Optional argument is context to use (can be CSS selector, or DOM/jQuery object). Add class `jcf-ignore` on the element to prevent its customization.\n\n`jcf.replace( elements [, moduleName] [, customOptions] )` - Replace certain element or multiple elements. Returns custom form element instance. The first argument is CSS selector, or DOM/jQuery object to be customized. Second argument is optional and used to specify module which should be used for customization. By default it is `false` which will result module to be auto detected. Third argument is module options which can be specified with object.\n\n`jcf.destroyAll( [context] )` - Destroy all custom form elements instances and restore original form elements. Optional argument is context to use (can be CSS selector, or DOM/jQuery object).\n\n`jcf.destroy( elements )` - Destroy certain element or multiple form elements. Should be applied to native form controls.\n\n`jcf.refreshAll( [context] )` - Redraw all custom form instances. Should be used when values of form elements are modified by other scripts. Optional argument is context to use (can be CSS selector, or DOM/jQuery object).\n\n`jcf.refresh( elements )` - Refresh certain element or multiple form elements.\n\n## Getting the instance of customized form element\nIn any time it's possible to get instance of customized form element. Use method `jcf.getInstance` to do this:\n\n```javascript\nvar countrySelect = document.getElementById('country-select');\nvar customFormInstance = jcf.getInstance(countrySelect);\n\ncustomFormInstance.refresh();\n```\n\n## Setting Options\n\nThere are two ways of specifying options for modules - override module defaults and specify options per element.\n\n```javascript\n// set options for Checkbox module\njcf.setOptions('Checkbox', {\n\tcheckedClass: 'test',\n\twrapNative: false\n});\n\n// replace all form elements with modified default options\njcf.replaceAll();\n```\n\nThe second way is to specify options for certain element in HTML:\n``` html\n\u003cinput type=\"checkbox\" data-jcf='{\"checkedClass\": \"test\", \"wrapNative\": false}'\u003e\n```\n*(Please be careful and use valid JSON)*\n\n## Module Options\n\nEach module has options. Some of options are common between modules and some are unique. The most commonly used options in modules are listed below.\n\n### Select\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth\u003eDescription\u003c/th\u003e\n\t\t\t\u003cth\u003eData Type\u003c/th\u003e\n\t\t\t\u003cth\u003eDefault\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ewrapNative\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eWrap native select inside fake area, so that native dropdown will be shown\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ewrapNativeOnMobile\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eShow native dropdown on mobile devices even if \u003ccode\u003ewrapNative\u003c/code\u003e is \u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003efakeDropInBody\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eActive only when custom dropdown is used. Specifies where to append custom dropdown - in document root, or inside select area\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003euseCustomScroll\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eUse custom scroll inside custom dropdown if \u003ccode\u003eScrollable\u003c/code\u003e module present\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eflipDropToFit\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eFlip custom dropdown if it does not fit in viewport\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003emaxVisibleItems\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eHow many options should be visible in dropdown before scrollbar appears\u003c/td\u003e\n\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e10\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Checkbox\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth\u003eDescription\u003c/th\u003e\n\t\t\t\u003cth\u003eData Type\u003c/th\u003e\n\t\t\t\u003cth\u003eDefault\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ewrapNative\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eWrap native checkbox inside fake area for better compatibility with event handlers attached by other scripts\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003echeckedClass\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify class which will be added to fake area when checkbox is checked\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"jcf-checked\"\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003elabelActiveClass\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify class which will be added to corresponding \u003ccode\u003e\u0026lt;label\u0026gt;\u003c/code\u003e when checkbox is checked\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"jcf-label-active\"\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Radio\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth\u003eDescription\u003c/th\u003e\n\t\t\t\u003cth\u003eData Type\u003c/th\u003e\n\t\t\t\u003cth\u003eDefault\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ewrapNative\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eWrap native radio inside fake area for better compatibility with event handlers attached by other scripts\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003echeckedClass\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify class which will be added to fake area when radio is checked\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"jcf-checked\"\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003elabelActiveClass\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify class which will be added to corresponding \u003ccode\u003e\u0026lt;label\u0026gt;\u003c/code\u003e when radio is checked\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"jcf-label-active\"\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Number input\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth\u003eDescription\u003c/th\u003e\n\t\t\t\u003cth\u003eData Type\u003c/th\u003e\n\t\t\t\u003cth\u003eDefault\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003epressInterval\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify the interval which will control how fast the value is changing while the buttons are pressed.\u003c/td\u003e\n\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e150\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003edisabledClass\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify class which will be added to arrow buttons when maximum or minimum number is reached\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"jcf-disabled\"\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Range input\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth\u003eDescription\u003c/th\u003e\n\t\t\t\u003cth\u003eData Type\u003c/th\u003e\n\t\t\t\u003cth\u003eDefault\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eorientation\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify range input orientation: \u003ccode\u003e\"horizontal\"\u003c/code\u003e or \u003ccode\u003e\"vertical\"\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ehorizontal\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003erange\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eShow range indicator. By default indicator will be shown only for inputs with multiple handles. Possible values are: \u003ccode\u003e\"min\"\u003c/code\u003e, \u003ccode\u003e\"max\"\u003c/code\u003e, \u003ccode\u003e\"all\"\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"auto\"\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eminRange\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eWorks only when multiple slider handles are used. Sets the minimum range value that can be selected between the two handles\u003c/td\u003e\n\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003edragHandleCenter\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eEnable this option to make the cursor stick to the center of the input handle\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003esnapToMarks\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSnap input handle to HTML5 datalist marks\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003esnapRadius\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify snapping radius in pixels\u003c/td\u003e\n\t\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e5\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n### File\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth\u003eDescription\u003c/th\u003e\n\t\t\t\u003cth\u003eData Type\u003c/th\u003e\n\t\t\t\u003cth\u003eDefault\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ebuttonText\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify default text for upload button (its better to specify this option from HTML for proper localization).\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"Choose file\"\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eplaceholderText\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify default text for input when no file is selected (its better to specify this option from HTML for proper localization)\u003c/td\u003e\n\t\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"No file chosen\"\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Scrollable\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth\u003eDescription\u003c/th\u003e\n\t\t\t\u003cth\u003eData Type\u003c/th\u003e\n\t\t\t\u003cth\u003eDefault\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ehandleResize\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eHandle resize events so that scrollable area will be responsive\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ealwaysShowScrollbars\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eAlways show scrollbars event if they cant scroll anything\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ealwaysPreventMouseWheel\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eAlways prevent mouse wheel scrolling when its used over scrollable element. This way page wont be scrolled even if scrollable area is at the scrolled to the top/bottom.\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Textarea\n\nApply custom scrollbar on `\u003ctextarea\u003e` (Works only when `Scrollable` module is available).\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth\u003eDescription\u003c/th\u003e\n\t\t\t\u003cth\u003eData Type\u003c/th\u003e\n\t\t\t\u003cth\u003eDefault\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eresize\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eAdd resize grip to \u003ccode\u003e\u0026lt;textarea\u0026gt;\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eboolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n## License\n\nThis script is licensed under the [MIT License](LICENSE.txt).\n\nCopyright 2014-2016 [PSD2HTML.com](http://psd2html.com/?jcf)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw3co%2Fjcf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fw3co%2Fjcf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw3co%2Fjcf/lists"}