GRADX

JQUERY GRADIENT SELECTOR





Download v.1.2          View Demo




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

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

Comments

kevin3ssen's picture

I'm using this plugin for a template-creator concept and it works really great.

Just one small suggestion: linear gradient can be diagonal aswell, so I've added 'left top', 'right top', 'left bottom' and 'right bottom' to the linear options. These options seem to work just fine (tested it in newest browsers of IE, Firefox and Chrome). It's a tiny thing to add, but makes it a bit more complete :)

choquo's picture

How do you get the full options of the last example? the rgb fields, i take the url of your last picture to see what it mean http://i.imgur.com/8Kay4Sj.png

thanks in advance.

itpal24's picture

Hello there, nice and clean work - bravo:)
Is there any easy way I could append saved styles from database?
...
The only way I see is to save $('#gradx').html(); to database before page load, and then replace new generated generated gradx with html from database..but it doesn't seem to work as dom was reloaded...any thoughts? Ajax, Json...

IT PAL

itpal24's picture

sliders: [
{

Thanks again:)

IT PAL

itpal24's picture

Can anyone suggest something for me..

$j.getJSON( "cellJson.php", function( json ) {
$j.each(json, function(i, item) {
var cellId = item.id;
var cellBg = item.cellBg; //where value for this test is == {color: "rgba(255, 255, 255, 0)", position: 0}
gradX("#gradx", {
targets: [cellId], // this not working
sliders: [
cellBg //this not working

The plugin loads with values undefined..?

IT PAL

cb597's picture

I really appreciate this great piece of Javascript, but I have some trouble to get it work on mobile touch devices. Especially the sliders cannot be dragged. Is there a quick fix?

richie.fredicson's picture

The plugin works perfect but I am not able to create more than one instance as everything is id based. Do have any alternate solution??

kushal4's picture

please guide me how to fetch value when am using gradial gradient from the database its using undefined when reloaded