Nov 21 2006
jQuery-Plugin – colorGradient
I needed a plugin, that will create a list of colors. This colors should be calculated by using two given colors (start and end color) and a calculation method like “linear” or “trigonometrical”. So I have started to create a new jQuery plugin (yes, it makes fun), which could solve this. It extends jQuery with these functions:
- hex2rgb
- rgb2hex
- checkRGB
- checkHex
- calculateColor
- and other helper functions
I have also added a function to set the color at jQuery objects. You can call…
$(‘#list1 li’).colorize(‘#ff1313′, ‘#00F400′, [1,1,1],”color”);
… to set the color attribute for all list elements in “#list1″ to colors, starting with ‘#ff1313′, ending with ‘#00F400′ and using linear transformation.
The code can be downloaded here. And there is also an example.
32 responses so far
Loading ...
Nice JQuery extension.
Is their a way to make it working with .each ?
Here’s my code:
$(document).ready( function () {
$(‘div.footer-div’).each(function(i){
$(this).colorize(‘#fff’, ‘#000′, [1, 1, 1], ‘background-color’);
});
});
Is it possible to have all selected elements colorized using the same gradient ?
thanks!
erob
You don’t need to use each to colorize your divs with the same gradient. Just use
$(’div.footer-div’).colorize(’#fff’, ‘#000′, [1, 1, 1], ‘background-color’);
Tried that, it doesnt quite work here. Well, it *does* colorize all the divs using the linear algorithm, but I would like to repeat the same “linear” gradient for each matched elements…
Is their something I missed ?
Thanks a lot
JQuery (1.1.2) version: $Date: 2007-05-01 22:41:57 -0400 (Mar, 01 mai 2007) $
Well, I think, I don’t understand your problem. You have divs with class “footer-div” And you want to colorize these divs from one color to another? Or do you want to colorize other elements in these divs?
Yeah, i am having no luck getting a gradient background on a div. Could you include this on your example page if it works? This is awesome!
Do you want a gradient background for one div? Than, this extension won’t help. You need an image to achieve this. This extension helps you to create a gradient with more than one div.
Hey Mathias and Travis … I just created a new plugin for jQuery that adds a configurable gradient to the background of an element without the use of images. You can find it here: http://blog.brandonaaron.net/2007/06/26/new-plugin-gradient/
[...] colorGradient, de Mathias Bank, nos permitirá crear gradientes entre dos colores dados, tanto por método lineal como trigonométrico. [...]
[...] 14. ColorGradient ~ cria gradient em elementos com as cores selecionadas. [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] ColorGradient – cria gradient em elementos com as cores [...]
[...] ColorGradient – cria gradient em elementos com as cores [...]
[...] colorGradient Extends jQuery to calculate colors using two different colors and a transformation method. It also allows to set these colors to given elements, using jQuery syntax. [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] Mathias Bank » jQuery-Plugin – colorGradient [...]
[...] Mathias Bank » jQuery-Plugin – colorGradient [...]
[...] Mathias Bank » jQuery-Plugin – colorGradient [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] ColorGradient [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] Mathias Bank » jQuery-Plugin – colorGradient [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] Mathias Bank » jQuery-Plugin – colorGradient [...]
[...] Mathias Bank » jQuery-Plugin – colorGradient [...]
[...] ColorGradient ~ cria gradient em elementos com as cores [...]
[...] 14. ColorGradient ~ cria gradient em elementos com as cores selecionadas. [...]
[...] 14. ColorGradient ~ cria gradiente em elementos com as cores selecionadas. [...]
[...] hermano de jqModal, es un plugin para añadir efectos de arrastrar y soltar (darg & drop)colorGradient, de Mathias Bank, nos permitirá crear gradientes entre dos colores dados, tanto por método lineal [...]
[...] ColorGradient: cria gradient em elementos com as cores selecionadas. [...]