jFlat

Concept of the plugin

Import the plugin

< script type = 'text/javascript' src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' ></ script > < script type = 'text/javascript' src = '/jquery.jFlat.js' ></ script >

using jFlat

< img width = "150px" height = "150px" id = "scream" src = "/twitter.png" alt = "The Scream" >

$( '#scream' ).jFlat({ def : "#1BA1E2;100" , click : "#A05000;75" , dblclick : "#0050EF;70" , focusout : "#A20025;70" , mousedown : "#1BA0E1;100" , mousemove : "#D80073;115" , mouseout : "#A2C139;167" , mouseover : "#6A00FF;65" , mouseup : "#339933;73" });

def default color and limit value click on mouse click dblclick on mouse double click focusout focus out event mousedown mouse out event mousemove mouse move event mouseout mouse out event mouseover mouse over event mouseup mouse up event

demo



original flat icon

original flat icon

def (default)

$( '#flatIconDef' ).jFlat({ def : "#1BA1E2;100" });



click

$( '#flatIconClick' ).jFlat({ click : "#15FFFF;210" });



dblclick

$( '#flatIconDblclick' ).jFlat({ dblclick : "#A05000;75" });



mousedown

$( '#flatIconMousedown' ).jFlat({ mousedown : "#0050EF;70" });



mousemove

$( '#flatIconMousemove' ).jFlat({ mousemove : "#A20025;70" });



mouseout

$( '#flatIconMouseout' ).jFlat({ mouseout : "#1BA0E1;100" });



mouseover

$( '#flatIconMouseover' ).jFlat({ mouseover : "#D80073;115" });



mouseup

$( '#flatIconMouseup' ).jFlat({ mouseup : "#A2C139;167" });



all at once

$( '#flatIconAll' ).jFlat({ def : "#1BA1E2;100" , click : "#15FFFF;210" , dblclick : "#0050EF;70" , focusout : "#A20025;70" , mousedown : "#1BA0E1;100" , mousemove : "#D80073;115" , mouseout : "#A2C139;167" , mouseover : "#6A00FF;65" , mouseup : "#339933;73" });



some color conversion factors (limit values)

color code limit value #A05000 75 #1BA1E2 100 #0050EF 70 #A20025 70 #1BA0E1 100 #D80073 115 #A2C139 167 #6A00FF 66 #339933 73 #D8C101 180 #008A00 60 #F09609 115 #A05000 68 #339933 73 #765F89 70 #6D8764 90

Thank You

Welcome to jFlat. This is the plugin to convert flat icons color. This plugin is only for HTML5 supported browsers. This plugin uses HTML5 canvas element to change flat icons color.1. jFlat plugin will identify the jFlat applied image elements.2. It will create HTML5-canvas element with same height and width of applied image element3. It will hide the applied image elementImport jQuery from google cdn and import jquery.jFlat.js pluginjFlat needs two components1. Color in hexadecimal format (example... #d4a967 )2. Color conversion factor (limit value) (0 - 255)Particular color will have particular color conversion factor (limit value). You can get this limit value of your favorite color by using tool change flat icons color online html :script :properties :