CODEWITHSUNDEEP
javascriptcssgradient
Naga
Naga

Reputation: 2555

Unable to set gradient color to DOM Elements through javascript

can we set -moz-linear-gradient through javascript. Unable to set gradient color to dropdown items in menu bar. Here is the JSFiddle

var coll = document.getElementById('menu-preview').getElementsByClassName('dropdown-1column');
 if ( coll != null) {
      for (var i = 0; i < coll.length; i++) {
        coll[i].style.backgroundImage = "-moz-linear-gradient(top, #f1f471, #ffcc33)";
        coll[i].style.backgroundImage = "-webkit-gradient(linear, 0% 0%, 0% 100%,    
          from(#f1f471), to(#ffcc33))";
        coll[i].style.backgroundImage = "linear-gradient(top, #f1f471, #ffcc33)";
        }
    }

UPDATE-7-25:2322IS

I even tried JQuery way still no luck, some how gradient not reflecting for DOM items created runtime

                $('#backcolor').on('change', function () {
                var color = $(this).val();
                document.getElementById("menu-preview").style.backgroundColor = color;
                var gradient = getSimilarColors(color);
                $('.dropdown-1column').css('background', '-moz-linear-gradient(top,' + color + ',' + gradient + ')');
                $('.dropdown-1column').css('background', '-webkit-gradient(linear, 0% 0%, 0% 100%, from(' + color + '),' + 'to(' + gradient + '))');
                $('.dropdown-1column').css('background', 'linear-gradient(top,' + color + ',' + gradient + ')');
            });

UPDATE 7-25:2335IS

Thanks @nsthethunderbolt for correcting issue with typo taken almost half a day...should be dropdown1-column instead dropdown-1column. Thanks man, you saved my day!

Upvotes: 0

Views: 799

Answers (1)

nsthethunderbolt
nsthethunderbolt

Reputation: 2097

Updated your fiddle: http://jsfiddle.net/586Ru/4/

and 

    var coll = document.getElementById('menu-preview').getElementsByClassName('dropdown1-column');
console.log(coll)
                if ( coll != null) {
                 //   console.log(coll)
                    for (var i = 0; i < coll.length; i++) {
coll[i].style.background = "-moz-linear-gradient(top, #f1f471, #ffcc33)";

coll[i].style.background = "-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f471), to(#ffcc33))";
coll[i].style.background = "linear-gradient(top, #f1f471, #ffcc33)";
                    }
                }

works well, but your dropdown hovering is not correct, you have to work on that.

Upvotes: 1

Related Questions