User Tools


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>
 
<!-- or if jquery ui is not present
<script src="dom-drag.js"></script>
-->
 
<!-- colorpicker js and css -->
<link type="text/css" rel="stylesheet" href="colorpicker/css/colorpicker.css" />
<script src="colorpicker/js/colorpicker.js"></script>
 
 
<!-- gradx js and css -->
<link type="text/css" rel="stylesheet" href="gradX.css" />
<script src="gradX.js"></script>
 
</head>
<body>
 
<div id="my_own_div"></div>
 
<script>
//select your div the jQuery way
gradx('#my_own_div'); //just one line of code
</script>
</body>
</html>

Options

All of the below parameters are optional

1. type string ( default: linear )
The type of the gradient to be applied
The values can be linear | circle | ellipse
eg:

gradX("#div", { type: "circle" });




2. 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"
});




3. 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
});




4. 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"] 
});




5. 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
   }
 ]
});




6. 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%)
 ] 

eg:

gradX("#div", 
{
 type: "linear",
 direction: "top",
 code_shown: false,
 targets: [".my_target_class"],
 change: function(stops, styles) {
   for(var i=0; i<styles.length; i++;)  {  
       $("#some_div").css("background","styles[i]");
   }
 } 
});

Dependencies

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