CODEWITHSUNDEEP
jqueryjquery-pluginsjpicker
Peter Blomgren
Peter Blomgren

Reputation: 47

jPicker live update of font color

First off I love the jPicker javascript. It functions very well for backgrounds. I have it working wonderfully with one small problem (that I think is my fault or is a feature not included in the program). What I want to know is can jPicker be used to change font colors as well as backgrounds. I have a site that uses jPicker like this:

In the header

<script type="text/javascript">
  $(document).ready(
    function()
    {
      var LiveCallbackElement = $('#Live'),
          LiveCallbackButton = $('#LiveButton');  // you don't want it searching this on every live callback!!!
      $('#Callbacks').jPicker(
        {},
        function(color, context)
        {
          var all = color.val('all');
          alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none'));
          $('#Commit').css(
            {
              backgroundColor: all && '#' + all.hex || 'transparent'
            }); // prevent IE from throwing exception if hex is empty
        },
        function(color, context)
        {
          if (context == LiveCallbackButton.get(0)) alert('Color set from button');
          var hex = color.val('hex');
          LiveCallbackElement.css(
            {
              backgroundColor: hex && '#' + hex || 'transparent'
            }); // prevent IE from throwing exception if hex is empty
        },
        function(color, context)
        {
          alert('"Cancel" Button Clicked');
        });      
      $('#Callbacks2').jPicker(
        {},
        function(color, context)
        {
          var all = color.val('all');
          alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none'));
          $('#Commit').css(
            {
              fontColor: all && '#' + all.hex || 'transparent'
            }); // prevent IE from throwing exception if hex is empty
        },
        function(color, context)
        {
          if (context == LiveCallbackButton.get(0)) alert('Color set from button');
          var hex = color.val('hex');
          LiveCallbackElement.css(
            {
              fontColor: hex && '#' + hex || 'transparent'
            }); // prevent IE from throwing exception if hex is empty
        },
        function(color, context)
        {
          alert('"Cancel" Button Clicked');
        });
   });
</script>

then in the body

<span id=”Live” style=”display: block; height: 72px; margin: 10px; width: 192px;”>
  <h1> Primary Text </h1>
  <h2> Secondary Text </h2>
</span>
<p>
  Please select your Background color:
</p>
<input id=”Callbacks” type=”text” value=”FFFFFF” />
<p>Please select your Text Color:</p>
<input id=”Callbacks2” type=”text” value=”000000” />

If you try the code the background works perfectly however, the text color does not change. You will note that I created a Callbacks2 function and changed backgroundColor to fontColor. Hoping that the CSS elements background-color and font-color would be changed. I have minimal java programming experience and tried to read the code but got overwhelmed quickly. Also the full page will have 2 text colors h1 and h2 will the “Live update” support this or will it need “Commit” only on text or am I just trying to do something this script was never intended for? Thanks for any help in advance.

Upvotes: 0

Views: 570

Answers (1)

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

Maybe I am late. But could be helpful for visiting users. As you can see that when setting color it is using jQuery's .css function so therefor use same variable names as used in jQuery. So instead of 

        $('#Commit').css(
        {
          fontColor: all && '#' + all.hex || 'transparent'
        }); // prevent IE from throwing exception if hex is empty

use

        $('#Commit').css(
        {
          color: all && '#' + all.hex || 'transparent'
        }); // prevent IE from throwing exception if hex is empty

Hope that helps. And yes jPicker is a good and well-maintained library.

Upvotes: 0

Related Questions