StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is also my first time on StackOverflow. I hope I can help.</p> <p>What I think you need to do is call <code>flippers_start()</code> separately for each flipper on your page. You can use the <code>flipper</code> arg you already have in that function. It should be something like this:</p> <pre><code>function flippers(divs){ var flip_wait = 3600; divs.each(function(i){ var flipper = $(this); flipper.find(".top_container img").each(function (j){ $(this).attr("id",i+"t"+j); }); flipper.find(".bottom_container img").each( function(j){ $(this).attr("id",i+"b"+j); }); setTimeout(function(){ flippers_start(flip_wait, flipper); },flip_wait); }); } </code></pre> <p>I changed the <code>setTimeout</code> call and put it inside the first <code>each()</code> so it's executed for each <code>$('.flipper')</code>. Note also that I'm using <code>flipper.find(".top_container img")</code> instead of <code>$(".top_container img")</code> to select only the images within the current flipper and that I pass the <code>flipper</code> as the second argument to <code>flippers_start()</code>.</p> <pre><code>function flippers_start(time,flipper){ var curr_top = '#' + flipper.find('.top_container img:visible').attr('id'); var curr_bottom = '#' + flipper.find('.bottom_container img:visible').attr('id'); if( (flipper.find('.top_container img').size() - 1) <= curr_top[3] ){ var next_top = curr_top.substring(0,3) + 0; var next_bottom = curr_bottom.substring(0,3) + 0; } else{ var next_top = curr_top.substring(0,3) + (parseInt(curr_top[3]) + 1); var next_bottom = curr_bottom.substring(0,3) + (parseInt(curr_bottom[3]) + 1); } var height = $(curr_top).height(); var width = $(curr_top).width(); flip(height,width,curr_top,curr_bottom,next_top,next_bottom); setTimeout(function(){ flippers_start(time, flipper); },time); } </code></pre> <p>In the above function I keep using <code>flipper</code> to select only the images within the current flipper div and changed the <code>setTimeout</code> call as before.</p> <p>I hope this works for you.</p> <p>I apologize for any spelling or grammatical errors you may find in what I just wrote. I'm not a native English speaker.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload