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="<%= category.id %>" class="Round-boxes my-sortable">

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

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

JS code:

 applyColor: function(event) {
 
   myel = $(event.target).parent().parent()
   console.log(myel);
   $('.picker').colpick({
     layout: 'hex',
     submit: 0,
     colorScheme: 'dark',
     onChange: function(hsb, hex, rgb, myel, bySetColor) {

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

     $(this).colpickSetColor(this.value);

   });

 }
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){
    $('.picker').colpick({
      layout:'hex',
      submit:0,
      colorScheme:'dark',
      onChange:function(hsb,hex,rgb,myel,bySetColor) {

        myel = $(myel).parent();
        $(myel).css('background-color','#'+hex);

      }

    }).keyup(function(){

    $(this).colpickSetColor(this.value);

    });

  }

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 customize responsive columns and inputs fields in twitter bootstrap?

    How to create flexible div items that break after the line?

    CSS - how to make image container width fixed and height auto stretched

    how to make a css border for div

    How granular are CSS rem units?

    CSS - How to center a DIV menu

    Menu CSS showing current page in a single html file

    How do I make this lightbox I am creating only open on the div I am clicking?

    How can I remove borders around images on Blogger? [closed]

    How to make an item background visible on overflow?

    How to vertical align top in my case

    How To Center Align Menu Through CSS?

    How to get drop down menu sub lists to line up vertically

    jQuery: How can I set css with own width?

    How to make an element remain inline

    How do i prevent my CSS affecting external plugins?

    xHTML/CSS: How to make inner div get 100% width minus another div width

    How does this site hide the iframe scrollbar?

    How I can change the position of 3 div's to be side by side?

    How can I align the tops of two paragraphs in this example without resorting to an empty header? (e.g.,

     

    )

    How to Skew divs with css

    How do i make this form same on all browsers?

    How can I set inline css styles for an element with javascript?

    How to place Social media icons on right side of navbar

    CSS how to postiton div outside main container without it moving over the container on window re-size? [closed]

    css: how to put text between two images side by side?

    How to not send images to mobiles in a semantic manner

    How to access an element's class value via CSS

    Pure CSS3 show/hide full height div with transition

    How to right and left align every alternate list item in html and css along with the bullets