Explore various SVG paths by hovering to reveal or conceal different divs

Hi there, I'll do my best to explain clearly. If this question has already been asked, I apologize as I couldn't find an answer when searching.

I've used SVG to create a map on my HTML webpage and it's looking great. I also have hidden divs that show information about each area of the map.

The goal is for information to display in a neighboring div when a user hovers over a section of the map. However, I'm having trouble with the divs not hiding again if the mouse skims over the map quickly.

Here is a snippet of my jQuery code:

$(document).ready(function(){
    $townOneText = $('#town-one-info');
    $infoText = $('#map-instructions');
    $('body').on('mouseover', '#town-one', function () {
        $infoText.hide();
        $townOneText.fadeIn("slow");
    });

    $('body').on('mouseout', '#town-one', function () {
        $townOneText.hide();
        $infoText.fadeIn("slow");
});

    $('body').on('click', '#town-one', function () {
        window.open('http://www.townone.com.au');
    });
});

If you'd like to see the live page, here's the link:

I admit I'm not proficient with jQuery, so any help would be greatly appreciated. I'd also like to make the code more efficient if possible (currently repeating the above for every area).

Thank you in advance for any assistance you can offer.

Answer №1

In my opinion, the reason for this issue is that the animations have not completed their execution yet. For example, the element fades in on mouseover before you attempt to hide it, resulting in the undesired effect. To address this problem, consider including the jQuery stop() method before hiding the element.

Answer №2

To enhance the functionality of the map sections, I suggest assigning a class named section to each section and ensuring that they already have unique IDs.

For the info-boxes that you want to display on mouseover, it would be beneficial to add a class such as info to them. Each info-box should also be assigned an ID corresponding to the section ID, like section-name-info.

Here’s how you can implement this:

$(document).ready( function () {
    $('.section').mouseenter( function () {
        $('.info').hide(); // Hide all info boxes initially
        $('#map-instructions').hide();
        var toShow = $(this).attr('id'); // Retrieve the ID of the hovered section

        // Display only the info box associated with the hovered section
        $('#' + toShow + '-info').show(); 
    });

    $('.section').mouseleave( function () {
        $('.info').hide(); // Hide all info boxes again on mouseout
        $('#map-instructions').show();
    });
});

Answer №3

Shoutout to @creimers for providing the key piece of code that led me to the solution! The code was almost perfect, but I discovered that calling body first when referencing SVG paths made all the difference.

$(document).ready(function(){
    $('body').on('mouseenter', '.map-region', function(){
        $('.map-region').stop();
        $('.map-info').hide(); // hide all info boxes initially
        $('#map-instructions').hide();
        var toShow = $(this).attr('id'); // get id of hovered section

        $('#' + toShow + '-info').show(); // display info box for this section only
    });
    $('body').on('mouseleave', '.map-region', function(){
        $('.map-region').stop();
        $('.map-info').hide(); // hide all info boxes
        $('#map-instructions').show();
    });
});

I decided to include the jquery stop function as an extra precaution, although it doesn't seem necessary for functionality.

To address @Rob's point, I realized that fading the divs in may not look as visually appealing, but at least everything is working correctly now.

Huge thanks to both @creimers and @Rob for your invaluable assistance!

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

Does the onChange event fire when the value is modified by the parent element?

let [number, set_number] = useState({x: 1}); <ChildComponent number={number} onUpdate={onUpdateFunction} </ChildComponent> set_number({x: 2}) After running set_number({x: 2}), will this action prompt the execution of onUpdateFunction refere ...

Select multiple options by checking checkboxes in each row using React

Is it possible to display multiple select checkboxes with more than one per row? For example, I have four options [a, b, c, d]. How can I arrange it to have 2 options per row, totaling 2 rows instead of having 1 option per row for 4 rows? ☑a ☑b ☑c ...

exploring the ins and outs of creating computed properties in TypeScript

How can I store an object with a dynamically assigned property name in an array, but unsure of how to define the array properly? class Driver { public id: string; public name: string; constructor(id , name) { this.id = id; th ...

Exploring Next.js Font Styling and Utilizing CSS Variables

I'm attempting to implement the "next" method for adding fonts, but I find the process described quite complex just to preload a font. I experimented with exporting a function to create the font and then using a variable tag to generate a CSS variabl ...

Advantages and drawbacks of utilizing both of these HTML codes for generating an image

Could you explain the distinction between creating the image in these two code snippets? <link href="img/favicon.ico" rel="icon" type="image/png"> compared to initiating it using a simple <img /> tag I'm t ...

Best approach for retrieving and adding a large number of images when dealing with slower connections

Currently, I am retrieving 100-200 images using a combination of ajax-php-mongodb. The process involves ajax making an initial call with parameters, php on the server side locating the appropriate mongo document containing all image file ids in grid fs, fe ...

Displaying an HTML string on a webpage

I am developing a user dashboard using Django for a Python-based web application. This web application generates emails, and the HTML content of these emails is stored in a file (and potentially in a database table as well). As part of the dashboard's ...

Launching a Node.js Express application on Heroku

I'm facing an issue while trying to deploy my app on Heroku, as I keep encountering the following error: 2022-08-11T12:49:12.131468+00:00 app[web.1]: Error: connect ECONNREFUSED 127.0.0.1:3306 2022-08-11T12:49:12.131469+00:00 app[web.1]: at TCPConnect ...

Utilizing Django templates to implement custom filters within CSS styling

@register.filter(name='cf') def formattedAmount(amount): # Convert the numerical amount to a string with comma formatting formatted_amount = f"{int(amount):,}" # Determine if the number is positive or negative and set CSS class accor ...

The width of the Bootstrap tooltip changes when hovered over

Currently, I am facing a peculiar issue with my angular web-application. Within the application, there is a matrix displaying data. When I hover over the data in this matrix, some basic information about the object pops up. Strangely, every time I hover ov ...

Form is protected from XSS attacks

Here's a basic form that I'm attempting to exploit with XSS using Chrome. <?php echo $_GET['comment']; ?> <script>alert('from HTML')</script> <form method="GET" action=""> Name: <input t ...

Navigating to a different component with react-bootstrap-table-next?

I have a collection of coding challenges in a table format. I want the user to be able to click on a challenge name and be routed to a separate page showcasing the details of that specific problem using a Problem component with unique props. Currently, I ...

Personalizing Bootstrap 5 button designs and attributes for a customized look

In my project, I've set up my custom.scss file with the following code: $primary: #e84c22; $theme-colors: ( primary: $primary, ); @import "~bootstrap/scss/bootstrap.scss"; Currently, the color looks like this: https://i.sstatic.net/lbL ...

Tips for organizing a multi-dimensional array based on various column indexes

I am looking to organize a multidimensional array by multiple column index. Take, for instance, the test data provided below: var source = [ ["Jack","A","B1", 4], ["AVicky","M", "B2", 2], [ ...

Tips for using a button to update data without triggering a postback

Within the GridView in my ASP.net project, I have an ASP.net button with the following code: <asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" OnCommand="btnShow_Command" Comman ...

Why does routing function correctly in a browser with AngularUI Router and Ionic, but not in Ionic View?

My Ionic App runs smoothly in the browser when using ionic serve. However, I encounter issues with routing when running the app in Ionic View (view.ionic.io) after uploading it with ionic upload. The index.html loads but nothing within <div ui-view=""& ...

Bootstrap slider with fading in and out effects

I am attempting to create a bootstrap slider that fades in and out when transitioning between slides, similar to the effect demonstrated in this template.. I am using Visual Studio 2010 with ASP.NET. The issue I'm facing is that when the image change ...

Keywords: <footer>, <aside> not encompassing all aspects of the HTML on the content page

Recently, I have been transitioning my codebase from .NET webform to .NET Core: In the _Layout.cshtml, elements like <hr> and <section> span the entire width (e.g. 100%) of the html page as expected. However, when I insert similar tags in the ...

Delay problem caused by setTimeout

I am developing a version of the "Game of Life" using javascript. I have successfully implemented all the logic within a function named doGeneration(). When calling this function repetitively from the console, everything works as expected. However, when at ...

Tips for creating a sophisticated state transition diagram using Typescript

If you have a creative idea for a new title, feel free to make changes! I have two enums set up like this: enum State { A = "A", B = "B", C = "C" } enum Event { X = "X", Y = "Y", Z ...