Cycle through array on click

Question

I have an array of URLs, for example:

var urls = ["http://www.getbootstrap.com","http://www.reddit.com","http://www.bbc.com/news","http://www.google.com"];

and I have an iframe:

<iframe></iframe>

and two links:

<a href="#" id="forwards">Forwards</a> <a href="#" id="backwards">Backwards</a>

What I am trying to do is link it up so that the <iframe> shows the first URL in the array, and when you click either forwards or backwards it changes the src attribute to either the next url or the previous url. Also, when it is at the begining or end of the array then clicking the buttons should take it to the end or begining of the array, respectivly. I have this:

$('#forwards').click(function(){
    current++;
    $('iframe')[0].src = urls[current];
});

and the same to go backwards, but it is very inefficient, and doesn't work when you get to either end of the array. Is there a better way to do it?

Yeah, it should. I was typing up the code in the questions by hand rather than copying and pasting because other stuff is going on so that is a simpler version. — Benedict Lewis
– Benedict Lewis, Commented Dec 1, 2013 at 6:06

Roko C. Buljan · Accepted Answer · 2013-12-01 07:52:38Z

2

DEMO

var urls = ["http://www.getbootstrap.com",
            "http://www.reddit.com",
            "http://www.bbc.com/news",
            "http://www.google.com"
           ],
    c = 0,
    n = urls.length;

$('#forwards, #backwards').click(function( e ){
    e.preventDefault(); 
    c = this.id=='forwards' ? ++c : --c;
    c = c<0? n-1 : c%n ;

    $('iframe')[0].src = urls[c];
});

^n.b. Google uses X-Frame-Options header to prevent it's service to be embedded into an iframe inside an external page.

edited Dec 1, 2013 at 7:52

answered Dec 1, 2013 at 6:14

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

Collectives™ on Stack Overflow

Cycle through array on click

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