jquery method as a javascript's class method

Question

is it possible to insert a jquery function in a javascript class? For example I have the following JS class:

function FloatingImage() {
    var delay, duration;

    var moveRight = function($image)
    {

        $image.delay(delay).animate(
        { 
            left: $image.parent().width() - $image.width()
        }, 
        {
            duration: duration,
            complete: function(){ moveLeft($image) }
        });
    },
    moveLeft = function($image){
        $image.delay(delay).animate({
            left: 0
        }, {
            duration: duration,
            complete: function(){ moveRight($image) }
        });
    };

    this.constructor = function (delay, duration) {

        this.delay = delay;
        this.duration = duration;
    };
}

The following support function:

function rand(l,u) // lower bound and upper bound
 {
     return Math.floor((Math.random() * (u-l+1))+l);
 }

And then calling it, assuming there are 2 divs #imgleft and #imgright with both 2 images as background, with:

$(function(){
    var $imageL = $('#imgleft'),
        $imageR = $('#imgright');

    var fi1 = new FloatingImage();
        fi1.constructor(rand(400,600), rand(1500,3000));
    var fi2 = new FloatingImage();
        fi2.constructor(rand(400,600), rand(1500,3000));

    fi1.moveRight($imageL);
    fi2.moveLeft($imageR);
});

Have you tried it? Are you getting any errors or unexpected behavior? Yes, you can include jQuery in a JavaScript constructor or prototype. — apsillers
– apsillers, Commented May 7, 2012 at 15:10
I don't understand your question, jQuery IS Javascript code. Can you precise it ? What do you want to do ? What are you actually doing ? What I've you tried ? What errors do you get ? BTW, there is no "class" in Javascript — pomeh
– pomeh, Commented May 7, 2012 at 15:13
@pomeh Sorry for being unclear. I want to move 2 images like this sample: jsfiddle.net/linuxatico/XnPjL but I want to reorganize my code so that I can quickly assign different delays and duration — linuxatico
– linuxatico, Commented May 7, 2012 at 15:27
@apsillers of course I tried it, found no errors and the animation wasn't working, so I thought that I couldn't do it. — linuxatico
– linuxatico, Commented May 7, 2012 at 15:36
Sorry, by "Have you tried it?" I don't mean to be insulting -- I'm really implicitly asking "...and, when you tried it, how did the results differ from what you expected?" as in my following questions, which you just answered. — apsillers
– apsillers, Commented May 7, 2012 at 15:44

Pierre Buyle · Accepted Answer · 2012-05-08 15:19:02Z

The FloatingImage function itself is the constructor, so it should be the one that receive the delay and duration parameters. The be available as method on the object instance build by this constructor you need to attach the function to the object. Otherwise, they will not be accessible outside the constructor's scope. Finally, in the complete callbacks, you need to call the method on the object.

function FloatingImage(delay, duration) {
  var self = this;
  this.moveRight = function($image) {
    $image.delay(delay).animate({ 
      left: $image.parent().width() - $image.width()
    },{
      duration: duration,
      complete: function(){ self.moveLeft($image) }
    });
  },
  this.moveLeft = function($image){
    $image.delay(delay).animate({
      left: 0
    },{
       duration: duration,
       complete: function(){ self.moveRight($image) }
    });
  };
}

But this does not seems to be a very good OO pattern. A better jQuery-ish way to do it would be to build a jQuery plugin:

$.fn.floatingImage = function(options) {
  var settings = $.extend( {
    direction: 'left',
    delay    : 400,
    duration : 400
  }, options);
  var self = this;
  self.delay(settings.delay).animate({
    left: (settings.direction === 'left') ? 0 : (this.parent().width() - this.width()),
  }, {
    duration: settings.duration,
    complete: function() {
      self.floatingImage({
        direction: (settings.direction === 'left') ? 'right' : 'left',
        delay: settings.delay,
        duration: settings.duration
      });
    }
  });
  // Return the jQuery object to allow methods chaining. 
  return self;
}    

$(function(){
  $('#imgleft').floatingImage({delay: rand(400,600), duration: rand(1500,3000)});
  $('#imgright').floatingImage({delay: rand(400,600), duration: rand(1500,3000), direction: 'right'});
});

Thanks for your time, but neither of them works for me, do I miss something?
My fault, I forgot the rand implementation :) Thank you very much
I have one more question for you: with this configuration (I mean with "left: 0; top:0" in the CSS) resizing the window cause the browser to show a horizontal scroll bar, if I want to avoid this behaviour how can I do? I thought to replace the "left" property with "background-position:" in the css and in the js file, but the animation doesn't work at all.... anyone has a clue? jsfiddle.net/linuxatico/XnPjL/3

Joseph · Accepted Answer · 2012-05-07 15:09:21Z

1

YES. jQuery IS JavaScript, there is no difference.

But your "class" will not be portable anymore. It assumes that when you use that "class", you have jQuery loaded and the objects you pass are jQuery objects since you used delay and animate.

answered May 7, 2012 at 15:09

Joseph

120k31 gold badges186 silver badges238 bronze badges

Collectives™ on Stack Overflow

jquery method as a javascript's class method

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related