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

Transferring an organized array to processing

My goal is to transfer an array of integers from a php file called load.php to a JS script, which will then forward it to a Processing file written in JavaScript. In load.php, I define the array and send it using JSON (the array contains a minimum of 40 i ...

javascriptphpajaxjsonprocessing

Issue: A child component's function is unable to update the state of the parent component

I have been working on a project using React. Below is the code for the parent component: class Parent extends Component { constructor(props) { super(props); this.state = { deleteConfirm: false }; } onDelete = pass => { thi ...

javascriptreactjsmaterial-ui

Managing data in a database on Discord using JavaScript to automatically delete information once it has expired

Recently, I implemented a premium membership feature for my discord bot. However, I encountered an issue where the membership time starts counting down before the intended start time. To resolve this, I am looking to automatically delete the data from the ...

javascriptdiscord

Is it possible to combine Django urls and Vue routes in a single project?

After setting up my Django app and implementing the authentication layer using Django-Allauth with features like email confirmation, password reset, and two-factor authentication, I've come to the realization that for my app's interactive nature ...

javascriptpythondjangovue.jsfrontend

Step by step guide to showcasing images dynamically in user interface

My current project involves displaying a screen with an HTML table and an image. The HTML table is fully dynamic. The Code Working Process When the user loads a page (with a URL), I render an HTML table in different parts as the page loads. I retrieve al ...

javascriptjqueryhtmlcsshtml-table

Learn the process of updating a nested document within an array in MongoDB

I have a data structure as shown below: { "name":"xxxxxx", "list":[ { "listname":"XXXXX1", "card":[ { "title":"xxxxxx", "descip":"xxxxxxx ...

javascriptnode.jsmongodb

Angular6 HttpClient: Unable to Inject Headers in Get Request for Chrome and IE11

Under my Angular 6 application, I am attempting to make a GET request while injecting some custom Headers: Here is how my service is structured: @Injectable() export class MyService { constructor(public httpClient: HttpClient) { } getUserInfos(login): Ob ...

javascriptangulartypescriptrxjsangular-cli-v6

Having trouble loading the Google API using getScript. Is displaying a ReferenceError message: "Variable google not found."

I am attempting to dynamically load the Google API using the getScript() method for implementing a "Place Autocomplete Address Form". For more information, you can visit this link: https://developers.google.com/maps/documentation/javascript/examples/places ...

javascriptjqueryapigoogle-maps

Can you explain the exact meaning of XMLHttpRequest.XMLHttpRequest?

I find MDN's writing style to be confusing. On the MDN page about XMLHttpRequest, it states: XMLHttpRequest is an API ... Constructor XMLHttpRequest.XMLHttpRequest Properties XMLHttpRequest.onreadystatechange XMLHttpRequest.readyState XMLHttpReq ...

javascriptajax

Improving an HTML list with JavaScript

My current project involves a JavaScript game similar to Scrabble. I want users to be able to create new words in the game, and have those words added to a list that is displayed on the page within a div element. However, I'm struggling to understand ...

javascripthtmllistview

Guide to making a sliding animation appear when hovering over a menu using jQuery

I have noticed a common feature on many websites, but I am unsure of how to explain it. At times, there are sliding elements in the navigation, like an arrow under menu items that moves when the user hovers over different links. Here is an example of a s ...

javascriptjquerycssnavigationjquery-animate

I'm having trouble with my bootstrap dropdown and I've exhausted all of my options trying to fix it based on my current understanding

My dropdown menu is not working despite adding all necessary Bootstrap CDN and files along with the jQuery script. Even with the table being handled by JavaScript, the button does not respond when clicked repeatedly. I suspect the issue lies within the han ...

javascripthtmljquerycssbootstrap-4

Discover the perfect method for combining two objects while updating any empty values with a new specified value. Furthermore, in the case where the new value is also

My task involves working with an array of objects where each time I select a value, it gets pushed into the array. My goal is to merge two objects that share the same key "code" and remove any empty values. (4) [{…}, {…}, {…}, {…}] 0: {code: "abc ...

javascriptjavascript-objects

Terminate the JWT token and automatically log out the user in the event of a banning or modification

Greetings fellow developers, I've been working on enhancing my application's user system to include functionality for administrators to upgrade an account's level (granting admin privileges if it reaches level 10) or ban users from the site ...

javascriptnode.jsapiexpressjwt

The child_process in Node is attempting to utilize /usr/bin/zsh, but unfortunately, it is unable to do so because

Recently, I've been encountering issues with several npm commands failing, accompanied by an error message that looks like this: npm ERR! code ELIFECYCLE npm ERR! syscall spawn /usr/bin/zsh npm ERR! file /usr/bin/zsh npm ERR! path /usr/bin/zsh npm ER ...

javascriptnode.jsnpmzsh

Unusual glitch spotted on website in real-time, unexpected large circle suddenly materializes on Safari and Internet Explorer

I came across a strange issue on a live site and I need to find a solution quickly. After clicking on the "get a quote" button, a random giant circle with only a border appears on my page when loading a form via ajax. This odd occurrence is visible on Int ...

jqueryhtml

Why is my node.js react app failing to detect the index.html file?

Take a look at the app here: git repository The issue I'm facing is that index.html doesn't seem to be properly linked, resulting in: 1) The website not being responsive for mobile devices 2) Lack of a favicon Can you spot any obvious mistak ...

javascripthtmlnode.jsreactjs

Is utilizing getStaticProps the best approach for handling offline data in Next.js?

My current project in Next.js involves offline static data for the webpage content. I am using an array to store the data for later mapping. Do you recommend using getStaticProps in this scenario? For example, here is a snippet of my code: import { data } ...

javascriptnode.jsreactjsapinext.js

Sort through an array using criteria from another array

const items = [[{name:"p2"},{name:"p3"}, {name:"p7"},{name:"p9"},{name:"p1"}],[{name:"p6"}, {name:"p3"},{name:"p7"}, {name:"p9"},{name:"p2"}],[{name:"p ...

javascriptarrayssortingfilterinclude

Update the less mixin

I attempted to eliminate the border radius from all Bootstrap elements by creating a custom-mixins.less file with the following lines in it. My intention was for these lines to overwrite the original .border-radius mixin, but unfortunately, it did not work ...

csslessmixins