Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery css gradient

Tags:

jquery

css

To have a gradient background on an element I do something like this:

.css('filter','progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#FFFFFF\', endColorstr=\'#'+event.backgroundColor+'\', gradientType=1)')
.css('background-image','-webkit-gradient(linear, left top, right bottom, color-stop(0.1, #FFFFFF), color-stop(0.99, #'+event.backgroundColor+'))')
.css('background-image','-moz-linear-gradient(top left, #FFFFFF 0%, #'+event.backgroundColor+' 100%)')
.css('background-image','-o-linear-gradient(top left, #FFFFFF 0%, #'+event.backgroundColor+' 100%)')

Now, isn't jQuery suppose to eliminate all the work related to cross-browser compatibility issues? is there any better way to do that. Without using any additional plugins?

like image 985
iLemming Avatar asked Apr 20 '11 19:04

iLemming


2 Answers

there is a jQuery plugin used to work with gradient. i have never used it but it looks simple

http://plugins.jquery.com/project/gradient

heres how to use it :

http://www.julien-verkest.fr/13/11/2007/jquery-gradient-le-plugin-qui-permet-de-creer-dynamiquement-des-backgrounds-degrades

or you could use use Gradientz

http://jquerystyle.com/2009/08/06/gradientz

Gradientz looks even more complete and easy to use. Up to you good luck buddy.

like image 140
Lil'Monkey Avatar answered Nov 13 '22 13:11

Lil'Monkey


Nope. jQuery doesn't have a native implementation of vendor-prefixes. Not very surprising, too; jQuery is a JavaScript library, designed to make JavaScript cross-browser.

Check out CSS3 Finalize for a plugin.

like image 29
Zirak Avatar answered Nov 13 '22 12:11

Zirak