Moving through divisions that share a common class name using jquery

I am experimenting with a plugin that allows me to attach popups to images. My goal is to enable navigation between all popups using previous and next buttons upon clicking on a popup.

Below is the element when it's displayed:

<div class="imp-tooltip imp-tooltip-visible" style="border-radius: 5px; padding: 20px; background: rgba(0, 0, 0, 0.9)"></div>

I attempted the following implementation:

<nav>
    <button id="down" ></button>
    <button id="up" ></button>
</nav>


var $currentElement = $(".imp-tooltip imp-tooltip-visible").first();

$("#down").click(function() {
    var $nextElement = $currentElement.next('.imp-tooltip');
    if ($nextElement.length) {

        $currentElement = $nextElement;
        $('html, body').stop(true).animate({
            scrollTop: $nextElement.offset().top
        }, 1000);
    }
    return false;
});

$("#up").click(function() {
    var $prevElement = $currentElement.prev('.imp-tooltip');
    if ($prevElement.length) {
        $currentElement = $prevElement;
        $('html, body').stop(true).animate({
            scrollTop: $prevElement.offset().top
        }, 1000);
    }
    return false;  
});

Answer №1

Your code contains a few minor errors that need fixing.

HTML:

class="imp-tooltip.imp-tooltip-visible"

Should actually be:
class="imp-tooltip imp-tooltip-visible"

JS:

$(".imp-tooltip imp-tooltip-visible").first()

Should be:
$(".imp-tooltip-visible").first()

Have you considered the purpose of the imp-tooltip-visible class? Does it signify the active element? If so, remember to remove this class from $currentElement before assigning a new one. After this operation, add the class to the new $currentElement. Consequently, using .first() in the selector is unnecessary since there should only be one element with this class.
On the flip side, if this class determines which imp-tooltip divs are visible, adjust the next() and prev() functions to target imp-tooltip-visible instead of imp-tooltip.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding icons to form fields based on the accuracy of the inputs provided

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Bui ...

Can you explain the sequence of steps involved in setting up a server in node.js?

I'm curious about the order in which instructions are executed in this code. Specifically, I want to know if http.createServer() or server.listen is executed first, and when the callback function inside createserver will execute. const http = require( ...

The jQuery code does not execute following the use of window.location.replace( url ) command

I'm facing an issue with my code that involves redirecting the page to the index page after clicking on a specific link ('#versionPageFromProdLink'). The index page contains certain content within a div, which I want to hide once the redirec ...

Combining two interconnected documents in Mongoose: merging references

Currently, I am in the process of learning how to work with NoSQL after having a background in relational databases. For this specific project, I am utilizing Express along with Mongoose. The main challenge I am facing involves callbacks when attempting t ...

Process called gulp useref eliminates certain files from the pipeline

Is there a way to exclude the gulp.src file from output? I am aiming to bundle only JavaScript and output .js files, not HTML. The following blocks in base.html are utilized for bundling JavaScript with gulp-useref: <!-- build:js app.core.js --> &l ...

What could be causing the issue with AJAX not running in a Python Django deployment on Heroku

My Django application is successfully deployed on Heroku, but I'm facing an issue with executing Ajax in the template. The Ajax functionality works perfectly fine on my local machine, however, it's not working on Heroku. I've included a snip ...

Empty observables in Knockout ViewModel binding

As I was cleaning up my model to enhance its clarity, I encountered an issue while refactoring. Initially, I utilized a global variable "results" to store the parsed JSON data from my API. After refactoring, I decided to set the model properties directly. ...

An error is occurring in asp.net where the ajax call is returning an undefined object

Here is the C# getter method that retrieves meanings of a word input by a user through a query. The meanings are then filled in a data table and added to a list of strings using a loop. Finally, the list is converted into a JSON string and returned: publ ...

E/AndroidRuntime: CRITICAL ERROR: main --- java code in an android app

I've been working on a map application and I've run into some issues. Can anyone help me figure out what's wrong with my code? ERROR 10-25 01:37:41.296 28673-28673/com.onemap.activities E/AndroidRuntime: FATAL EXCEPTION: main 10-25 01:37:4 ...

Develop a plugin architecture using JavaScript and Node.js

Here is a basic implementation using node.js with express: var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(3000); I am interested in creatin ...

Should the HTML inputs be positioned within the label or placed outside of it?

Check out this site for some on/off switches: <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> < ...

Unable to send data using GET method after implementing passportjs integration

In the route.js file, I have implemented the following REST method: app.get('/api/todos', isAuthenticated, function(req, res) { DB.TodoTable.find() .exec(function(err, todos) { res.json(todos, function(err){ if (err) ...

Utilize CSS with dynamically created elements

I am currently figuring out how to use my .each() function with a $(document).ready and a click event. Here's what I have so far: $(document).ready(function(){ $(".help-inline").each(function() { $(this).css('display', 'none&apos ...

JavaScript issue: TypeError - Information.map is not a function. Learn how to properly use .map method

Currently, I am learning how to use CRUD in React with Express and Node. I have successfully inserted data into the database, but I encountered an error when trying to represent the data using .map. You can see the issue with <Input onClick="{getCR ...

What is the correct way to implement the jQuery Highlight style?

At the bottom right corner of the jQuery Theme Roller website, you can find a preview of 'Highlight / Error' text. How can I effectively implement this feature in my own projects? I understand that I could simply copy and paste the surrounding c ...

Encountered an error while trying to deploy Node.js on Heroku: TypeError - Unable to access property 'split' of null

Seeking insight into the following error message: My application is built on Node.js and uses Atlas as its database. However, when attempting to deploy it on Heroku, I encounter the following error in the logs: TypeError: Cannot read property 'spl ...

Is it true that outerHeight(true) excludes margins?

As stated in the JQuery documentation, the outerHeight(true) function should return the complete height of an element, including padding, border, and margins. However, I encountered a scenario where this functionality seemed to be flawed. You can find a co ...

Encountering silence: React JS fetch call left unanswered by Sinatra server

Exploring the realms of Sinatra and React JS, I am venturing into making a GET call from my React website to a Sinatra server in order to display plain text. The Sinatra Server script: require 'sinatra' set :root, 'lib/app' before d ...

developing a deferred commitment by utilizing promise objects

Hi everyone, I've encountered an issue with a JavaScript promise question that's throwing errors function delay(n) { return new Promise((resolve) => setTimeout(resolve, n*1000)); } The expected output should be "It is now 2 seconds later" ...

Discovering the final step of a for loop when working with JavaScript objects

Currently, my data consists of: {12: Object, 13: Object, 14: Object} I need help figuring out how to detect the final iteration in the for loop below: for (var i in objs){ console.log(objs[i]); } Does anyone have any solutions? ...