Nov 21 2006

jQuery-Plugin - colorGradient

Published by Mathias Bank. Filed under: jQuery

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…

… 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.

1 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...
^

18 responses so far

  1. # erobon 2007-04-26 at 2.43 pm

    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

  2. # Mathias Bankon 2007-04-26 at 3.00 pm

    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’);

  3. # erobon 2007-05-05 at 5.11 pm

    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) $

  4. # Mathias Bankon 2007-05-05 at 5.20 pm

    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?

  5. # Travis Dahlon 2007-06-14 at 3.53 am

    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!

  6. # Mathias Bankon 2007-06-14 at 7.33 pm

    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.

  7. # Brandon Aaronon 2007-06-27 at 5.17 am

    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/

  8. # Propiedad Privada » Blog Archive » De web variaon 2007-07-03 at 10.53 am

    […] colorGradient, de Mathias Bank, nos permitirá crear gradientes entre dos colores dados, tanto por método lineal como trigonométrico. […]

  9. # Os 40 Melhores Plugins da jQuery para facilitar a vida do Desenvolvedor Web | PedroMenezes.comon 2007-09-11 at 5.06 am

    […] 14. ColorGradient ~ cria gradient em elementos com as cores selecionadas. […]

  10. # Os 40 Melhores Plugins do jQuery « Universo Faceson 2008-09-22 at 7.44 pm

    […] ColorGradient ~ cria gradient em elementos com as cores […]

  11. # onnClick » Lista de Plugins jQueryon 2009-04-30 at 7.03 pm

    […] ColorGradient - cria gradient em elementos com as cores […]

  12. # Lista de plugins para a biblioteca jQuery | Blog | PersonalWD.comon 2009-05-06 at 3.29 pm

    […] ColorGradient - cria gradient em elementos com as cores […]

  13. # JQuery at it best!? Downloadable JQuery plugins and Widgets for you « Dogfeeds——IT Telescopeon 2009-06-13 at 2.42 pm

    […] 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. […]

  14. # O Informante » Os 40 Melhores Plugins da jQueryon 2009-07-28 at 3.15 pm

    […] ColorGradient ~ cria gradient em elementos com as cores […]

  15. # 40 Plugins jQuery « Sinhorinhoon 2009-10-16 at 6.21 pm

    […] ColorGradient ~ cria gradient em elementos com as cores […]

  16. # Os 40 Melhores Plugins da jQuery para facilitar a vida do Desenvolvedor Web « Webdesign – Fast and Furiouson 2009-10-17 at 12.41 pm

    […] ColorGradient ~ cria gradient em elementos com as cores […]

  17. # 40 plugins para jquery | Renan Limaon 2009-10-19 at 12.06 pm

    […] ColorGradient ~ cria gradient em elementos com as cores […]

  18. # Create A Stylish And Sleek Play-Station Portable Icon | PhotoshopDaily.infoon 2010-03-11 at 5.43 pm

    […] Mathias Bank » jQuery-Plugin - colorGradient […]

Trackback URI | Comments RSS

Leave a Reply