CODEWITHSUNDEEP
javascriptjqueryajaxsvg
GSimon
GSimon

Reputation: 347

JQuery .load function only working in Chrome

After the page has loaded, I want to use JQuery to grab a data attribute from a div element, which contains a color value. I then want to apply the color value to the SVG images. This works fine in Chrome but not IE/Firefox:

$("div.socialmediaicons svg").load(function(event) { 

  var socialcoloractive = $(this).closest("div").data("socialcoloractive");
  var socialcolorinactive = $(this).closest("div").data("socialcolorinactive");

  TweenMax.to(".iconactive svg", 1.5, {
      fill: socialcoloractive,
  });
  TweenMax.to(".iconinactive svg", 1.5, {
      fill: socialcolorinactive,
  });

});

This closest I've found to a solution is this post: Jquery applying css to load div however I don't know how to modify my code using a callback.

Any help is appreciated, thanks.

Upvotes: 0

Views: 140

Answers (1)

pawel
pawel

Reputation: 36965

Since you have inline SVG elements I don't think you have to wait for them to load, but maybe Chrome fires a load event on them. Anyway, you just want to iterate over these elements and change the colors:

$("div.socialmediaicons svg").each(function() { 

  var socialcoloractive = $(this).closest("div").data("socialcoloractive");
  var socialcolorinactive = $(this).closest("div").data("socialcolorinactive");

  TweenMax.to(".iconactive svg", 1.5, {
      fill: socialcoloractive,
  });
  TweenMax.to(".iconinactive svg", 1.5, {
      fill: socialcolorinactive,
  });

});

Simplified demo: https://jsfiddle.net/zs0meqsh/

Upvotes: 1

Related Questions