ImageMapster for perfect alignment

I'm struggling with centering a div that contains an image using imagemapster. When I remove the JS code, the div centers perfectly fine, indicating that the issue lies with the image mapster implementation.

It's a simple setup:

<div class="chartmap">
    <img id="waterfall" align="middle" src="http://i1372.photobucket.com/albums/ag358/rls462/waterfall_zpsdd7cc432.png" usemap="#water" alt="Waterfall Methodology Map">
    <map name="water">
        <area ......>

         ...
    </map>
</div>

You can see the demo here: http://jsfiddle.net/stamblerre/t6K8X/13/

Would appreciate any insights on how to solve this! Thank you!

javascriptjqueryhtmlcss

Answer №1

When you first set up Mapster on an image element, jQuery automatically places the image within a dynamic container that is aligned to the left by default.
To center align the dynamic container instead:

$('#waterfall') represents your image. To access the wrapping container, you should use $('#waterfall').parent() and then align it using: .css({"margin":"0 auto"})

Javascript Code Example:

$(document).ready(function () {
     $('#waterfall').mapster({
         singleSelect: true,
         clickNavigate: true,
         scaleMap: false,
         fill: false,
         stroke: true,
         strokeColor: '000080',
         strokeWidth: 3,
         mapKey: 'data-name',
     }).parent().css({"margin":"0 auto"});
 });

Check out the corrected Fiddle

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

Necessary CSS selector input equivalent in Reactive Forms

Is there a similar CSS method like input:required {CSS} to style all the reactive form fields in Angular that are set as required using Validators.required in their formControl? Or is there another approach to achieve this with CSS? ...

angularcssangular-reactive-forms

Tips for effectively utilizing the Angular ngIf directive for toggling the visibility of elements

<div *ngFor = "let element of myElements, let i=index" [ngClass]="{'selected':element[i] == i}"> <li> Name: {{element.element.name}}</li> <li> Description: {{element.element.description}}</li ...

htmlcssangulartypescriptangular-directive

Enable seamless SCSS inclusion in Vue components through automatic importing

My goal is to import a variables.scss file globally in my Vue project. I have set up my vue.config.js file as follows: module.exports = { css: { loaderOptions: { scss: { additionalData: `@import "@/st ...

javascriptvue.jsvue-cli

What could be the reason for my jQuery script not functioning properly on my web form that was inherited from a MasterPage?

In the head of my master page, I have included: <script src="Script/jquery.min.js"></script> <link href="Stylesheet/Master.css" rel="stylesheet" /> My webform (Login.aspx) inherits from this master page, and in Login.aspx I have: <a ...

javascriptjqueryasp.netmaster-pages

Discovering the present width of an Angular element after it has been eliminated

Imagine you have a horizontal navigation bar coded as follows: HTML: <ul> <li ng-repeat="navItem in totalNavItems">{{name}}</li> </ul> CSS: ul, li { display: inline-block; } The data for the navigation items is fetched from thi ...

javascriptjqueryhtmlangularjs

Attempting to modify a JSON file within a React application

I recently obtained a JSON file named 'DealerList.json' which I managed to import into my app using the following code snippet: import DealerList from './json/DealerList' let tasks = DealerList; The tasks now store the JSON data and I ...

javascriptjsonreactjs

What is the process for rendering a React class component using React HashRouter and Apollo client?

I've run into an issue with my project that involves using only React class components and fetching data from an Apollo server. The problem I'm facing is that, in Chrome, only the Navbar.jsx component is rendering. Even when I navigate to one o ...

javascriptreactjsreact-router-domapollo-clientreact-class-based-component

How to align radio_button_tag and label_tag side by side in Rails using Twitter Bootstrap 2?

Struggling to align the radio_button_tag horizontally with its label_tag. (Utilizing HAML) =radio_button_tag(:animal, "dog") =label_tag(:animal, "Dog") Which classes should I use for these form helpers to have them positioned side by side as shown below: ...

cssruby-on-railstwitter-bootstrap

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Can anyone assist with implementing the following features in D3 JS? I need to fix the x-axis position so that it doesn't scroll. The values on the x-axis are currently displayed as numbers (-2.5, -2.0, etc.), but I want them to be shown as percentag ...

javascriptcsstypescriptd3.jsbar-chart

Utilizing Regular Expressions in Express.js Routes

Is there a way to extract a specific value from my URL using Express? For example, my URL structure is as follows: host/:value.schema I need to retrieve the value from this URL. Here's an example: host/horse.schema (In this case, the value wo ...

javascriptregexnode.jsexpressroutes

Delete the parent div when the button is clicked

trying to create a dynamic button system to add/remove inputs on clicks. I have the addButton working but not the deleteButton. What am I missing? $(document).ready(function() { var maxFields = 20; var addButton = $('#plusOne'); va ...

javascriptjqueryhtml

Craft CMS contact form with an option to subscribe to our MailChimp newsletter

I'm currently working on setting up a contact form with a subscribe button in Craft CMS v2 to allow users to add their details to a MailChimp mailing list. Although I've been using the MailChimp Plugin and the Contact Form Plugin, integrating the ...

phpjquerycontent-management-systemmailchimpcraftcms

Steps for updating images and text on a live webpage after launching the web application

I added an image to a jsp file. The image, named kid.jpg, is downloaded and stored in the /resources/images folder as shown in the code snippet below. <li style="background-image: url('resources/images/kid.jpg');"> Now that my web app is ...

javajqueryhtmlimagejsp

What is the process for integrating Socket io into an external JavaScript file that is connected to an HTML file?

Currently, I am utilizing node js, socket io, and express to develop a multiplayer web game. To begin, the server initiates and listens on port 2000. Upon visiting localhost:2000, the file lobby.html is transmitted using: //app.js const express = require ...

javascripthtmlnode.jsexpresssocket.io

HTMLKit is functioning properly on the simulator but is experiencing difficulties when running on the

Currently, I'm utilizing HTMLKit as a dependency in my project. It runs smoothly on the simulator but encounters issues when running on an actual device. Below is the crash log generated while attempting to run it on an iPhone: dyld: Library not ...

htmliosswiftxcodecocoapods

What is the best way to find the right construction match?

Currently, I am in the process of parsing text and looking to match a specific type of text that I want to remove entirely. The format of the text I am trying to target is as follows: <tr class="label-BGC"><td colspan="4">any content here</ ...

phphtmlparsingpattern-matching

What steps should be taken to prepare files (such as editing images) before they are uploaded to Google Drive using the `rpldy/drive-uploady` tool?

I have successfully implemented rpldy/drive-uploady to upload files to Google Drive. However, I would like to allow users to edit images before uploading them. How can I achieve this? Below is the code snippet: import DriveUploady from "drive-uploady ...

javascriptnode.jsreactjsnext.jsfile-upload

Utilize jQuery to conceal the submit button of a form while maintaining its functionality

Is there a way to conceal the form submit button while still maintaining its ability to function when pressing Return/Enter? The use of .hide() (or display:none with CSS) eliminates the submit on return functionality. ...

jquery

What is the best way to make a scrollable div with top and bottom padding without adding extra elements inside?

I have created a fiddle to demonstrate my question. Essentially, I am looking to create a scrollable container with padding at the top and bottom that remains visible during scrolling, ensuring there is always a consistent distance from the edge to the con ...

htmlcss

Vue component lifecycle hook to fetch data from Firebase

Looking for a solution with Vue 2 component that utilizes Vuefire to connect declaratively with a Firebase real-time database: import { db } from '../firebase/db' export default { data: () => ({ cats: [] }), firebase: { ...

javascriptfirebasevue.jsfirebase-realtime-databasevuefire