How to use gradx?

The most basic example is given below :


<html>
<head>
<title>gradx example</title>
 
<script src="lib/js/jquery.js"></script>
<script src="lib/js/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet"href="colorpicker/css/colorpicker.css" />
<script src="colorpicker/js/colorpicker.js"></script>
 
 
<link type="text/css" rel="stylesheet" href="gradX.css" />
<script src="gradX.js"></script>
 
</head>
<body>
 
<div id="my_own_div"></div>
 
<script>
gradx('#my_own_div'); 
</script>
</body>
</html>


Options

All of the below parameters are optional

  • type string ( default: linear )
  • The type of the gradient to be applied

    The values can be linear | circle | ellipse eg:

    
    gradX("#div", { type: "circle" });
    
  • direction string ( default: left )
  • The direction in which the gradient will be filled if type is linear: left | right | top | bottom if type is circle or ellipse: left | center | right , top | center | bottom eg:

    
    gradX("#div", 
    {
     type: "ellipse",
     direction: "left , center"
    });
    
  • code_shown boolean ( default: false )
  • The gradient code should be visible on load true | false eg:

    
    gradX("#div", 
    {
     type: "circle",
     direction: "center , center",
     code_shown: true
    });
    

  • targets Array ( default: [] )
  • The gradient styles will be applied `onchange` on the supplied targets [ ”#id” , ”.class” , ….. ] eg:

    
    gradX("#div", 
    {
     type: "linear",
     direction: "top",
     code_shown: false,
     targets: [".my_target_class"] 
    });
    

  • sliders a.k.a color stoppers Array of Objects ( default: [] )
  • If no sliders are passed gradx will be loaded with two sliders at random positions and with random colors

    
    
    [  
      {
       color: "COLOR",
       position: "POSITION" //0 to 100 without % symbol 
      }, 
      { 
       .... 
       .... 
      }, 
     ....
    ]
    

    You can also use the functions gradx.get_random_position() and gradx.get_random_rgb() to retrieve random position and color respectively eg:

    
    
    gradX("#div", 
    {
     type: "circle",
     direction: "center center",
     code_shown: false,
     targets: [".my_target_class", "#extra"],
     sliders: [
       {
         color: "rgb(199, 179, 195)",
         position: 7
       },
       {
         color: "red",
         position: 86
       }
     ]
    });
    

  • onchange function ( default: function() {} )
  • The supplied function will be called when the style is changed with the parameters sliders and styles The sliders is the array of objects of sliders present and styles is an array of generated CSS values \\eg array:


[ 
 linear-gradient(left, rgb(199, 179, 195) 41%, rgb(222, 71, 71) 86%), 
 -o-linear-gradient(left, rgb(199, 179, 195) 41%, rgb(222, 71, 71) 86%),
 -ms-linear-gradient(left, rgb(199, 179, 195) 41%, rgb(222, 71, 71) 86%),
 -moz-linear-gradient(left, rgb(199, 179, 195) 41%, rgb(222, 71, 71) 86%),
 -webkit-linear-gradient(left, rgb(199, 179, 195) 41%, rgb(222, 71, 71) 86%)
 ] 

Dependencies

  • jQuery library
  • jQuery UI draggable [if not available, include the supplied file dom-drag.js]
  • colorpicker [included in the folder]