CODEWITHSUNDEEP
javascriptcssimageswap
Oliver
Oliver

Reputation: 2212

Bizarre Javascript bug-swapping in images

I have this crazy bug that only comes up sometimes. It was apparent when I was developing this site but then it disappeared for a week or so and now that the site is live it's back. I don't think it has anything to do with my hosting because it bugs out locally as well.

My problem is that I'm swapping the css value background-image on each click. It works perfectly 95% of the time, but sometimes for a span of like 15 minutes it just won't display about half the images, seemingly randomly. The strangest thing is that if you look in the inspector you can see that the script correctly changed the css value, but the image simply wasn't loaded. I have no idea why!

Here's the website: shouldivoteoliver.com It's on the "Propaganda" page.

Here's the Javascript:

$(document).ready(function() {
    var n=0;
        $(".button").click(function(){
            if (n===5){
                $('<video style="position:relative;left:250px;" src="http://dl.dropbox.com/u/1011105/6.ogg" controls="controls">your browser does not support the video tag</video>').appendTo($('#putin'));
                n++;
                $("#putin").css("background-image","none");
                }
            else{
                $('video').remove();
                $("#putin").css("background-image",function(){
                    if (n>13){
                    n=1;
                    return ('url(images/1.jpg)');
                    }
                    else{
                    n++;
                    return ('url(images/'+n+'.jpg)');
                    }
                    });
            }
        });
});

Upvotes: 0

Views: 149

Answers (3)

user2044802
user2044802

Reputation: 57

Here's a one-liner

swap value at index i1 with i2

arr.slice(0,i1).concat(ar[i2],ar.slice(i1+1,i2),ar[i1],.slice(i2+1))

Upvotes: 0

Fareesh Vijayarangam
Fareesh Vijayarangam

Reputation: 5052

I would suggest using a background image as a sprite and changing the background position as opposed to changing the background image property.

Here is a tutorial that I googled

http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/

Upvotes: 1

Munim
Munim

Reputation: 6510

I tried going through all the slides on the propaganda twice but I didn't come across any problem. I don't know what is going on, but you can make your code a little cleaner and more readable by just making an array to store the contents of each "slide", and simply loop through it on mouse click. I guess you don't really need to set the background property of that div and you could just include an image.
Just an advice, not sure if it will help with your problem, but will make this thing more manageable and easier to add more stuff.

Upvotes: 0

Related Questions