Edit script: Iterate through the different div elements at regular intervals AND pick a specific div by pressing a button

Question

Edit script: Iterate through the different div elements at regular intervals AND pick a specific div by pressing a button

Check out this interesting discussion about displaying and hiding divs at specific time intervals using jQuery on the page here.

The script mentioned is designed to loop through DIVs, showing one after the other while hiding the rest. It's titled "Loop through divs every 10 seconds."

Although this script functions well, there is a need to select a specific DIV by clicking on a designated button as well.

Within the context of three DIVs labeled 1-2-3 (with the active one in red), the Loop Script alternates between them correctly. However, when clicking on 2, DIV Nr. 2 should become the active one (then continue with 3 - 1 - 2...).

To simplify: How can I indicate to the script to set "counter = 3" upon clicking button 3?

For more insight and examples, visit these links: timer-based script and click-triggered version.

If you can explain it to someone who is not very familiar with JavaScript (like me!), that would be greatly appreciated!

Thank you!

javascript jquery css html timer

Answer 1

Answer №1

"Essentially, how can I specify that the script sets "counter = 3" when button 3 is clicked?" -- I'm assuming you are referring to the script mentioned in this source

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

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

The JavaScript code for handling the click event would be as follows:

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

This click handler needs to be within the same scope as the counter variable to function correctly (in the case of the linked script, it can be placed right after the declaration of var counter = 0;);

Additional Note: To ensure that the div switching occurs at the desired time intervals, you should implement 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>

JavaScript:

$(".button").click(function() {
    counter = parseInt(this.rel);
    showDiv(); // display next div
    setIntervalSwitch(); // reset the interval for the next "switch" after X seconds
}); 

var intervalId;
var setIntervalSwitch = function() {
    clearInterval(intervalId); // clear previous interval
    // start new interval
    intervalId = setInterval(function () {
         showDiv(); // display next div
    }, 5 * 1000);
}
// call setIntervalSwitch to initialize interval before someone manually clicks on any div
setIntervalSwitch();

Answer 2

"Essentially, how can I specify that the script sets "counter = 3" when button 3 is clicked?" -- I'm assuming you are referring to the script mentioned in this source

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

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

The JavaScript code for handling the click event would be as follows:

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

This click handler needs to be within the same scope as the counter variable to function correctly (in the case of the linked script, it can be placed right after the declaration of var counter = 0;);

Additional Note: To ensure that the div switching occurs at the desired time intervals, you should implement 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>

JavaScript:

$(".button").click(function() {
    counter = parseInt(this.rel);
    showDiv(); // display next div
    setIntervalSwitch(); // reset the interval for the next "switch" after X seconds
}); 

var intervalId;
var setIntervalSwitch = function() {
    clearInterval(intervalId); // clear previous interval
    // start new interval
    intervalId = setInterval(function () {
         showDiv(); // display next div
    }, 5 * 1000);
}
// call setIntervalSwitch to initialize interval before someone manually clicks on any div
setIntervalSwitch();

Edit script: Iterate through the different div elements at regular intervals AND pick a specific div by pressing a button

Answer №1

Similar questions

Tips for moving the title to the next line within a card design

What is the technique for enabling a mouse click in the vicinity of an element?

Why is the count's answer 88?

Tips for aligning text and image in the center of a div with a specific width:

Compose an abbreviated version of the function

Using Angular's $filter to target a specific field

Tips for integrating bootstrap code within PHP tags

What could be the reason for meteor not injecting the text from my template helpers?

What is the best way to maintain data types of variables within an object sent via ajax?

Tips for activating swf file autoplay on the mobile edition of WordPress

Issue with setting HTML content using jQuery's .html() method

Accessing JSON Data Using JQUERY

How to reference an object from an external file in TypeScript using Ionic 2 and Angular 2

When using an HTML Select element with options loaded through Ajax, the desired item for selection is not being automatically selected

It is not possible to invoke the Ajax function on the subsequent page, while using AJAX and PHP

Trouble with Angular 1.6 ng-repeat not showing search results

Font Awesome functions properly on one Angular component but not on the second one

Scanner (IE5) impact on page load speeds

Bootstrap is not functioning successfully

Using JavaScript/jQuery to analyze POST values just before submission