problems setting css with jquery

Question

I have created a slideshow with jquery. It clones an image in a container, moves it to the right, then slides it to the left and starts over. Here is the code:

$(document).ready(function() {
    var slideshow = new main.slideshow();
    slideshow.start({
        path: 'images/slideshow/',
        images: ['1', '2']
    });
});

var main = new (function() {

    this.slideshow = (function() {
        var self = this;
        var nextSlide, path, images, startLeft;
        var fileExtension = 'jpg';
        var container = $('#slideshow');
        var currentSlide = container.children('img');
        var timerlength = 4000;
        var currentSlideIndex = 0;

        this.start = function(args) {
            path = args['path'];
            images = args['images'];
            if (typeof args['fileExtension'] !== 'undefined') fileExtension = args['fileExtension'];
            container.css('overflow', 'hidden');
            currentSlide.css('position', 'absolute');
            startLeft = currentSlide.position();
            startLeft = startLeft.left;
            self.nextSlide();
        };

        this.nextSlide = function() {
            nextSlide = currentSlide.clone();
            nextSlide.css('left', (startLeft + currentSlide.width()) + 'px');
            currentSlideIndex++;
            if (currentSlideIndex >= images.length) currentSlideIndex = 0;
            nextSlide.attr('src', path + images[currentSlideIndex] + '.' + fileExtension);
            container.append(nextSlide);
            setTimeout(function() {
                self.slideToNext();
            }, timerlength);
        };

        this.slideToNext = function() {
            currentSlide.animate({
                left: '-' + (currentSlide.width() - startLeft) + 'px'
            }, 2000);
            nextSlide.animate({
                left: startLeft + 'px'
            }, 2000, function() {
                currentSlide.remove();
                currentSlide = nextSlide;
                self.nextSlide();
            });
        };
    });
});

A link to see this in action can be found here: https://dustinhendricks.com/breastfest/public_html/

The problem I'm having as you can see is that the second slide when first added to the dom, does not seem to be moved to the right when I call css('left', x);. After the first jQuery animation however, each cloned slide then seems to be able to be moved to the right with that call no problem. This leads me to believe that jquery's animate is setting something that allows for the object to be moved via css('left', x);, but what could it be changing? position is already being set to absolute.

This is why my example pages seems to take a while before the slides start sliding. Any idea how I can fix?

Are all slides position: absolute? It might also be that if the first image hasn't loaded yet when you call .start() such that currentSlide.width() isn't correct so it isn't setting the proper initial value for left upon initialization. — jfriend00
– jfriend00, Commented Mar 11, 2012 at 1:28
@jfriend00 yes all slides are clones of the first slide, so they are absolute. your second comment however is the culprit. if you put in in an answer, i will accept. thanks! — dqhendricks
– dqhendricks, Commented Mar 11, 2012 at 2:21

jfriend00 · Accepted Answer · 2012-03-11 02:33:53Z

1

If your first image is not loaded yet when you call .start() such that currentslide.width() isn't correct, then it won't set the proper initial value for left upon initialization. You may need to set a .load() event handler so you know when that first slide is loaded and you can wait for it to be loaded before starting the slideshow.

When testing this, you must set the .load() handler before the .src value is set on the image object (or you may miss the load event in IE) and you should make sure you test both the cases where no images are cached and where all images are cached (as the timing of the load event can be different in both cases).

answered Mar 11, 2012 at 2:33

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

problems setting css with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related