How to get this to work on my page?

[roman777]

I’m trying to install this JS confetti (https://codepen.io/anon/pen/JMOQzE) one of my pages (https://agentmatch.com/evaluate/buying/complete/) but it doesn’t appear to work. I placed the javascript and css in their respective “content” on the sidebar in X builder, and then placed <div class="wrapper"></div> in a content area element. It creates a big white area but no confetti

What am I doing wrong?
Thanks.
R

[ruenel]

Hello Roman,

Thanks for writing in! Your JS code is not working because it is incorrect. Please have it updated and use this:

(function($){
  for (var i = 0; i < 250; i++) {
    create(i);
  }

  function create(i) {
    var width = Math.random() * 8;
    var height = width * 0.4;
    var colourIdx = Math.ceil(Math.random() * 3);
    var colour = "red";
    switch(colourIdx) {
      case 1:
        colour = "yellow";
        break;
      case 2:
        colour = "blue";
        break;
      default:
        colour = "red";
    }
    $('<div class="confetti-'+i+' '+colour+'"></div>').css({
      "width" : width+"px",
      "height" : height+"px",
      "top" : -Math.random()*20+"%",
      "left" : Math.random()*100+"%",
      "opacity" : Math.random()+0.5,
      "transform" : "rotate("+Math.random()*360+"deg)"
    }).appendTo('.wrapper');  
    
    drop(i);
  }

  function drop(x) {
    $('.confetti-'+x).animate({
      top: "100%",
      left: "+="+Math.random()*15+"%"
    }, Math.random()*3000 + 3000, function() {
      reset(x);
    });
  }

  function reset(x) {
    $('.confetti-'+x).animate({
      "top" : -Math.random()*20+"%",
      "left" : "-="+Math.random()*15+"%"
    }, 0, function() {
      drop(x);             
    });
  }  
})(jQuery);

If this does not work, please contact the original creator of the code. They are more familiar with this code and should be able to fix the issue in no time.

Regards.

[roman777]

Worked wonderfully. Thank you so much!

[nabeel]

Glad it worked.

Cheers!