Simple Jquery function not working on IE
Question
I'm developing website and now I have to make this work on various browsers. So I have this code.
<script>
var colors = new Array(
[62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0, 1, 2, 3];
//transition speed
var gradientSpeed = 0.002;
function updateGradient() {
if ($ === undefined) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
}).css({
background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
});
step += gradientSpeed;
if (step >= 1) {
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient, 10);
</script>
<style>
#gradient {
width: 100%;
height: 800px;
padding: 0px;
margin: 0px;
}
</style>
<body id="gradient" style="height:90vh; opacity:0">
</body>
And I do link a jquery min library. Everything work fine in Firefox, chrome, even Microsoft Edge, Safari. Is it that IE just doesn't support jquery or what?
2 answers
solution1
0 2016-09-05 09:17:40
@pwan your javascript looks fine. Only problem is the vh unit.
Try giving height in px for the #gradient div.
Please have a look. http://caniuse.com/#search=vh
solution2
0 2016-09-05 09:25:27
You have to add Gradient support for IE10 and above also in your javascript as:
$('#gradient').css({
background: "linear-gradient(to right, " + color1 + " 0%, " + color2 + " 100%)"}).css({
background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))" }).css({ background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"});
For IE CSS3 rule will be like this for Gradient :
background: linear-gradient(to right, rgb(234, 35, 115) 0%, rgb(255, 31, 115) 100%);
Here's working Codepen for a better understanding.
As far as browser supports and better explanation you can refer this url
Gradient won't work on below IE10 for that you have to use alternatives like:
/* Fallback (could use .jpg/.png alternatively) */
background-color: red;
/* SVG fallback for IE 9 (could be data URI, or could use filter) */
background-image: url(fallback-gradient.svg);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.