Synchronize button on two different html pages using javascript

Question

I just want to know if there's a way that I can synchronize the map zoom button on two different html pages?

https://i.stack.imgur.com/nrFf9.png

I want to sync all the buttons in left and right map.

Here's the code for my Left and Right Map

LEFT

var scale = 1,
  panning = false,
  pointX = 0,
  pointY = 0,
  start = { x: 0, y: 0 },
  zoom1 = document.getElementById("zoom1");
  zoom2 = document.getElementById("zoom2");
  
function setTransform() {
  zoom1.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
  zoom2.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}

function reset(){
   event.preventDefault();
   scale = 1;
   pointX = 0;
   pointY =  0;
   start = { x: 0, y: 0 };
   setTransform();
}
function zoomOut(){
   document.getElementById("zoomout").click();
   event.preventDefault();
   var xs = (event.clientX - pointX) / scale,
       ys = (event.clientY - pointY) / scale,
         delta = (event.wheelDelta ? event.wheelDelta : -event.deltaY);
         (delta > 0) ? (scale *= 1.04) : (scale /= 1.04);
   setTransform();
}




   
   LEFT

RIGHT

var scale = 1,
  panning = false,
  pointX = 0,
  pointY = 0,
  start = { x: 0, y: 0 },
  zoom1 = document.getElementById("zoom1");
  zoom2 = document.getElementById("zoom2");
  
function setTransform() {
  zoom1.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
  zoom2.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}

function reset(){
   event.preventDefault();
   scale = 1;
   pointX = 0;
   pointY =  0;
   start = { x: 0, y: 0 };
   setTransform();
}
function zoomOut(){
   document.getElementById("zoomout").click();
   event.preventDefault();
   var xs = (event.clientX - pointX) / scale,
       ys = (event.clientY - pointY) / scale,
         delta = (event.wheelDelta ? event.wheelDelta : -event.deltaY);
         (delta > 0) ? (scale *= 1.04) : (scale /= 1.04);
   setTransform();
}




   
   RIGHT

I am calling the same JS file for the 2 pages.

This will help me alot if you guys can help me with this. Thank you!

user_19647626 · Answer

Irrespective you use the same JS file for the two different page, both pages will load the JS as a new version for their own. so, even if you do some script change on one page, it wont reflect on the other until you refresh it.

Instead you can use Database to handle this as one of the solution.

Lets say on default both zoom was set at 8, and zoom button has a class "zoom_btn", and data-zoom='8'
Create a DB table called zoom_change with a column zoom_value with default one row with value of '8'.
Create a page in PHP or any other backend you use to update zoom_value in zoom_change table
Create another page in PHP or any other backend you use to fetch zootem_value in zoom_change table

using JQuery : on the common JS page :

Script #1 to Record zoom changes into DB:

$(".zoom_btn").on("click", function() {
   var zoom_value = parseInt($(this).attr("data-zoom"))+1;
   $.post('zoom_value_update.php', 
    {
      value : zoom_value
    }, function () {
       // $(this).attr("data-zoom",zoom_value);
       // Do something with the zoom value ----
   });
});

Script #2 to update zoom_value from DB to data attribute :

function() {
   setInterval(() => {
     $.post('zoom_value_fetch.php', 
      { }, function (result) {
       $(".zoom_btn").attr("data-zoom",result);
       // Do something with the zoom value ----
     });
   }, 5000);    
}();

Please note that this one of the method i know of. Not the only one. Please consider other answers as well.

Synchronize button on two different html pages using javascript

1 Answers