www.webdeveloper.com
Results 1 to 2 of 2

Thread: Jscolor Script?

  1. #1
    Join Date
    May 2014
    Posts
    7

    Jscolor Script?

    I am using the jscolor picker for the user to select color of text. I need multiple color pickers on one page.

    I am using these functions, because the HEX needs to be converted to RGB for output.

    Javascript:
    Code:
    <script type="text/javascript">
    function updateInfo(color) {
        document.getElementById('info-r').value = color.rgb[0];
        document.getElementById('info-g').value = color.rgb[1];
        document.getElementById('info-b').value = color.rgb[2];
    }
    
    </script>
    
    
    <script type="text/javascript">
    function updateInfo(top-color) {
        document.getElementById('top-info-r').value = color.rgb[0];
        document.getElementById('top-info-g').value = color.rgb[1];
        document.getElementById('top-info-b').value = color.rgb[2];
    }
    </script>
    <script type="text/javascript" src="jscolor/jscolor.js"></script>

    HTML
    HTML Code:
    <input name="color" class="color{onImmediateChange:'updateInfo(this);'}" value="000000" size="9">
    <input type="hidden" id="info-r" name="colorr"/>
    <input type="hidden" id="info-g" name="colorg"/>
    <input type="hidden" id="info-b" name="colorb"/>
    
    
    <input name="top-color" class="color{onImmediateChange:'updateInfo(this);'}" value="000000" size="9">
    <input type="hidden" id="top-info-r" name="topcolorr"/>
    <input type="hidden" id="top-info-g" name="topcolorg"/>
    <input type="hidden" id="top-info-b" name="topcolorb"/>
    The first color picker is working Name = "color", this is the code pulled directly from jscolor's site.

    Any ideas why the second one is not pulling the RGB colors?



    Thanks

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    The object color is not define in the second function. The values color.rgb[0], color.rgb[1] and color.rgb[2] are not defined ! They must take the argument with : top-color.rgb[0], top-color.rgb[1] and top-color.rgb[2].
    Then the function is the same as the first, the name of the argument is only a local variable in the function which take the value with the function is called !

    There is no need of two functions. Perhaps could you define an other argument to distinguish the destination ?

    Code:
    function updateInfo(element,color) {
        document.getElementById(element+'-r').value = color.rgb[0];
        document.getElementById(element+'-g').value = color.rgb[1];
        document.getElementById(element+'-b').value = color.rgb[2];
    }
    Then the color piker call could be updateInfo('info',color) or updateInfo('top-info',top-color)
    Last edited by 007Julien; 05-13-2014 at 05:11 AM. Reason: complements

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles