CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
Gavin Sullivan
Gavin Sullivan

Reputation: 15

execute jquery function for each element containing class

The below function mostly works - it moves the backgrounds as I need, however I would like the function to run on any element with a class of "animate", rather than having to call each element down the bottom. I tried $('.animate').load(function(){}; but it just wont work... Thanks

JAVASCRIPT

$(window).load(function(){
(function(){
      $.fn.move = function(){
            var $this = $(this);
            var offset = $this.offset().top;
            var start = 0;
            var end = offset + $this.height();
            var speed = $this.attr("speed");
            return this.each(function(){
                  $(window).bind('scroll', function() {
                       var windowPos = $(window).scrollTop();
                        if((windowPos >= start) && (windowPos <= end)) {
                              var newCoord = windowPos * speed;
                              $this.css({'background-position': '0 '+ newCoord + 'px'});
                        };
                  });
            });
      };
})(jQuery);

$('.animate').move();
});

HTML

<div class="welcome_6"></div>
    <div class="welcome_5"></div>
    <div class="welcome_4"></div>
    <div class="welcome_3"></div>
    <div class="welcome_2 animate" speed="-1"></div>
    <div class="welcome_1 animate" speed="0"></div>

EDIT: When I scroll the page the elements move according to the scroll location. Each element moves at a different speed (set as html attribute). This code moves them all at the same speed.. I'm assuming the $('.animate') should be somewhere up the top replacing the $.fn.move but i cant figure it out..

Upvotes: 1

Views: 90

Answers (2)

Enjayy
Enjayy

Reputation: 1074

I think the issue is with the way you are using the immediately invoked function inside the load function and you are passing in jQuery at the bottom and not into the immediately invoke function. This will update the background position as long as you script tag is placed after the jquery script tag

Here is a link to js fiddle:

UPDATE: https://jsfiddle.net/kriscoulson/pnrx34wp/1/

I do not have your exact code for styling so I improvised but if you inspect the elements the background position is being updated;

AND UPDATE :

$.fn.move = function() {
  var $this = $(this);
  var offset = $this.offset().top;
  var start = 0;
  var end = offset + $this.height();
  return this.each(function(index, element) {
    var $element = $(element);
    var speed = $element.attr("speed");
    $(window).bind('scroll', function() {
      var windowPos = $(window).scrollTop();
      if ((windowPos >= start) && (windowPos <= end)) {
        var newCoord = windowPos * speed;
        $element.css({
          'background-position': '0 ' + newCoord + 'px'
        });
      };
    });
  });
};

$(document).ready(function() {
  $('.animate').move();
});

EDIT: Your 'this' binding was off and your speed was declared outside of the this.each

Upvotes: 0

joaumg
joaumg

Reputation: 1248

Should be $('.animate') instead of $('animate') note the dot at the start of the query which says to the jQuery that you are looking for a class.

Upvotes: 1

Related Questions