change script: Loop through divs every X seconds PLUS select DIV manually by clicking button

Question

on the page Show and hide divs at a specific time interval using jQuery

there is a script to Loop through DIVs (show 1 DIV after the other while hiding the others).

it's called "Loop through divs every 10 seconds "

It works fine, but i need to select a special DIV with a click on a special button TOO.

There are 3 DIVS with headline 1 - 2 - 3 (the active is RED) The Loop-Script changes the DIVs and shows them right. BUt whe click on 2 the DIV Nr. 2 should become active. (and the Loop should go on with Nr. 3 - 1 - 2....

simply: how do I tell the script "counter = 3" when clicking on button 3

http://nill-theobald.de/index-test1.html = timer-based script ( http://nill-theobald.de/index-test2.html = via click (completely different script) )

PLEASE: tell it to a complete javascript-idiot (= me...)

:-)

thank you!

score 0 · Answer 1 · edited May 23 '17 at 12:19

0

"simply: how do I tell the script "counter = 3" when clicking on button 3" -- I assume you mean script shown here

Assuming you have a button like this (for example):

<input type="button" id="button-3" value="Click me">

JS for handling the click would as simple as:

$("#button-3").click(function() {
    counter = 3;
});

This handler has to be in the same scope as the counter variable to make it work (in case of script linked above it can be right after declaration of var counter = 0;);

EDIT: One more thing. To make sure the switching of the divs occures in expected time, you have to enforce some intervalId management.

HTML:

<a href="#" class="button" rel="1"><img width="11" height="10" alt="video 1" src="orange.gif"></a>
<a href="#" class="button" rel="2"><img width="11" height="10" alt="video 1" src="grau.gif"></a>
<a href="#" class="button" rel="3"><img width="11" height="10" alt="video 1" src="grau.gif"></a>

JS:

$(".button").click(function() {
    counter = parseInt(this.rel);
    showDiv(); // show next div
    setIntervalSwitch(); // reset the interval so the next "switch" is in X seconds
}); 

var intervalId;
var setIntervalSwitch = function() {
    clearInterval(intervalId); // clear old interval
    // now start interval again
    intervalId = setInterval(function () {
         showDiv(); // show next div
    }, 5 * 1000);
}
// call the setIntervalSwitch to initialize interval before someone manually click on any div
setIntervalSwitch();

edited May 23 '17 at 12:19

Community

1
1

answered Aug 29 '11 at 08:30

WTK

16,583
6
35
45

the input-section would become – Martin Steinherr Aug 29 '11 at 08:46
That wouldn't change a thing, since the click event handler above relies on *id* attribute of the element that is clicked. – WTK Aug 29 '11 at 08:50
it works :-) http://nill-theobald.de/index-test1.html but when button 3 is active clicking on 2 seems to have a delay / won't work...?!? – Martin Steinherr Aug 29 '11 at 09:39
I've updated my answer with a code that should resolve issues with delays / weird timing of the switch process. – WTK Aug 29 '11 at 10:06
thank you very much! I found a thing: tha (#button-3) should be a (.button-3) and in the html it should be a class rather than an id - for ids may only come once in the file. As i changed id to class and #xxxm to .xxx the delay was gone and i can jump backword too :-) GREAT! – Martin Steinherr Aug 29 '11 at 13:03
Update my answer for better click handler - so you don't have to have three separate handlers doing pretty much the same thing. As you can see, you can give all three links the same class, and in the keep counter value you want to set in the *rel* attribute. Than you can have one handler for all three links which will set the counter to any value that is present in the *clicked* link. – WTK Aug 29 '11 at 13:34

change script: Loop through divs every X seconds PLUS select DIV manually by clicking button

1 Answers1