Is there a way to redirect focus to an object with a lower z-index when working on overlaying a sequence of transparent divs on a map?

Question

Is there a way to redirect focus to an object with a lower z-index when working on overlaying a sequence of transparent divs on a map?

Is it possible to give focus to a parent div that contains a child div without hiding the child div?

I am integrating the Google Maps API and need to overlay a grid of transparent divs for inserting information. However, with these divs on top of my map, I am unable to drag the map.

While I know it can be done using the API, I am looking for a solution that works regardless of what I am working on top of.

<div style="position: relative; width: 100px; height: 100px;" id="wanttofocus">
    <div style="position: absolute; width: 100px; height: 100px;" 
    id="want_to_see_but_dont_want_to_focus_on">Some overlay information</div>
</div>

I have experimented with JQuery's .focus() method but haven't been successful. Any suggestions are greatly appreciated!

javascript css google-maps-api-3 jquery

Answer 1

Answer №1

Surprisingly, jQuery allows you to "pass through" events:

$(document).ready(function(){
    $('#element_to_monitor').bind('mousemove mousedown mouseup', function(e){
        $("#element_to_trigger").trigger(e); // passing through the event
    });

    $('#element_to_trigger').bind('mousemove mousedown mouseup', function(e){
        $('.output').html(e.type + ' ' + e.pageX + ' ' + e.pageY);
    });
});

I've created a jsFiddle for demonstration: http://jsfiddle.net/hP3RJ/

Answer 2

Surprisingly, jQuery allows you to "pass through" events:

$(document).ready(function(){
    $('#element_to_monitor').bind('mousemove mousedown mouseup', function(e){
        $("#element_to_trigger").trigger(e); // passing through the event
    });

    $('#element_to_trigger').bind('mousemove mousedown mouseup', function(e){
        $('.output').html(e.type + ' ' + e.pageX + ' ' + e.pageY);
    });
});

I've created a jsFiddle for demonstration: http://jsfiddle.net/hP3RJ/

Is there a way to redirect focus to an object with a lower z-index when working on overlaying a sequence of transparent divs on a map?

Answer №1

Similar questions

Steps to export data to Excel in ASP.NET MVC 5 without needing to refresh the page

Should JavaScript be referenced at the start or generated dynamically?

Modify a field within MongoDB and seamlessly update the user interface without requiring a page refresh

After refreshing, Angular route using html5Mode leads to a 'Page Not Found' error page

Mastering the Vue 3 Composition API: A guide to efficiently utilizing it across multiple Vue instances spread across different files

Utilize JQuery's .load() function to transmit JSON data to your Flask server

Is there a way to create a scroll down and scroll up button that is located outside of the scroll box

Achieving consistent spacing between elements within a column in Bootstrap 5

Is it possible to retrieve the `arguments` objects if one of the parameters is named "arguments"?

Running JavaScript code for the iframe

The Angular.js UIBootstarp Timepicker is displaying the "ng-invalid" class when used with an input type of "number"

Error: The variable 'error' could not be located

Is it possible to extract the value displayed on a Typography component in Material UI and store it in a state variable?

Managing memory in UIWebView when rendering THREE.js scenes

Can you please provide instructions on how to obtain the TypeScript definitions file for a specific version of Jquery, such as 3.2.1

Steps for revealing all the information from a database when clicking on the 'Read More' button

Activate the JavaScript loader while data is being fetched

"Error encountered while attempting to make the entire row in AngularJS UI-Grid editable simultaneously

Extending the length of the list items and their contents

FireFox is causing issues with both ng-view and Angular functions, rendering them unusable