DAVID WEES

Thoughts from a 21st century educator.

Gradient jQuery plugin

August 18, 2007

This plugin requires the Dimensions plugin and jQuery version 1.1.3+.

It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

It uses the excellent jQuery JavaScript library developed by John Resig at http://jquery.com.

You can see some examples at http://www.davidwees.com/javascript/gradients/.

View the jquery.gradient.js file for information on settings and some simple examples.



Comments

please update....

submitted by on June 10, 2008

i love your gradient plugin but i am no javascript plugin guru...

wonder if u can update your code for future use....as dimensions plugin is now fully embedded into jquery 1.2.6 so no need for dimensions and also update your existing code accordingly...

aqeel
thanks...

It's a nice plugin, but

submitted by Inetgate on December 15, 2008

Hi, recently, I know this plug-in and it is attractive for me.
But when I use this plug-in with accordion plug-in with same page, some strange phenomenon occur.

For example, when I write gradient and accordion plug-in as below order,
accordion plug-in work, but gradient is gone.

--------------------------------------------------
$(function () {
$('#main').gradient({
from: 'fefefe',
to: 'cddcc3',
direction: 'horizontal'
});
});
$(function () {
$('ul.drawers').accordion({
header: 'h2.drawer-handle',
selectedClass: 'open',
event: 'mouseover'
});
});
--------------------------------------------------
But, when I write accordion and gradient order, gradient work and accordion now work.
Do you have any information about such situation?

Sincerely

Hrmm that seems interesting

submitted by David Wees on December 16, 2008

Hrmm that seems interesting to me. My plugin basically works by placing divs, each with a different background color and 1 pixel wide, across the element in question, and making the divs appear as part of the background of the element (by prepending them to the html in question, so they are rendered first in the DOM). My guess is that the accordion plugin is stripping this extra information?

Do you have Firebug? Maybe you can do some investigation with the "inspect this" feature and see if the additional elements created by my plugin are still present.

Dave

Gradientz

submitted by jonah fox on January 16, 2009

You might want to check out :

http://www.parkerfox.co.uk/labs/gradientz

Should be faster and allows angled gradientz

Doesn't work in IE 8

submitted by Anonymous on November 1, 2009

Your gradientz page is not working in IE 8.

Hrmm. Thanks for the

submitted by David Wees on November 1, 2009

Hrmm. Thanks for the feedback. I haven't touched this script in at least a year. If anyone sees a fix, I'm willing to post it here.

IE8 support

submitted by guy sandler on December 10, 2009

have you fix the problem. i'd test some workaround haven't found sometting good.

If you want to sponsor a bug

submitted by David Wees on December 11, 2009

If you want to sponsor a bug fix (with anyone) that would be fine with me, but I'm working full time now as a mathematics teacher and won't have time to look at this for a long time I suspect.

Apply to body not DIV

submitted by Chewy on February 4, 2009

Hi

How would it be applied to a page background not just a child div ??

Thanks in advance

How about $(body) 

submitted by David Wees on February 5, 2009

How about


$(body)
  .gradient({ 
     rightcolor: '#00ff00', 
     leftcolor: '#00ffff', 
     opacity: 80
   });

or


$(document.body)
  .gradient({ 
     rightcolor: '#00ff00', 
     leftcolor: '#00ffff', 
     opacity: 80
   });

How do you clear a gradient?

submitted by Alex on March 24, 2009

I'd like to show a gradient on hover.over and then remove it on hover.out. Is there a clean way to do that?

Ex:
$('.navbarItem').hover(
 function () {
  $(this).gradient({ from: 'efefef', to: 'dddddd' });
 },
  function () {
  // What goes here?
 }
);

Thanks a lot,
Alex

Re: How do you clear a gradient?

submitted by Alex on March 24, 2009

This seems to do it:

 $('.navbarItem').hover(
 function () {
  // Mouse over, first hide any gradients that have not been hidden.
  $('.navbarItem').children(".gradient").hide();

  // Turn on the gradient for this item.
  $(this).gradient({ from: 'dddddd', to: 'aaaaaa' });
 },
 function () {
  // Mouse out (this doesn't always get called), hide the gradient.
  $('.navbarItem').children(".gradient").hide();
 }
 );

What about this instead? I

submitted by David Wees on March 26, 2009

What about this instead? I think your version will suffer from performance penalties.


$('.navbarItem').hover(
function () {
// Mouse over, first hide previous gradients for all other navigation elements.
$('.navbarItem').children(".gradient").hide();
if ($(this).hasClass('hasGradient')) {
// Show the gradient for this item.
$(this).children('.gradient').show();
}
else {
// Create a new gradient for this element
$(this).addClass('hasGradient').gradient({ from: 'dddddd', to: 'aaaaaa' });
}
},
function () {
// Mouse out (this doesn't always get called - must be a bug), hide the gradient.
$('.navbarItem').children(".gradient").hide();
}
);

vertical gradient not working?

submitted by Anonymous on January 4, 2010

Hi there,

THanks for this post it's a really neat solution!

However I can't seem to get the vertical gradient working. Wonder if you could help?

$(function () {
$('div#header_banner').gradient({
topcolor: '#ff5500',
bottomcolor: '#ffffff',
horizontal: false,
opacity: 50
});
})

Appreciate your suggestion. THanks!

I think I'll need a live

submitted by David Wees on January 8, 2010

I think I'll need a live non-working example, in my simple test sites, what you are demonstrating seems to work. Can you post a link?

Dave

Twitter Follow me on Twitter

Subscribe Subcribe to my blog