CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John T
John T

Reputation: 1078

How do I dynamically change the gradient of a div with jQuery

I have a div with a gradient that I want the user to be able to change dynamically. The div style is:

<div id="colourGradientDiv" style="background: <?php echo $colour_start; ?>; background: -moz-linear-gradient(top,  <?php echo $colour_start; ?> 0%, <?php echo $colour_end; ?> 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,<?php echo $colour_start; ?>), color-stop(100%,<?php echo $colour_end; ?>)); background: -webkit-linear-gradient(top,  <?php echo $colour_start; ?> 0%,<?php echo $colour_end; ?> 100%); background: -o-linear-gradient(top,  <?php echo $colour_start; ?> 0%,<?php echo $colour_end; ?> 100%); background: -ms-linear-gradient(top,  <?php echo $colour_start; ?> 0%,<?php echo $colour_end; ?> 100%); background: linear-gradient(to bottom,  <?php echo $colour_start; ?> 0%,<?php echo $colour_end; ?> 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<?php echo $colour_start; ?>', endColorstr='<?php echo $colour_end; ?>',GradientType=0 );">

I am using Ajax to change the colour with the following code:

$("#colourGradientDiv").css({"background" : colour_start,
 "background" : "-webkit-gradient(linear, left top, left bottom, color-stop(0%, "+colour_start+"), color-stop(100%, "+colour_end+"))",
 "background" : "-webkit-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)",
 "background" : "-o-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)"
 "background" : "-ms-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)",
 "background" : "linear-gradient(to bottom, "+colour_start+" 0%, "+colour_end+" 100%)",
 "filter" : "progid:DXImageTransform.Microsoft.gradient( startColorstr='"+colour_start+"', endColorstr='"+colour_end+"',GradientType=0 )"
});

The above code doesn't chagne the div at all. However, if I just set the first "background" property then I change the whole colour of the div so I know that I'm addressing the div correctly and that the variable colour_start is correct.

Anyone know how to do this?

Upvotes: 0

Views: 1450

Answers (1)

dekajoo
dekajoo

Reputation: 2102

You can use jQuery to do something like :

$('#block').css({
background: "-webkit-gradient(linear, left top, left bottom, from($colour_start), to($colour_end))" 
});

And call this every time the client change the color of start or end.

Upvotes: 1

Related Questions