Adding jQuery to DIV element?

Question

I've got this bit of code I'd like to add and restrict to a single DIV classed .third However, whenever I link the bit of code, it doesn't work. If I embed the code within the div, it works but it's restricted to the top of the page. Here's the HTML:

<div class="third">
</div>

And here's the jQuery:

function Particle() {
    this.path = 'images/';
    this.images = ['particle1.svg', 'particle2.svg'];
    //Randomly pick a particle model
    this.image = this.images[randomInt(this.images.length)];
    this.file = this.path + this.image;
    //Create a DOM for this model
    this.element = document.createElement('img');
    //A sequence of Core Actions to Take:
    this.speed().newPoint().display().newPoint().fly();
  }
  //Generate a random speed
  Particle.prototype.speed = function() {
    this.duration = (randomInt(10) + 5) * 3000;
    return this;
  };
  //Generate a random position
  Particle.prototype.newPoint = function() {
    this.pointX = randomInt(window.innerWidth - 100);
    this.pointY = randomInt(window.innerHeight - 100);
    return this;
  };
  //Display the particle
  Particle.prototype.display = function() {
    $(this.element)
        .attr('src', this.file)
        .css('position', 'absolute')
        .css('top', this.pointY)
        .css('left', this.pointX);
    $(document.body).append(this.element);
    return this;
};
  //Animate the particle movement
  Particle.prototype.fly = function() {
      var self = this;
      $(this.element).animate({
          'top': this.pointY,
          'left': this.pointX,
      }, this.duration, 'linear', function(){
          self.speed().newPoint().fly();
      });
  };


  function randomInt(max) {
    // Generate a random integer (0 <= random < max)
    return Math.floor(Math.random() * max);
  }

$(function() {
  var total = 20;
  var particles = [];
  for (i = 0; i < total; i++) {
    particles[i] = new Particle();
  }


})

This awesome effect was brought to you by Piao Yishi.

Answer 1 · 2016-06-08T10:39:44Z

June 8, 2016 10:39am

I'm not sure what you mean by "whenever I link the bit of code, it doesn't work." Maybe this would be best demonstrated if you make a snapshot of your workspace and provide the link.

But to restrict particle movement to within your third div, you could do this:

Particle.prototype.newPoint = function() {
  this.pointX = randomInt($(".third").width() - 5) + $(".third").position().left;
  this.pointY = randomInt($(".third").height() - 5) + $(".third").position().top;
  return this;
};

Then, you just need to give your div explicit dimensions (an empty div will have no height by default).

I reduced the size offsets to 5, assuming your particles are the same size as the first two in the "Firefly Effect" article. Readjust them if not.

Answer 2 · 2016-06-08T11:12:33Z

June 8, 2016 11:12am

Steven Parker has a good solution there. Without seeing all of your code and structure, it's difficult to tell what might work best for you.

~~As another option, you could use offset() and inner dimension values. In contrast to position(), offset() is relative to the document as opposed to the offset parent.~~ Depending on your div styles, you may want to use innerWidth() and innerHeight() if you want to include padding.

// Keep in mind the subtraction number is related to your particle sizes, so adjust accordingly.
this.pointX = $('.third').offset().left + randomInt($('.third').innerWidth() - 32);
this.pointY = $('.third').offset().top + randomInt($('.third').innerHeight() - 32);
return this;

Hopefully with two different options you'll feel better prepared to customize your code to work with your document. Happy coding! :)

Edit: See comments below for some updates.

Welcome to the Treehouse Community

Looking to learn something new?

Jordan Siu

Jordan Siu

Adding jQuery to DIV element?

2 Answers

Steven Parker

Steven Parker

But to restrict particle movement to within your third div, you could do this:

rydavim

rydavim

Steven Parker

Steven Parker

rydavim

rydavim