{"id":3267,"date":"2018-05-22T19:23:11","date_gmt":"2018-05-22T19:23:11","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3267"},"modified":"2018-05-22T19:25:41","modified_gmt":"2018-05-22T19:25:41","slug":"jquery-color-picker-attach-to-html-element","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/","title":{"rendered":"Attach Color Picker to HTML Element using jQuery"},"content":{"rendered":"

Color Picker is a graphical UI widget that is used to select colors. The user can select and adjust color values with Color Picker component. In the website, color picker widget allows the user to choose the color and set the color code to the input field. In this tutorial, we will show you how to add color picker widget to the input field on the website.<\/p>\n

The jQuery Color Picker is a simple plugin to attach color picker to web element. It helps to select a color in the same way you select a color in Adobe Photoshop. Using Color Picker jQuery plugin<\/b>, you can embed web color picker component in flat mode, or attach color picker to DOMElement.<\/p>\n

jQuery and Colorpicker Library<\/h2>\n

To attach color picker to HTML element on the web page, you need to include the jQuery and Colorpicker plugin library.<\/p>\n

<!-- jquery library --><\/span>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"js\/jquery.min.js\"<\/span>><\/script<\/span>>\r\n\r\n<!-- colorpicker library --><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"css\/colorpicker.css\"<\/span> type<\/span>=\"text\/css\"<\/span> \/>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"js\/colorpicker.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\n
Color Picker Widget<\/h2>\n
The ColorPicker() function initializes the Color Picker plugin. You need to select the element and call ColorPicker() method to attach color picker widget.<\/p>\n
$<\/span>('input<\/span>').ColorPicker(options);<\/pre>\n
The example code shows the 3 types of color picker widget that can be used on the web page.<\/p>\n
Color Picker Flat Mode<\/h2>\n
With the flat mode, the color picker appends to the HTML element without triggering an event.<\/p>\n
JavaScript Code:<\/b><\/p>\n
$<\/span>(function<\/span>() {\r\n    $<\/span>('#colorpickerHolder'<\/span>).ColorPicker({flat: true<\/span>});\r\n});\r\n<\/pre>\n
HTML Code:<\/b><\/p>\n
<p<\/span> id<\/span>=<\/span>\"colorpickerHolder\"<\/span>><\/p<\/span>>\r\n<\/pre>\n
Attach Color Picker to DOMElement<\/h2>\n
The following example attached color picker to DOMElement and use a callback function to live preview of color.<\/p>\n
JavaScript Code:<\/b><\/p>\n
$<\/span>(function<\/span>() {\r\n    $<\/span>('#colorSelector'<\/span>).ColorPicker({\r\n        color: '#0000ff'<\/span>,\r\n        onShow<\/span>: function<\/span> (colpkr) {\r\n            $<\/span>(colpkr).fadeIn(500<\/span>);\r\n            return<\/span> false<\/span>;\r\n        },\r\n        onHide<\/span>: function<\/span> (colpkr) {\r\n            $<\/span>(colpkr).fadeOut(500<\/span>);\r\n            return<\/span> false<\/span>;\r\n        },\r\n        onChange<\/span>: function<\/span> (hsb, hex, rgb) {\r\n            $<\/span>('#colorSelector div'<\/span>).css('backgroundColor'<\/span>, '#'<\/span> +<\/span> hex);\r\n        }\r\n    });\r\n});\r\n<\/pre>\n
HTML Code:<\/b><\/p>\n
<div<\/span> id<\/span>=<\/span>\"colorSelector\"<\/span>><div<\/span> style<\/span>=\"background-color: #0000ff\"<\/span>><\/div<\/span>><\/div<\/span>>\r\n<\/pre>\n
CSS Code:<\/b><\/p>\n
#colorSelector<\/span> {\r\n    position<\/span>:<\/span> relative<\/span>;\r\n    width<\/span>:<\/span> 36px<\/span><\/span>;\r\n    height<\/span>:<\/span> 36px<\/span><\/span>;\r\n    background<\/span>:<\/span> url<\/span>(images\/select.png<\/span>);\r\n}\r\n#colorSelector<\/span> div<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    top<\/span>:<\/span> 3px<\/span><\/span>;\r\n    left<\/span>:<\/span> 3px<\/span><\/span>;\r\n    width<\/span>:<\/span> 30px<\/span><\/span>;\r\n    height<\/span>:<\/span> 30px<\/span><\/span>;\r\n    background<\/span>:<\/span> url<\/span>(images\/select.png<\/span>) center<\/span>;\r\n}\r\n<\/pre>\n
Attach Color Picker to Input Field<\/h2>\n
The following example attached color picker to text input field and use a callback function to update the color code with field’s value.<\/p>\n
JavaScript Code:<\/b><\/p>\n
$<\/span>(function<\/span>() {\r\n    $<\/span>('#colorpickerField'<\/span>).ColorPicker({\r\n        onSubmit<\/span>: function<\/span>(hsb, hex, rgb, el) {\r\n            $<\/span>(el).val(hex);\r\n            $<\/span>(el).ColorPickerHide();\r\n        },\r\n        onBeforeShow<\/span>: function<\/span> () {\r\n            $<\/span>(this<\/span>).ColorPickerSetColor(this<\/span>.value<\/span>);\r\n        }\r\n    })\r\n    .bind('keyup'<\/span>, function<\/span>(){\r\n        $<\/span>(this<\/span>).ColorPickerSetColor(this<\/span>.value<\/span>);\r\n    });\r\n});\r\n<\/pre>\n
HTML Code:<\/b><\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> maxlength<\/span>=\"6\"<\/span> size<\/span>=\"6\"<\/span> id<\/span>=<\/span>\"colorpickerField\"<\/span> value<\/span>=\"40ff00\"<\/span> \/>\r\n<\/pre>\n
Configuration Options<\/h2>\n
Color Picker jQuery plugin provides various options to customize the color picker widget. <\/p>\n
    \n
  • eventName<\/code> – The event to trigger the colorpicker. (Default: ‘click’)<\/li>\n
  • color<\/code> – The default color of colorpicker. (Default: ‘ff0000’)<\/li>\n
  • flat<\/code> – Whether the colorpicker is appended to the element. (Default: false)<\/li>\n
  • livePreview<\/code> – Whether the color value is set to the field while changing. (Default: true)<\/li>\n
  • onShow<\/code> – Callback function that triggered when the color picker is shown.<\/li>\n
  • onBeforeShow<\/code> – Callback function that triggered before the color picker is shown.<\/li>\n
  • onHide<\/code> – Callback function that triggered when the color picker is hidden.<\/li>\n
  • onChange<\/code> – Callback function that triggered when the color value is changed.<\/li>\n
  • onSubmit<\/code> – Callback function that triggered when the color is selected.<\/li>\n<\/ul>\n
    Conclusion<\/h2>\n
    There are various color picker plugins available with jQuery. But this color picker plugin is effective and easy to use. Also, you can customize the color picker widget design and images as per your site theme by editing the colorpicker.css file.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Color Picker is a graphical UI widget that is used to select colors. The user can select and adjust color values with Color Picker component. In the website, color picker widget allows the user to <\/p>\n","protected":false},"author":1,"featured_media":3269,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[318,16,299],"class_list":["post-3267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-colorpicker","tag-jquery","tag-plugin","cat-6-id","has_thumb"],"yoast_head":"\nAttach Color Picker to HTML Element using jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"jQuery Color Picker plugin - Add color picker widget to the website using jQuery. Simple jQuery plugin to attach color picker in HTML element. Example code to append flat color picker to element, attach color picker to DOMElement or input text field using jQuery.\" \/>\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.codexworld.com\/jquery-color-picker-attach-to-html-element\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Attach Color Picker to HTML Element using jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"jQuery Color Picker plugin - Add color picker widget to the website using jQuery. Simple jQuery plugin to attach color picker in HTML element. Example code to append flat color picker to element, attach color picker to DOMElement or input text field using jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-22T19:23:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-22T19:25:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Attach Color Picker to HTML Element using jQuery\",\"datePublished\":\"2018-05-22T19:23:11+00:00\",\"dateModified\":\"2018-05-22T19:25:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/\"},\"wordCount\":438,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png\",\"keywords\":[\"ColorPicker\",\"jQuery\",\"Plugin\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/\",\"name\":\"Attach Color Picker to HTML Element using jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png\",\"datePublished\":\"2018-05-22T19:23:11+00:00\",\"dateModified\":\"2018-05-22T19:25:41+00:00\",\"description\":\"jQuery Color Picker plugin - Add color picker widget to the website using jQuery. Simple jQuery plugin to attach color picker in HTML element. Example code to append flat color picker to element, attach color picker to DOMElement or input text field using jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"jquery-color-picker-plugin-attach-to-html-element-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/jquery-color-picker-attach-to-html-element\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Attach Color Picker to HTML Element using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Attach Color Picker to HTML Element using jQuery - CodexWorld","description":"jQuery Color Picker plugin - Add color picker widget to the website using jQuery. Simple jQuery plugin to attach color picker in HTML element. Example code to append flat color picker to element, attach color picker to DOMElement or input text field using jQuery.","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.codexworld.com\/jquery-color-picker-attach-to-html-element\/","og_locale":"en_US","og_type":"article","og_title":"Attach Color Picker to HTML Element using jQuery - CodexWorld","og_description":"jQuery Color Picker plugin - Add color picker widget to the website using jQuery. Simple jQuery plugin to attach color picker in HTML element. Example code to append flat color picker to element, attach color picker to DOMElement or input text field using jQuery.","og_url":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-05-22T19:23:11+00:00","article_modified_time":"2018-05-22T19:25:41+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Attach Color Picker to HTML Element using jQuery","datePublished":"2018-05-22T19:23:11+00:00","dateModified":"2018-05-22T19:25:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/"},"wordCount":438,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png","keywords":["ColorPicker","jQuery","Plugin"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/","url":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/","name":"Attach Color Picker to HTML Element using jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png","datePublished":"2018-05-22T19:23:11+00:00","dateModified":"2018-05-22T19:25:41+00:00","description":"jQuery Color Picker plugin - Add color picker widget to the website using jQuery. Simple jQuery plugin to attach color picker in HTML element. Example code to append flat color picker to element, attach color picker to DOMElement or input text field using jQuery.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png","width":1366,"height":768,"caption":"jquery-color-picker-plugin-attach-to-html-element-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/jquery-color-picker-attach-to-html-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Attach Color Picker to HTML Element using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/jquery-color-picker-plugin-attach-to-html-element-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-QH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3267"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3267\/revisions"}],"predecessor-version":[{"id":3270,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3267\/revisions\/3270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3269"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}