How to apply CSS color on parent element using a color picker?

Tags: javascript,jquery,html,css

Problem :

I have a color picker which appears by clicking on pencil glyphicon. I just want to apply color from color picker on list elements i.e. which is grand parent of pencil glyphicon. I have a following ruby front end code:

 <% categories.each(function (category) { %>
    <li id="<%= %>" class="Round-boxes my-sortable">

      <% if(category.get("is_owner")) { %>   
        <div class="color-picker-pencil picker">
           <span class="glyphicon glyphicon-pencil"></span>
      <% } %> 
  <% }); %>

I am following this tutorail according to which I have a following JS code with a slighter change.

JS code:

 applyColor: function(event) {
   myel = $(
     layout: 'hex',
     submit: 0,
     colorScheme: 'dark',
     onChange: function(hsb, hex, rgb, myel, bySetColor) {

       $(myel).css('background-color:', '#' + hex);
   }).keyup(function() {



What Should i do to achieve this ? Thanks in advance.

Solution :

It was just a syntax error in applyColor function and a little code change, I replaced following code in place of existing:

    applyColor: function(event){
      onChange:function(hsb,hex,rgb,myel,bySetColor) {

        myel = $(myel).parent();






And every thing works fine. See the line two lines of code inside onChange body. And compare it with code in question.

    CSS Howto..

    How to put an image at the left side of text without putting the image into css

    How to create different and unique ID for some class in css?

    How can I apply same style from element that changes in HTML to one that doesn't change in HTML?

    How to create two CSS transitions in parallel on nested elements

    How do I scale the size of the elements in my HTML according to screen size?

    How do I detect that facebook app is loading page to change CSS?

    How to position some text?

    Javascript slideshow that gradually zooms on image [closed]

    How is “:after” element's height and width determined? [closed]

    How to refer to an image with a certain id thats into a section with a certain id - CSS

    How to tell what in CSS files that is not used? [duplicate]

    how to remove the css overflow:hidden of jquery dialog

    How to read a browser's unsupported CSS properties?

    How to create icons like font awesome

    How to display certain content underneath another block of content

    How can I add padding to an element on my page?

    HTML / CSS: How to make the content follow the footer?

    How to get actual (not original) height of a CSS-rotated element

    How to put six divs in two rows

    How can I slow down my CSS Animated Text transitions?

    css: how to center box div element directly in center?

    Simple CSS layout - how can I achieve this layout, and make it scale easily?

    How to make the width of a div in the middle responsive

    How can i set png icon collection with CSS?

    How to make div scroll down with a page once it reaches top of page?

    How to make IE respect max AND min-width [duplicate]

    How to use display:flex in CSS to create a mix of fixed with and dynamic proportional width columns?

    How to remove hover effect for some of the cells in angularjs

    how to move image vertically with css [closed]

    How to make Google Preview Button display in a CSS pop-up?