Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Create color picker using javascript without using any external link/library/plugin

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.1k
    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.

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

    JAVASCRIPT:

    "use strict";
    
    
    if (!window.jscolor) { window.jscolor = (function () {
    
    
    var jsc = {
    
    
    	register : function () {
    		jsc.attachDOMReadyEvent(jsc.init);
    		jsc.attachEvent(document, 'mousedown', jsc.onDocumentMouseDown);
    		jsc.attachEvent(document, 'touchstart', jsc.onDocumentTouchStart);
    		jsc.attachEvent(window, 'resize', jsc.onWindowResize);
    	},
    
    
    	init : function () {
    		if (jsc.jscolor.lookupClass) {
    			jsc.jscolor.installByClassName(jsc.jscolor.lookupClass);
    		}
    	},
    
    
    	tryInstallOnElements : function (elms, className) {
    		var matchClass = new RegExp('(^|\\s)(' + className + ')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
    
    		for (var i = 0; i < elms.length; i += 1) {
    			if (elms[i].type !== undefined && elms[i].type.toLowerCase() == 'color') {
    				if (jsc.isColorAttrSupported) {
    					// skip inputs of type 'color' if supported by the browser
    					continue;
    				}
    			}
    			var m;
    			if (!elms[i].jscolor && elms[i].className && (m = elms[i].className.match(matchClass))) {
    				var targetElm = elms[i];
    				var optsStr = null;
    
    				var dataOptions = jsc.getDataAttr(targetElm, 'jscolor');
    				if (dataOptions !== null) {
    					optsStr = dataOptions;
    				} else if (m[4]) {
    					optsStr = m[4];
    				}
    
    				var opts = {};
    				if (optsStr) {
    					try {
    						opts = (new Function ('return (' + optsStr + ')'))();
    					} catch(eParseError) {
    						jsc.warn('Error parsing jscolor options: ' + eParseError + ':\n' + optsStr);
    					}
    				}
    				targetElm.jscolor = new jsc.jscolor(targetElm, opts);
    			}
    		}
    	},

    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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: