Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

This blog is part of 1 Tute Sets.

Javacript/jQuery Examples
Tute set by shristi.shandilya
9 Blogs
prev 1

  • Create color picker using javascript without using any external link/library/plugin

    @shristi.shandilya
    Recommendations Offline Message

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.24k
    Comment on it

    Hii,

    In this blog i am sharing an example of creating a color picker using javascript without using any external link/library/plugin.

    There  are many browser's addons tools and online tools available using which we can choose color code and apply, but if you want to learn how any color picker tool work and help developer to choose any color you must go through the example below.

    HTML:Html code we can use  as per the requirements.This is just an example in which color picker code is used.

    1. <h2>Choose any color from the color picker an apply it as button's text color</h2>
    2.  
    3.     <button class="jscolor {valueElement:'chosen-value', onFineChange:'setTextColor(this)'}">
    4.         Hii,choose any color from the color picker and apply it on the text inside button.
    5.     </button>
    6.  
    7.     HEX value: <input id="chosen-value" value="000000">
    8.     
    9.      <p>Note: Whether you write color code in rgb code or hex code,the code will appear as HEX code.</p>

    JAVASCRIPT:

    1. "use strict";
    2.  
    3.  
    4. if (!window.jscolor) { window.jscolor = (function () {
    5.  
    6.  
    7. var jsc = {
    8.  
    9.  
    10.     register : function () {
    11.         jsc.attachDOMReadyEvent(jsc.init);
    12.         jsc.attachEvent(document, 'mousedown', jsc.onDocumentMouseDown);
    13.         jsc.attachEvent(document, 'touchstart', jsc.onDocumentTouchStart);
    14.         jsc.attachEvent(window, 'resize', jsc.onWindowResize);
    15.     },
    16.  
    17.  
    18.     init : function () {
    19.         if (jsc.jscolor.lookupClass) {
    20.             jsc.jscolor.installByClassName(jsc.jscolor.lookupClass);
    21.         }
    22.     },
    23.  
    24.  
    25.     tryInstallOnElements : function (elms, className) {
    26.         var matchClass = new RegExp('(^|\\s)(' + className + ')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
    27.  
    28.         for (var i = 0; i < elms.length; i += 1) {
    29.             if (elms[i].type !== undefined && elms[i].type.toLowerCase() == 'color') {
    30.                 if (jsc.isColorAttrSupported) {
    31.                     // skip inputs of type 'color' if supported by the browser
    32.                     continue;
    33.                 }
    34.             }
    35.             var m;
    36.             if (!elms[i].jscolor && elms[i].className && (m = elms[i].className.match(matchClass))) {
    37.                 var targetElm = elms[i];
    38.                 var optsStr = null;
    39.  
    40.                 var dataOptions = jsc.getDataAttr(targetElm, 'jscolor');
    41.                 if (dataOptions !== null) {
    42.                     optsStr = dataOptions;
    43.                 } else if (m[4]) {
    44.                     optsStr = m[4];
    45.                 }
    46.  
    47.                 var opts = {};
    48.                 if (optsStr) {
    49.                     try {
    50.                         opts = (new Function ('return (' + optsStr + ')'))();
    51.                     } catch(eParseError) {
    52.                         jsc.warn('Error parsing jscolor options: ' + eParseError + ':\n' + optsStr);
    53.                     }
    54.                 }
    55.                 targetElm.jscolor = new jsc.jscolor(targetElm, opts);
    56.             }
    57.         }
    58.     },

    Note: Above javascript code is explained  briefly,Please check the file attached below to see the whole concept of color picker using  javascriptcode.

    Create color picker using javascript without using any external link/library/plugin
    HTML tags Javascript Blog
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: