Nov 21 2006

jQuery-Plugin - colorGradient

veröffentlicht von Mathias Bank. Abgelegt unter: 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 ...
^

Bisher 18 Reaktionen

  1. # erobon 26. April 2007 at 14:43

    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 26. April 2007 at 15:00

    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 5. Mai 2007 at 17:11

    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 5. Mai 2007 at 17:20

    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 14. Juni 2007 at 3:53

    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 14. Juni 2007 at 19:33

    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 27. Juni 2007 at 5:17

    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 3. Juli 2007 at 10:53

    […] 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 11. September 2007 at 5:06

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

  10. # Os 40 Melhores Plugins do jQuery « Universo Faceson 22. September 2008 at 19:44

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

  11. # onnClick » Lista de Plugins jQueryon 30. April 2009 at 19:03

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

  12. # Lista de plugins para a biblioteca jQuery | Blog | PersonalWD.comon 6. Mai 2009 at 15:29

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

  13. # JQuery at it best!? Downloadable JQuery plugins and Widgets for you « Dogfeeds——IT Telescopeon 13. Juni 2009 at 14:42

    […] 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 28. Juli 2009 at 15:15

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

  15. # 40 Plugins jQuery « Sinhorinhoon 16. Oktober 2009 at 18:21

    […] 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 17. Oktober 2009 at 12:41

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

  17. # 40 plugins para jquery | Renan Limaon 19. Oktober 2009 at 12:06

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

  18. # Create A Stylish And Sleek Play-Station Portable Icon | PhotoshopDaily.infoon 11. März 2010 at 17:43

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

Trackback URI | Comments RSS

Die Klowand wartet auf dich! Beschreib sie!