Scroll and nesting issues when rendering multiple reports with Leaflet on a single HTML page

I’m generating a combined report in Django by looping through several database entries and rendering the same HTML template multiple times, each with different data. The template includes Leaflet maps and some inline scripts.

The problem is: when I combine the reports into a single page, the layout breaks — it looks like the reports are either nested inside each other or overlapping. I also see multiple scrollbars (one inside another), which shouldn’t happen. This only occurs when I render several reports together.

Each individual report works fine on its own. The issue only appears when I generate them together in a loop.

Any help or direction would be appreciated.

addEventListener and Button not working together [duplicate]

I am ultimately trying to do more complicated things with an input field and a button, but I can’t even get the button to return anything to the console in the first place so I am trying to get the basics down before I move on to more complicated functions for the input field.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Input Practice</title>
    </head>
    <body>
        <div class="search">
            <label for="name">Search here:</label>
            <input
                type="text"
                id="name"
                name="name"
                required
                minlength="3"
                maxlength="30"
                size="30" />
            <button id="submit">Submit</button>
        </div>
        <script href="index.js"></script>
    </body>
</html>

JavaScript

var button = document.getElementById("submit");

function showConsole() {
    console.log("The button has been clicked")
};

button.addEventListener("click", showConsole);

I’m not concerned with CSS right now, I just want to get something to happen when I click the button. Any help would be appreciated.

How to show BeforeUnload alert from SPA?

I am using AngularJS SPA and trying to alert users when they are about to navigate away from active form.

There are 2 parts for this:

  1. User closes active tab
  2. User clicks internal link to navigate

So for first part everything is simple – window.addEventListener('beforeunload', unloader)

But for second part – How to show same alert, as in beforeunload? I don’t want to make custom alert text for consistency.

Since I can’t alter text and all browsers has own implementation:

firefox
chrome

CSS Animation, Media Queries, Divi on WordPress

I have developed an animation for my website, to give the effect of polaroid photos being tossed across a table top. I did this using the following html and CSS. It works in Codepen.(The changing font colors are just to identify the media query is working.)

https://codepen.io/Liam-Robb-OHagan/pen/YPPRYOO

HTML…

<div class="hero-wrapper">
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Grand-Teton-Winter-Bison-Plow-Framed.jpg" class="imgBison" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/03/Shoshone-Petrogylphs-Water-Ghost_ZoomedIN.jpg" class="imgPetroglyph" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Fairy-Retro-Frame-Vertical.jpg" class="imgHike" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Shoshone-Petrogylphs-Moose-Framed.jpg" class="imgMoose" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Grand-Teton-Summer-Grizzly-Delayed-Implantation-Framed.jpg" class="imgGrizzly" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Grand-Teton-Wildflowers-Framed.jpg" class="imgTetons" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Yellowstone-2-Day-Wolf-Framed.jpg" class="imgWolf" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/Hero-Grand-Prismatic-Spring-Framed-scaled.jpg" class="imgSpring" />
  <img src="https://guidesofjacksonhole.com/wp-content/uploads/2025/01/HIke-Upper-Retro-Frame-Vertical.jpg" class="imgGeyser" />
  <div class="hero-text">
    <div class="hero-h1">
      Your Adventure of a Lifetime
    </div>
    <div class="hero-h3">
      Forge Your Own Memories on Our Private Wildlife Safaris and Interpretive Tours of Grand Teton & Yellowstone National Parks.
  </div>
</div>

CSS…

    /*Default ViewPort MOBILE 320-480px*/

/*Hero Container*/
.hero-wrapper {
  position: relative;
  background-image: url(https://guidesofjacksonhole.com/wp-content/uploads/2025/03/HeroBG-mb-480-720.jpg);
  background-repeat: repeat-y;
  background-size: cover;
  background-position: center;
  display: flex;
  width: 100%;
  max-width: 480px;
  height: 720px;
  max-height: 720px;
  margin: auto;
  overflow: hidden; /* Remove if images should be visible outside frame*/
}
/*Head and Subhead Container*/
.hero-text {
  display: flex;
  width: 90%;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: 24px;
  bottom: 24px;
}

.hero-h1 {
  color: pink;
  font-family: Simplo, Lato, sans serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal; /* 92.857% */
  letter-spacing: -1px;
  text-transform: capitalize;
  align-self: stretch;
  width: 100%;
}

.hero-h3 {
  color: purple;
  font-family: Simplo, Lato, sans serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1px;
  text-transform: capitalize;
  width: 90%;
}

/*Image Container*/
.hero-wrapper img {
  position: absolute;
  width: 140px;
  height: auto;
  box-shadow: 3px 9px 12px 3px rgba(0, 0, 0, 0.4);
  bottom: 25%;
  left: 62%;
  animation-duration: 2s;
  animation-delay: 1s;
  transition-timing-function: ease-out;
  animation-fill-mode: forwards;
}
/*Individual Images and Starting Position to the bottom right of the screen*/
.hero-wrapper .imgBison {
  right: 0;
  transform: translate(100%, 0%) rotate(5deg);
  animation-name: enterBison;
}

.hero-wrapper .imgGeyser {
  right: 0;
  transform: translate(100%, 0%) rotate(25deg);
  animation-name: enterGeyser;
}

.hero-wrapper .imgGrizzly {
  right: 0;
  transform: translate(100%, 100%) rotate(10deg);
  animation-name: enterGrizzly;
}

.hero-wrapper .imgHike {
  right: 0;
  transform: translate(100%, 0%) rotate(15deg);
  animation-name: enterHike;
}

.hero-wrapper .imgMoose {
  right: 0;
  transform: translate(100%, 0%) rotate(15deg);
  animation-name: enterMoose;
}

.hero-wrapper .imgPetroglyph {
  right: 0;
  transform: translate(100%, 0%) rotate(15deg);
  animation-name: enterPetroglyph;
}

.hero-wrapper .imgSpring {
  right: 0;
  transform: translate(100%, 0%) rotate(25deg);
  animation-name: enterSpring;
}

.hero-wrapper .imgTetons {
  right: 0;
  transform: translate(100%, 120%) rotate(20deg);
  animation-name: enterTetons;
}

.hero-wrapper .imgWolf {
  right: 0;
  transform: translate(100%, 100%) rotate(5deg);
  animation-name: enterWolf;
}

/*Individual Images Animation onto the Screen. Appearance of some photos being tossed onto a rough wooden table top*/

/*MOBILE 320-480px*/
/*Final Position of Animations so Images fit the Portrait Container*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
  @keyframes enterBison {
    from {
      transform: translate(100%, 0%) rotate(20deg);
    }
    to {
      transform: translate(-5%, -30%) rotate(2deg);
    }
  }

  @keyframes enterGeyser {
    from {
      transform: translate(100%, 0%) rotate(25deg);
    }
    to {
      transform: translate(-5%, -130%) rotate(-15deg);
    }
  }

  @keyframes enterGrizzly {
    from {
      transform: translate(100%, 100%) rotate(10deg);
    }
    to {
      transform: translate(-100%, -235%) rotate(-28deg);
    }
  }

  @keyframes enterHike {
    from {
      transform: translate(100%, 100%) rotate(25deg) scale(1.25);
    }
    to {
      transform: translate(-10%, -225%) rotate(18deg) scale(1);
    }
  }

  @keyframes enterMoose {
    from {
      transform: translate(100%, 0%) rotate(15deg);
    }
    to {
      transform: translate(-165%, -180%) rotate(-8deg);
    }
  }

  @keyframes enterPetroglyph {
    from {
      transform: translate(0%, 100%) rotate(5deg);
    }
    to {
      transform: translate(-140%, -105%) rotate(-35deg);
    }
  }

  @keyframes enterSpring {
    from {
      transform: translate(100%, 100%) rotate(25deg);
    }
    to {
      transform: translate(-75%, -50%) rotate(-8deg);
    }
  }

  @keyframes enterTetons {
    from {
      transform: translate(100%, 0%) rotate(20deg) scale(1.25);
    }
    to {
      transform: translate(-75%, -160%) rotate(5deg) scale(1);
    }
  }

  @keyframes enterWolf {
    from {
      transform: translate(100%, 100%) rotate(5deg);
    }
    to {
      transform: translate(-165%, -40%) rotate(30deg);
    }
  }
}

/*TABLET, LAPTOP, DESKTOP 768-1440px*/
/*Final Position of Animations so Images fit Landscape Container*/
@media only screen and (min-width: 768px) and (max-width: 1440px) {
  @keyframes enterBison {
    from {
      transform: translate(100%, 0%) rotate(20deg);
    }
    to {
      transform: translate(-5%, -10%) rotate(2deg);
    }
  }
  @keyframes enterGeyser {
    from {
      transform: translate(100%, 0%) rotate(25deg);
    }
    to {
      transform: translate(-25%, -130%) rotate(-15deg);
    }
  }

  @keyframes enterGrizzly {
    from {
      transform: translate(100%, 100%) rotate(10deg);
    }
    to {
      transform: translate(-225%, -165%) rotate(-28deg);
    }
  }

  @keyframes enterHike {
    from {
      transform: translate(100%, 100%) rotate(25deg) scale(1.25);
    }
    to {
      transform: translate(-320%, -175%) rotate(18deg) scale(1);
    }
  }

  @keyframes enterMoose {
    from {
      transform: translate(100%, 0%) rotate(15deg);
    }
    to {
      transform: translate(-350%, -90%) rotate(-8deg);
    }
  }

  @keyframes enterPetroglyph {
    from {
      transform: translate(0%, 100%) rotate(5deg);
    }
    to {
      transform: translate(-220%, -90%) rotate(-35deg);
    }
  }

  @keyframes enterSpring {
    from {
      transform: translate(100%, 100%) rotate(25deg);
    }
    to {
      transform: translate(-65%, -70%) rotate(-8deg);
    }
  }

  @keyframes enterTetons {
    from {
      transform: translate(100%, 0%) rotate(20deg) scale(1.25);
    }
    to {
      transform: translate(-140%, -130%) rotate(5deg) scale(1);
    }
  }

  @keyframes enterWolf {
    from {
      transform: translate(100%, 100%) rotate(5deg);
    }
    to {
      transform: translate(-85%, -180%) rotate(30deg);
    }
  }
}

/*TABLET 768-1024px*/

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-wrapper {
    position: relative;
    background-image: url(https://guidesofjacksonhole.com/wp-content/uploads/2025/03/HeroBG-1024-720.jpg);
    min-width: 744px;
    max-width: 1024px;
    height: 640px;
    max-height: 640px;
  }

  .hero-text {
    width: 90%;
    left: 10%;
    bottom: 36px;
  }

  .hero-h1 {
    color: green;
    font-size: 36px;
  }

  .hero-h3 {
    color: red;
    font-size: 24px;
    width: 500px;
  }

  .hero-wrapper img {
    width: 185px;
    height: auto;
    bottom: 0%;
    left: 78%;
  }
}

/*LAPTOP 1025-1280px*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .hero-wrapper {
    position: relative;
    background-image: url(https://guidesofjacksonhole.com/wp-content/uploads/2025/03/HeroBG-1024-720.jpg);
    min-width: 1025px;
    max-width: 1280px;
    height: 680px;
    max-height: 720px;
  }

  .hero-text {
    width: 60%;
    left: 10%;
    bottom: 42px;
  }

  .hero-h1 {
    color: lightblue;
    font-size: 48px;
  }

  .hero-h3 {
    color: orange;
    font-size: 32px;
  }

  .hero-wrapper img {
    width: 205px;
    height: auto;
    bottom: 5%;
    left: 72%;
  }
}

/*DESKTOP 1281-1440px*/
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
  .hero-wrapper {
    position: relative;
    background-image: url(https://guidesofjacksonhole.com/wp-content/uploads/2025/03/HeroBG-1024-720.jpg);
    min-width: 1281px;
    max-width: 1440px;
  }

  .hero-text {
    width: 60%;
    left: 10%;
    bottom: 48px;
  }

  .hero-h1 {
    color: lightgreen;
    font-size: 60px;
  }

  .hero-h3 {
    color: orange;
    font-size: 39px;
  }

  .hero-wrapper img {
    width: 225px;
    height: auto;
    bottom: 5%;
    left: 70%;
  }
}

However, if I add the Html and CSS to a code module in the wordpress Divi theme the images do not display at the right size and the animation does not execute.

https://guidesofjh.wpenginepowered.com/?page_id=330203

ChatGPT suggested adding CSS to hide images and then use javascript to trigger the animation after the page loads, but this did not resolve the issue.

CSS…

.hero-wrapper img {
  opacity: 0; /* Hide images initially */
  visibility: hidden; /* Hide images initially */
  transition: opacity 0.5s ease, visibility 0s ease 0.5s; /* Gradual fade-in */
}

.hero-wrapper img.start-animation {
  opacity: 1; /* Show images after animation starts */
  visibility: visible;
}

JS…

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('.wrapper img');
  images.forEach((img) => {
    img.classList.add('start-animation');
  });
});

Any other suggestions would be appreciated. I’m a novice so hopefully I am making a simple mistake. There are probably two related issues. Cleaning up/tweaking the code, then getting it to run in the Divi environment. Hoping the first resolves the second.

I’m aware I could use CSS to write the captions on the images, but I just want to get something up and running first.

preventing the user from switching to another tab in an Electron app’

I have electron app which is very strict about switching tabs, User won’t be allowed to switch the tabs from the app. Now the problem is using some tools user is able to navigate from the app. can you tell me how can I prevent this?

I have tried all the methods still didn’t get the solution.

These same kind of tools are breaking the security and user is able to navigate from the screen, they are using this tool for some kind of exam app but this tool is same used for my app also, please @electronjs help.

name 1: ECPN.exe
link: https://github.com/BhaskarDev1008/ECPN_

name 2: App-Bypass-Demo
link: https://github.com/codetantra-bypass/App-Bypass-Demo/

Jquery muti select dropdown with checkbox

I’m trying to achieve jquery multi select dropdown with checkboxes with customized apply and cancel button inside dropdown. When I select Select All, dropdown is closing unexpectedly, even I tried to use stopPropagation but still it is closing the dropdown.

Any help would be highly appreciated

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MultiSelect with Fixed Select All</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- MultiSelect CSS & JS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nobleclem/jQuery-MultiSelect/jquery.multiselect.css">
  <script src="https://cdn.jsdelivr.net/gh/nobleclem/jQuery-MultiSelect/jquery.multiselect.min.js"></script>

</head>
<body>

<h2>Select Options</h2>
<select id="my-select" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="date">Date</option>
</select>
</body>
</html>
    
    $(document).ready(function () {
  $('#my-select').multiselect({
    placeholder: 'Select fruits',
    onControlOpen: function () {
      const $optionsContainer = $('.ms-options');

      // Add Select All checkbox once
      if ($('.select-all-container').length === 0) {
        const $selectAllContainer = $(`
          <div class="select-all-container">
            <label><input type="checkbox" id="select-all-checkbox"> Select All</label>
          </div>
        `);
        $optionsContainer.prepend($selectAllContainer);

        // Real fix: Stop mousedown before plugin closes the dropdown
        $(document).on('mousedown', function (e) {
          if ($(e.target).closest('.select-all-container').length) {
            e.stopPropagation();
          }
        });

        $('#select-all-checkbox').on('change', function () {
          const isChecked = $(this).is(':checked');
          $('#my-select option').prop('selected', isChecked);
          $('#my-select').multiselect('reload');
        });
      }

      // Add Apply/Cancel buttons once
      if ($('.custom-button-wrapper').length === 0) {
        const $wrapper = $('<div class="custom-button-wrapper"></div>');

        const $apply = $('<button class="custom-button">Apply</button>').on('click', function () {
          const selected = $('#my-select').val();
          alert('Selected: ' + (selected ? selected.join(', ') : 'None'));
        });

        const $cancel = $('<button class="custom-button cancel">Cancel</button>').on('click', function () {
          $('#my-select').val([]).multiselect('reload');
          $('.ms-parent').find('.ms-drop').hide();
        });

        $wrapper.append($apply).append($cancel);
        $optionsContainer.append($wrapper);
      }
    }
  });
});
.custom-button {
      display: inline-block;
      margin: 10px 5px 5px;
      padding: 5px 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .custom-button.cancel {
      background-color: #dc3545;
    }
    .custom-button-wrapper {
      text-align: center;
      padding-bottom: 10px;
    }
    .select-all-container {
      padding: 5px 10px;
      border-bottom: 1px solid #ccc;
      background: #f9f9f9;
      user-select: none;
    }
    
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MultiSelect with Fixed Select All</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- MultiSelect CSS & JS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nobleclem/jQuery-MultiSelect/jquery.multiselect.css">
  <script src="https://cdn.jsdelivr.net/gh/nobleclem/jQuery-MultiSelect/jquery.multiselect.min.js"></script>

</head>
<body>

<h2>Select Options</h2>
<select id="my-select" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
  <option value="date">Date</option>
</select>
</body>
</html>

Javascript TypeError undefined on for loop only (not off-by-one) [duplicate]

I have a function that gets called when you click a button. I’m checking to see if the clicked item has the class “itm-active”. If it does, don’t do anything. Else check for elements that have it and remve the class from them. Also change the text of the button one the class has been removed.

The issue comes in when I’m trying to change the text of the button. If I hardcode an item, in this case items[0], I am able to change the text of the button. If I try to do the same thing within the for loop, I’m getting the error “Uncaught TypeError: items[i] is undefined”

NOTE: If I comment out the line items[i].innerHTML = “test”;. The line above it doesn’t give any error. I left comments on the lines in question to make it easy to see.

Also I don’t believe this to be off-by-one error, because if it was then I should get the same error with items[i].classList.remove(“itm-active”); as well, but I don’t.

Off-by-one error discussion here

function activeStatus (event) {

            let activeItem = event.srcElement.classList.contains("itm-active");

            if (activeItem) {

            } else {
                    //Remove itm-active from other places
                    items = document.getElementsByClassName("itm-active");

                    items[0].innerHTML = "test"; //This works fine
                    for (let i = 0; i < items.length; i++) {
                            if (items[i].classList.contains("itm-active")) {
                                    items[i].classList.remove("itm-active"); //This works fine
                                    items[i].innerHTML = "test"; //Doesn't work for some reason
                            }
                    }
            }
    }

Selenium intermittently fails to find JavaScript-injected data (“venueProfile”) in page source

I’m scraping the following page using Selenium:
https://www-eur.cvent.com/venues/en-US/dubai/hotel/delano-dubai/venue-12d8dd54-25d5-49f8-99a0-d292e52f3b34

My goal is to extract the venueProfile JSON that’s injected via JavaScript into the page. I use driver.page_source and a simple regex to find it.

Problem:
Sometimes, the “venueProfile” string is in the page source. Sometimes it’s not — without any code changes.

Expected behavior:
After WebDriverWait ensures the tag is loaded, the page source should always contain “venueProfile”. But that’s not consistently happening.

What I’ve tried:

Confirmed that the string is present in browser DevTools.

Saved debug.html on failure — in those cases, “venueProfile” is truly not present.

Added delays and waited for 10+ seconds.

Changed the user-agent string.

Verified that no exception is thrown — the page loads, but the data is missing.

Here’s the minimal code:

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
import re

options = Options()
options.add_argument("--headless")
options.add_argument("user-agent=Mozilla/5.0")

driver = webdriver.Chrome(options=options)
driver.get("https://www-eur.cvent.com/venues/en-US/dubai/hotel/delano-dubai/venue-12d8dd54-25d5-49f8-99a0-d292e52f3b34")

WebDriverWait(driver, 15).until(
EC.presence_of_element_located((By.TAG_NAME, "body"))
)

html = driver.page_source

match = re.search(r'"venueProfile":"(.*?)"', html)
print("Found" if match else "Not found")

driver.quit()

How can I ensure the JavaScript-generated content is reliably available before reading the page source?
Any best practices or techniques to improve reliability would be appreciated.

Synchronize Scrolling Between Two Divs of Different Heights

Problem :

I want two divs to scroll together in sync. For example, if the first div is halfway scrolled, the second should also be halfway through its own content, even though the two divs are different heights. I’m not sure how to link their scroll positions properly.

MINIMUM REPRODUCIBLE EXAMPLE :







for (i = 0; i < 10; i++) {
            document.querySelector(".right").insertAdjacentHTML("afterbegin", `<div class="box">${10 - i}</div>`)
        }
        for (i = 0; i < 20; i++) {
            document.querySelector(".main").insertAdjacentHTML("afterbegin", `<div class="box">${20 - i}</div>`)
        }


body{
            margin: 0px;
            padding: 0px;
        }
        .box {
            height: 200px;
            width: 250px;
            border: 2px solid red;
            margin: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: larger;
        }

        .cont {
            display: flex;
            align-items: flex-start;
        }


<div class="cont  ">
        <div class="main "></div>
        <div class="right "></div>
    </div>

How do I find clientWidth and clientHeight of an image whose element was created through jQuery?

I used jQuery to create image element of an image that exists. I appended the image element to the div where the image is supposed to appear. I tried to find the clientWidth and clientHeight of the image but both the clientWidth and clientHeight of the image were 0. On the other hand, naturalWidth and naturalHeight were correctly determined, How can I get the correct clientWidth and clientHeight of the image given that its element was created through jQuery?

let imageElement = $('<img>')
    .attr('src', 'path/image.jpg')
    .addClass('image')
    .css({width: '100%', 'max-width': '100%'});
    
    $('#div-container').prepend(imageElement);

 
$('.image').on('load', function (){
    
    const images = document.getElementsByClassName('image');
    
    let image = images[0];
    
    let naturalWidth = image.naturalWidth; //Correct width was found.
    let naturalHeight = image.naturalHeight; //Correct height was found.
    let renderedWidth = image.clientWidth; // I get 0 here.
    let renderedHeight = image.clientHeight; //I get 0 here.
});

How do I remove an event listener if the function for it is nested within another function?

This is a tricky situation. I am trying to create a SVG container which tracks mouse-drag movements.

So I have attached an onmousedown event listener to the container. If the mouse is held down, it starts a process where it attaches another mousemove listener which tracks the mouse’s movements.

However the function also ataches a mouseUp listener which is supposed to remove that mousemove listener.

The problem is that this mousemove listener function is within a scope of its own. So I cannot access it from the block which has the mouseup listener.

How do you get around this problem?

var svgCont = document.querySelector(".svgCont");

svgCont.addEventListener("mousedown", (e)=>{
    //e: init mouse pos
    startListeningForDrag([e.x, e.y]);
});


function startListeningForDrag(initMP){

    console.log("InitMP: " + initMP);

    svgCont.addEventListener("mousemove", function trackMouse(){
        console.log("tracking");
        
    });

    svgCont.addEventListener("mouseup", function(){
        svgCont.removeEventListener("mousemove", trackMouse )
    });

}

Sizing jpg content on innerHTML

I have a webpage with one tab called “Photos”. It is running locally. On selecting the tab it loads the photo called “Paris.jpg” which is 800px by 450px. No matter what I try, the photo is placed into a small box with scroll bars attached. I’d like the frame adjust to hold the entire photo with no scroll bars needed.

     <!DOCTYPE html>
     <html>
     <head>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
    <style>
    body {
    font-size: 25px;
    font-family: Arial ;
    }

    .tab {
      overflow: visible;
    }

    /* Style the buttons inside the tab */
    .tab button {
      background-color: inherit;
      float: right;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 7px 40px;
    }

    .tabcontent {
      display: none;
      position: relative;
    }
    </style>
     </head>
     <body>
    <div class="tab">
      <button class="tablinks" onclick="openActivity(event, 'Photos')">Photos</button>
    </div>
    <div id="Photos" class="tabcontent">
    </div>
    <script>
    function openActivity(evt, activityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "auto";
        tabcontent[i].style.overflow = "visible";
        tabcontent[i].innerHTML='<object type="text/html" data="Paris.jpg" ></object>';
        tabcontent[i].style.width = '100%';
        tabcontent[i].style.height = '100%';
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(activityName).style.display = "block";
      evt.currentTarget.className += " active";
    }
    </script>
    </body>
    </html>

I tried adjusting display in the CSS and setting height and width to 100%. Nothing seems to work