Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -1 down vote favorite

I'm trying to get two divs background-image css attibute to change every X seconds. Here is my code:

HTML

<div id="bg_left"></div>
<div id="bg_right"></div>

CSS body{ height:100%; }

#bg_left{
   height:100%;
   width:50%;
   left:0;
   position:fixed;
   background-position:left;
}
#bg_right{
    height:100%;
    width:50%;
    right:0;
    position:fixed;
    background-image:url(http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png);
    background-position:right;
}

JAVA SCRIPT

 function carousel_bg(id) {
     var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; 
     var img1 = bgimgs[id];
     var img2 = bgimgs[id+1];
     var cnt = 2; 

     $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
     $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");

     id = id + 1;
     if (id==cnt) id = 0;

     setTimeout("carousel_bg("+id+")", 10000); 
 }

 $(document).ready(function() {
        carousel_bg(0);     
 });

​ You can see the same at:

http://jsfiddle.net/vinicius5581/B9aQg/4/

What am I doing wrong and how do I get it to work? My idea is to get to a point where the background-images will be changing randomly but get them to change would be a good start.

share|improve this question
2  
What edits did you just make? Please specify when others are actively trying to work on it. – Angry Spartan Dec 12 '12 at 19:41
Sorry. I changed the var img for img1 and added one more variable and named it img2. I also changed the $(body').css("backgrou... to $('#bg_left').css(".. and added one more action for the #bg_right. – Vinicius Santana Dec 12 '12 at 19:49
1  
Please do not "bump" your question by adding "UNSOLVED:" to the title. Unsolved questions are already visually indicated. – Sparky Dec 12 '12 at 19:49
ok.. no problem. Got it. – Vinicius Santana Dec 12 '12 at 19:52
So... just trying to understand whats happening here. Is anything else that has to be done before we get to talk about the issue with the code? Im not very familiar with StackOverflow rules but I'm ok with them. – Vinicius Santana Dec 12 '12 at 19:59
show 1 more comment

2 Answers

up vote 3 down vote accepted

OK, I see the issue in your jsFiddle. Because you're passing a string to setTimeout() that string will be evaluated only at the top level scope. But, the function name you were passing is not at the top level scope (it's in an onload handler for the jsFiddle). So, I changed the way your JS is positioned in the jsFiddle so it is now at the top level scope. I also fixed up the logic for selecting an image and it now works here: http://jsfiddle.net/jfriend00/awVYP/

And, here's a cleaned up version that does not pass a string to setTimeout() (a much better way to write javascript) that passes a local function and uses a closure to keep track of the current index: http://jsfiddle.net/jfriend00/LVGNN/

    function carousel_bg(id) {
        var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; // add images here..

        function next() {
            if (id >= bgimgs.length) {
                id = 0;
            }
            var img1 = bgimgs[id];
            id++;
            if (id >= bgimgs.length){
                id = 0;
            }
            var img2 = bgimgs[id];

            $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
            $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");
            setTimeout(next, 1000);
        }
        next();
    }

    $(document).ready(function() {
            carousel_bg(0);     
    });

Previous comments on earlier version so of the OP's code:

$('#body')

should be:

$('body')

or even faster:

$(document.body)

Also, your jsFiddle shows a bit of an odd issue. Your CSS has a background image on the HTML tag, but your javascript sets a semi-transparent background image on the body tag. Is that really what you want?

share|improve this answer
ops.. thats a mistake... im gonna change now.. the #body should be #bg_left.. thanks for noticing. – Vinicius Santana Dec 12 '12 at 19:31
Thats not the problem though.. Im trying to change the backgrounds of the divs #div_right and #div_left – Vinicius Santana Dec 12 '12 at 19:34
Whats with me today... :p I meant. the divs #bg_right and #bg_left – Vinicius Santana Dec 12 '12 at 19:40
And yes.. the HMTL has a background.. it has nothing to do with the problem.. is just that i cleaned up what I had from the project but yes. The divs that I'm trying to change the background, have transparency and are on top of the html each has it owns background. I would clean it up, but apparently people get mad when you change something on the question. – Vinicius Santana Dec 12 '12 at 20:02
@ViniciusSantana - OK, I think I've fixed it up for you now. See what I've added to the start of my answer. I also changed the timing just to make it quicker for debugging. – jfriend00 Dec 12 '12 at 20:22
show 1 more comment
up vote 1 down vote

For testing I added another image to the array so that we got some distinction in the sorting.

function carousel_bg(id) {
    var bgimgs = [  'http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png', 'http://presotto.daterrawebdev.com/d/img/burningman_bg.png', 'http://gallery.orobouros.net/var/albums/2012/NewYorkComicCon2012/Legend-of-Korra/nycc_20121013_164625_0041.jpg?m=1354760251' ]; // add images here..
    var img1 = bgimgs[id+1];
    var img2 = bgimgs[id];
    var cnt = bgimgs.length; // change this number when adding images..

    $('#bg_left').css("background-image", "url("+img1+")");
    $('#bg_right').css("background-image", "url("+img2+")");

    id = id + 1;
    if (id== (cnt - 1) ) id = 0;

    setTimeout("carousel_bg("+id+")", 10000);
}

Two changes here:

  1. For your total image count, I am retrieving the total count of images in the array dynamically instead of by hand (bgimgs.length)
  2. In your conditional to reset the id value, subtract the total count by 1. Since JS has zero-based indexes, not doing this will get you an undefined error (a 3 item array will spit out a value of 4 in your original code on the last iteration).

While this code does loop through your array, it's not random. That's another topic.

share|improve this answer
Use the length instead of changing the number does the job with the second fix you added, cnt -1. Thanks for that. But the loop still doesn't run. Check the link below. jsfiddle.net/vinicius5581/B9aQg/8 – Vinicius Santana Dec 12 '12 at 20:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.