The svgpanzoom plugin does not halt the beforeZoom event when returning false

I'm currently utilizing an amazing plugin, but I've encountered an issue with the zoom feature.

        panZoom = svgPanZoom('#svg3336', {
            zoomEnabled: true,
            controlIconsEnabled: false,
            fit: true,
            center: true,
            panEnabled: true,
            zoomScaleSensitivity: 2,
            beforeZoom: function(){

                if(zoomed)
                {
                    return false;
                }
                else
                {
                    zoomed = true;
                }
            },
            mouseWheelZoomEnabled: false,
            minZoom: 0.1
        });

When return false is triggered, my map disappears. Upon checking the matrix data, I noticed a significant negative value in the coordinates.

transform="matrix(5.630453109741211,0,0,5.630453109741211,-2396.02587890625,-7678.998046875)"

Any ideas on how to resolve this issue?

javascriptsvgpanzoom

Answer №1

One issue is that when you use mouse scrolling to zoom, it is done relative to the position of the mouse pointer. This means that not only do you zoom in or out, but you also pan the view.

In the example provided, zooming is prevented but panning still occurs when scrolling using the mouse wheel.

A potential solution would be to cancel panning immediately after zooming:

beforeZoom: function(){
  isZooming = true;
  if(zoomed) {
    return false;
  } else {
    zoomed = true;
  }
},
beforePan: function(){
  if(isZooming) {
    isZooming = false;
    return false;
  }
}

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

Display a Google Map within a modal window following an Ajax request

I'm currently developing a website where I need to display a Google map inside a modal after an AJAX call. The modal is created using Bootstrap, but I'm facing an issue where the map remains blank once the modal is opened. An interesting observa ...

javascriptphpjqueryajaxgoogle-maps

Adjusting Picture Sizes to Fit the Dimensions of a Photo Frame

Currently, I am in the process of developing a website that incorporates two distinct image types: Portrait photos https://i.sstatic.net/rmIXQ.jpg Landscape photos https://i.sstatic.net/Z7mr3.jpg As you can see, there are two different categories of ...

javascriptphpjqueryhtmlcss

Three bizarre phenomena encountered when pushing mesh in JavaScript

Excuse my inexperience, I am quite new to javascript and THREE. In the code snippet below, I am attempting to add meshes to a list of objects: geometry = new THREE.BoxGeometry( 1, 50, 1 ); for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) { ...

javascriptthree.js

Animating Sliding Images with jQuery in a Sleek Sliding Page

Just completed a 5-page sliding site, each page featuring an image slider. Utilizing an image slider within a page slider. However, when attempting to use the same image slider with different images for page slide 3, it's not functioning. Any assista ...

javascriptjqueryhtmlcss

Is there a way to create a function that can show the pathway on the Browser Console?

I am looking to create a function that will show the path in the Browser Console when a link in the menu of a sub-category is clicked. The menu setup resembles this () on an e-commerce website. For instance: Perfume => ForMen => Cologne How can I r ...

javascripthtmlcss

Utilizing Sequelize defaultScope in conjunction with Models associations

I am currently utilizing Sequelize in conjunction with Express and Node.js, aiming to establish a defaultScope for Models. The Card and Tag entities have a Many To Many relationship. Provided below are the definitions of the Models and addScope method: // ...

javascriptnode.jsexpresssequelize.js

Tips for incorporating a pop-up feature into your flexslider

Below is the code snippet that I have implemented: <section id="dg-container" class="dg-container"> <div class="dg-wrapper"> <a href="#" class="js__p_start"><img src="images/1.jpg" alt="image01"> ...

javascriptjqueryhtmlcss

An inquiry regarding props in JavaScript with ReactJS

Check out the following code snippet from App.js: import React from 'react' import Member from './Member' function App () { const members = [ { name: 'Andy', age: 22 }, { name: 'Bruce', age: 33 }, { n ...

javascriptreactjs

Store the Ajax response in localStorage and convert it into an object for easy retrieval and manipulation

I'm currently working on an Ajax request that retrieves JSON data from the server and then stores it in localStorage for use in my application. However, I feel like my current code may not be the most efficient way to accomplish this task, as I have t ...

javascriptjqueryajaxjsonlocal-storage

URL JSON data will not display markers

I am currently working on a map that fetches data from the police.uk API by allowing users to drag and drop a dot on the map to display crimes within a 1-mile radius. However, I'm facing an issue when trying to implement geocoding functionality by tak ...

javascriptjqueryjsongoogle-mapsgoogle-maps-api-3

Updating the Highcharts chart when new data is available

Utilizing Highcharts, I am looking to have this chart update every second. Here's my current setup: JSFiddle I've implemented a timer with window.setInterval(updateChart, 1000); which successfully updates data each second. However, I'm uns ...

javascriptjquerychartshighchartsupdates

Having trouble importing XML data from an external file with jQuery

Attempting to import external XML with the code below is proving unsuccessful $( document ).load( "data.xml", function( response, status, xhr ) { console.log( xhr.status + " " + xhr.statusText ); }); Both data.xml and js files are in the ...

javascriptjqueryxml

The animated element in React is not running despite the animation class being added through addEventListener

When I add an animation class triggered by a scroll event listener, the progress bar animation only runs once on page load and does not run again when I scroll. Is there an issue with the code or is setState being used incorrectly? .body2 { background ...

javascriptcssreactjs

What might be causing my lightbox image to fail to load when I click on it?

Whenever I click on the image, the lightbox loads but the actual image fails to load, leaving a blank white box instead. Despite following a tutorial on YouTube that showed me how to create a lightbox step by step, I can't figure out what went wrong. ...

javascriptjquerybootstrap-4lightboxlightbox2

What methods can I use to design a splash screen using Vue.js?

I am interested in creating a splash screen that will be displayed for a minimum of X seconds or until the app finishes loading. My vision is to have the app logo prominently displayed in the center of the screen, fading in and out against a black, opaque ...

javascriptvue.js

Angular JS manifesting a nested JSON filter system

As a newcomer to AngularJS, I am trying to implement a filter in my ng-repeat. Here is the structure of my JSON data: var data = [ {name:test1,b1:{lastValue:0},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}} {name:test2,b1:{lastValue:6},b2:{l ...

javascriptangularjsjson

fetch() operates successfully in Extension but encounters difficulties in Chrome Console/Snippet

I am currently facing an issue with my Chrome Extension. The extension performs a successful GET request, but when I try to replicate the same action in the Chrome Console or Snippets, I encounter errors. Here is a minimal example of the code I am using: f ...

javascriptgoogle-chrome-extensiongoogle-chrome-devtoolsfetch-api

Despite receiving fail reports, the AJAX post request actually successfully completes

Strange scenario. I have implemented AJAX to send data to a service, and the data is successfully stored in the database. However, instead of entering the done() section of the code, it always ends up in the fail() section for some unknown reason. Here is ...

javascriptc#jqueryajaxpost

JavaScript code to determine if a Rating is enabled for a SharePoint Online list

Currently, I am working on a JavaScript code that will allow users to provide star ratings for specific articles through a widget. One of the requirements is to first verify if the Rating feature is enabled for a particular SharePoint list. If it is enable ...

javascriptsharepointsharepoint-onlinesharepoint-2016sharepoint-jsom

The MDL layout spacer is pushing the content to the following line

Here's an interesting approach to Material Design Lite. In this example from the MDL site, notice how the 'mdl-layout-spacer' class positions elements to the right of the containing div, giving a clean layout: Check it out <!-- Event ca ...

javascripthtmlcssmaterial-design-lite