CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Electrons_Ahoy
Electrons_Ahoy

Reputation: 38653

Gradient fill using jQuery?

I've got a <div> that needs a gradient background. However, the size of the div is variable, which lands me back in "can't do gradients in CSS" land.

However, I'm pretty sure this is possible in jQuery, I just can't seem to find a decent example. Does anyone have something they can point my way?

Thanks.

Upvotes: 3

Views: 5242

Answers (6)

lukas56z
lukas56z

Reputation: 157

Why not calculate the gradiant to be larger than the div and hide the excess in overflow so on resize the rest is revealed?

Upvotes: 0

Babak Bandpay
Babak Bandpay

Reputation: 177

in case that someone needs this, and if you think that the jQuery plugin is too heavy, you can use this

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A622', endColorstr='#00B726'); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#00A622), to(#00B726)); /* for webkit browsers */

background: -moz-linear-gradient(top,  #00A622, #00B726); /* for firefox 3.6+ */

Upvotes: 5

Andy
Andy

Reputation: 9058

The Background Canvas plugin lets you do that sort of thing and more.

Upvotes: 1

Pierre
Pierre

Reputation: 35306

Not Jquery but a suggestion: you could generate your gradient with SVG: http://www.w3schools.com/svg/svg_grad_linear.asp

Upvotes: 2

Bryan A
Bryan A

Reputation: 3634

Is it absolutely necessary to generate the gradient rather than simply create one in your favorite graphics program? Might be more efficient to save resources by simply tiling a graphic.

Upvotes: 0

Hexagon Theory
Hexagon Theory

Reputation: 44823

While this will most likely give you precisely what you want, there seem to be quite a few potential collisions. Give it a shot, though; if it fails, I recommend generating the gradient server-side.

Upvotes: 2

Related Questions