CODEWITHSUNDEEP
javascriptcsshtml
Damienn
Damienn

Reputation: 65

Change JS function to an object

So I asked a question awhile ago here > Cons of MouseOver for webpages and ran into some issues with enabling/disabling events. According to the answer from the post, I was supposed to update my function as an object to call it out easily. However after a few hours of trial and error as well as online research, I still don't understand how the object works

So this is the function I want to put into an object,

$(function () {
    $('#01 img:gt(0)').hide();
    setInterval(function () {
        $('#01 :first-child').fadeOut(1500)
           .next('img').fadeIn(1500)
           .end().appendTo('#01');
    }, 3000);
});

And this was the code provided to initialize my object,

var Slideshow = (function () {
    this.interval;

    this.start = function () {
        ...
        initialize
        ...
        // catch the interval ID so you can stop it later on
        this.interval = window.setInterval(this.next, 3000);
    };

    this.next = function () {
        /*
         * You cannot refer to the keyword this in this function
         * since it gets executed outside the object's context.
         */
        ...
        your logic
        ...
    };

    this.stop = function () {
        window.clearInterval(this.interval);
    };
})();

So how exactly should I implement my function into the object so that it works?

Upvotes: 1

Views: 90

Answers (3)

Ian
Ian

Reputation: 50933

I would structure it like this:

function Slideshow(container) {
    this.interval = undefined;

    this.start = function () {
        container.find("img").first().show();
        container.find("img:gt(0)").hide();
        this.interval = window.setInterval(this.next, 3000);
    };

    this.next = function () {
        var first = container.find(":first-child");
        first.fadeOut(1500, function () {
            first.next("img").fadeIn(1500);
            first.appendTo(container);
        });
    };

    this.stop = function () {
        window.clearInterval(this.interval);
    };
}

$(function () {
    var div = $("#div01");
    var slides = new Slideshow(div);

    div.hover(function() {
        slides.stop();
    }, function() {
        slides.start();
    });
    slides.start();
});

DEMO: http://jsfiddle.net/STcvq/5/

latest version courtesy of @Bergi

Upvotes: 1

Horst
Horst

Reputation: 1739

change syntax to :

var Slideshow = (function () {
return {
    interval:null,
    start : function () {
        // catch the interval ID so you can stop it later on
        this.interval = window.setInterval(this.next, 3000);
    },

    next: function () {

    },

    stop : function () {
        window.clearInterval(this.interval);
    }
};
})();

as you are using jquery, a better ans is to create a little plugin: http://learn.jquery.com/plugins/basic-plugin-creation/

Upvotes: 0

Shyam Seshadri
Shyam Seshadri

Reputation: 341

What you should aim to do, looking at the recommended code, is to move the logic of your setInterval inside the Slideshow.next() function. That basically covers your fadeout, fadein logic.

So your function would look something like:

this.next = function() {
  $('#01 :first-child').fadeOut(1500)
       .next('img').fadeIn(1500)
       .end().appendTo('#01');
};

in the simplest of worlds.

Ideally, you would want to instantiate your Slideshow by telling it which id it should use, by passing that in the constructor. That is, you should be able to call

new Slideshow('#01') as well as new Slideshow('#02') so that you can truly reuse it.

Then, your next function would change to look something like (assuming the id is stored in this.elementId):

this.next = function() {
  $(this.elementId + ':first-child').fadeOut(1500)
       .next('img').fadeIn(1500)
       .end().appendTo('#01');
};

Hope this helps

Upvotes: 0

Related Questions