How can I detect click events in individual button-like areas on an image sprite using JQM?

When using Jquery Mobile, imagine having 2 button-like elements in an image sprite. These buttons need to be custom buttons within the image sprite:

 ---------
| button1 |
 ---------
| button2 |
 ---------

1.) How can I detect click events for each button within the image sprite? Any elegant solutions are appreciated.

2.) Alternatively, is there another approach that could be taken?

P.S: Unfortunately, there doesn't seem to be an existing API or plugin available for this specific feature, making it a new challenge for me.

javascriptjquerycssjquery-mobile

Answer №1

Here is an example of how to implement a similar functionality:

$(document).ready(function() {
  $('img').on('click', function(e) {
    var offset = $(this).offset();
    alert('X coordinate: ' + (e.clientX - offset.left));
    alert('Y coordinate: ' + (e.clientY - offset.top));
  });
});

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

What steps can be taken to ensure express Node.JS replies to a request efficiently during periods of high workload

I am currently developing a Node.js web processor that takes approximately 1 minute to process. I make a POST request to my server and then retrieve the status using a GET request. Here is a simplified version of my code: // Setting up Express const app = ...

javascriptnode.jsexpress

Is there a way to search for a set number of documents without any duplicates of a certain property value?

I currently have the following data stored on my server. [ { "brand": "Hyundai", "model": "Pickup -0395", "price": 80000 }, { "brand": "Hyundai&quo ...

javascriptreactjsmongodb

Can AngularJS support HTML5-mode URL routing in locally stored files (using the file:// protocol)?

Sorry if this question has already been asked, but I haven't been able to find any information on it. I'm working on an AngularJS application that needs to be accessed directly from a hard drive (not through a traditional HTTP server), so the UR ...

javascripthtmlangularjsurl-rewritingangular-ui-router

Loading external JSON and images located beyond the root directory

Currently, I am attempting to load a JSON file and a set of images from a directory located above my root directory. Although the code I have works, I believe there may be a more efficient way to achieve this. $.getJSON("http://localhost/folder1/folder2/f ...

javascriptcssjson

What could be causing my Gatsby/Material-UI website to display slightly larger than the viewport?

For my personal website, I decided to use the Gatsby/MUI starter as a base. However, I am facing an issue where all pages are rendering slightly larger than the viewport size, regardless of the device screen size. The site utilizes MUI Grid and I have alr ...

cssflexboxmaterial-uigatsbystatic-site

Create a div that is positioned absolutely on the page and spans the entire height of the

I have a position: absolute div that I need to be tall enough to reach the bottom of the page when scrolling all the way down. Essentially, it should span the entire height of the document page, not just the window. I've discovered that using viewpor ...

jquerycssheightabsolute

Distributing utility functions universally throughout the entire React application

Is there a way to create global functions in React that can be imported into one file and shared across all pages? Currently, I have to import helper.tsx into each individual file where I want to use them. For example, the helper.tsx file exports functio ...

javascriptreactjstypescripthelperreact-typescript

Is there a way to implement a flex display in my react slider component?

Welcome to my custom slider design! <Slider {...customSettings}> <div style={{ 'display': 'flex !important' }}> <CustomToolComponent key={uniqueName} color={customColor} /> <UniqueTool key={uniqueName} co ...

javascriptcssreactjsreact-slick

On iPhones, the links display as oversized blank containers

Recently, a client who switched from an Android phone to an iPhone reached out to me with a complaint. She mentioned that the links on her website, which I built for her, appear as large empty boxes. You can view her website here. To illustrate the issue ...

htmlcssios

Tips for storing jQuery ajax response in React's cache

While many people are concerned with disabling jQuery ajax cache in React, my question is a bit different. I actually want to enable caching, or more specifically, store the data retrieved from the initial ajax call in browser memory so that the REST api w ...

jqueryajaxcachingreactjs

Form-linked Progress Bar

This is a little project I created (for fun and learning purposes, even though it may not be the most optimized solution). If you're interested, here's the link to the code: https://codepen.io/paschos/pen/xxGXMQb I'm currently seeking assi ...

javascripthtmlcssreactjs

JavaScript has encountered an Uncaught TypeError due to an illegal invocation

I am currently developing a lambda function that calls another function with specific parameters. While this code runs without issues in Firefox, it encounters an error in Chrome, displaying a strange message in the inspector: Uncaught TypeError: Illegal ...

javascriptlambdafunctional-programminginvocation

Relentless Recursion in Angular's Parent Component

Take a look at the Stackblitz to replicate the issue Hey there! I have an Angular7 application with a parent component named timesheet, and a child component called row. What I'm trying to achieve is having the parent component, timesheet, dynamicall ...

javascriptangular

Perform both creation and updating tasks within a single transaction using sequelize

Is it feasible to add a new row and update it within the same sequelize transaction? Here's what I've tried: let transaction; try { transaction = await dbcontext.sequelize.transaction(); const newEmployee = await dbcontext.Empl ...

javascriptnode.jssql-servertransactionssequelize.js

Using PHP, find the number of div elements within a parent div and then determine the code to add based on the summary

Seeking assistance with creating PHP code that can count the number of divs inside a parent div and add additional code if the inner divs match a specific count. The HTML structure is as follows: <div class="row-fluid str_category"> <div cl ...

phpjqueryhtml

Is there a mistake in the way I am creating a horizontal navigation bar?

Currently working on creating a simple navigation bar using HTML/CSS for a Java/Spring Boot project. Admittedly, my HTML/CSS skills are quite limited as you can see below. I'm aware that there might be some mistakes in my approach. Thank you in advanc ...

htmlcss

Ensuring consistency in layout for logo and navigation links using Bootstrap

I've tried countless techniques, but I'm struggling to align the logo and li elements properly in the header. Additionally, increasing the height of the header has proven to be a challenge. Despite experimenting with various methods, I have not a ...

htmlcsstwitter-bootstrap

Show CJUI tabs in Yii based on a certain condition

I am currently utilizing CJUI tabs for displaying my tabs. I want to customize the display of tabs based on the logged in user. There are two types of users: admin and customer. When a customer is logged in, I need to hide a specific tab that contains data ...

jqueryyiiyii-extensionsyii-componentscjuitabs

JavaScript Code for Executing Function on Checkbox Checked/Unchecked

My goal is to display an image when the checkbox is checked and show text when it is unchecked. However, I am facing an issue where the text does not appear when I uncheck the checkbox. <input type="checkbox" id="checkword" onchang ...

javascripthtml

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

htmlcssangulartypescript