Is it possible to adjust the size of the new window based on changing requirements?

I have a setup where my JSP file is linked with a JS file. I want a new window to display a photo every time the link is clicked. Currently, everything is working fine and a new window pops up, but it has fixed width and height specifications.

else if (nameClass == "label3"){
  var myWindow = window.open("", "MsgWindow", "width=1600, height=1000");
  myWindow.document.write("<img src='images/images/szafa.png'>");
}

I am wondering how I can adjust this to dynamically change the size of the window based on the image dimensions?

Answer №1

I haven't tried out this code yet, but here's the concept:

var myPopup = window.open("", "MsgWindow", "width=100, height=100, resizable=1, scrollbars=1, menubar=1");
myPopup.document.write(
'<script language="Javascript" type="text/javascript">' +
'function getElementById(id)' +
'{' +
'  if (document.getElementById != null)' +
'    return document.getElementById(id)' +
'  if (document.all != null)' +
'    return document.all[id]' +
'  alert("Problem getting element by id")' +
'  return null' +
'}' +
'function resizeImage()' +
'{' +
'   var elem = getElementById("pic");' +
'   if(elem)' +
'   {' +
'       var h = elem.clip ? elem.clip.height : elem.offsetHeight;' +
'       var w = elem.clip ? elem.clip.width : elem.offsetWidth;' +
'       myPopup.resizeTo( w, h );' +
'       var myWidth = 0, myHeight = 0, d = myPopup.document.documentElement, b = myPopup.document.body;' +
'       if( myPopup.innerWidth ) ' +
'       { ' +
'           myWidth = myPopup.innerWidth; ' +
'           myHeight = myPopup.innerHeight; ' +
'       }' +
'       else if( d && d.clientWidth ) ' +
'       { ' +
'           myWidth = d.clientWidth; ' +
'           myHeight = d.clientHeight; ' +
'       }' +
'       else if( b && b.clientWidth ) ' +
'       { ' +
'           myWidth = b.clientWidth; ' +
'           myHeight = b.clientHeight; ' +
'       }' +
'       myPopup.resizeTo(6+ w + ( w - myWidth ),6+ h + ( h - myHeight ) );' +
'   }' +
'}' +
'</script>'
);
myPopup.document.write("<img id='pic' src='images/images/szafa.png'>");
myPopup.document.body.onLoad='resizeImage';

Alternatively, you could create a PHP script that outputs the HTML above and passes the image name as a URL query parameter to the script.

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

OpenLayers: real-time data display of objects from a list

When working with OpenLayers, I encountered an issue where my object was undefined and I couldn't retrieve the information I needed to display feature data on the map. Initially, I passed a list from the controller to my JSP file and attempted to use ...

Adding properties to a class object in Javascript that are integral to the class

Recently, I've been contemplating the feasibility of achieving a certain task in JavaScript. Given my limited experience in the realm of JavaScript, I appreciate your patience as I navigate through this. To illustrate what I am aiming for, here' ...

Display a hidden div only when a cookie is set during the initial visit

I'm currently facing an issue while trying to set multiple cookies based on the existence of a div using JavaScript. On the first visit, I want to display the div to the user if it exists, then set a cookie (named redCookie) that expires in 3 days. Up ...

What is the syntax for inserting a text (value) into a text input field in HTML using PHP?

I'm having trouble getting the input field to populate with "Hello" when the button is clicked. I've checked for a solution, but can't seem to find one. Any help would be appreciated. Thank you. <!DOCTYPE html> <html> <head&g ...

Firebase 9 - Creating a New Document Reference

Hey everyone, I need some help converting this code to modular firebase 9: fb8: const userRef = db.collection('Users').doc(); to fb9: const userRef = doc(db, 'Users'); But when I try to do that, I keep getting this error message: Fir ...

The useState variable is unexpectedly returning an empty array even though I have explicitly set it as an array containing objects

Hey there! I've encountered a scenario with my component where I'm utilizing the useState hook to set up the initial value of myFeeds variable to an array called feeds. I have also implemented an effect that is supposed to update myFeeds with any ...

JavaScript still mentions a class that no longer exists

One of my elements has a class of .collapsed. When this element is clicked, a jQuery function is triggered to remove the .collapsed class and add the .expanded class instead. Even after the .collapsed class is removed, the function I have created continue ...

Retrieve a specified quantity of JSON data from an external API

Dealing with a recently received API from an external source: (please note: the data returned is extensive) I'm aware that I can retrieve this large object by using the following method: $.getJSON('https://www.saferproducts.gov/RestWebServices ...

The AudioPlayer refuses to play following a track change

I am looking to implement an audio player in React Nextjs that features interactive dots, each representing an audio track. The functionality I want is such that clicking on a dot will pause the currently playing track (if any) and start playing the select ...

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

I am currently facing the challenge of managing multiple pages within a single document and I would like to utilize jQM 1.3's Panel widget to control navigation between these pages. However, the issue arises from the requirement that Panels must be co ...

How can I add content to the body of a modal in Bootstrap 3?

My application has a button that, when clicked, is supposed to trigger a modal popup containing some data. I want the data in the modal to come from another application via a PHP file accessed through a URL. How can this be achieved? <?php echo '& ...

Sharing AngularJs controllers between different modules can help streamline your

I'm facing an issue with trying to access an array from one controller in another controller. Despite simplifying the code for clarity, I still can't seem to make it work. Here is my first controller: app.controller('mycont1', [' ...

JS URL verification: ensuring valid URLs with JavaScript

Is it possible to combine two scripts that perform separate actions, one clicking a button and opening a new window, and the other interacting with elements in that new window simultaneously? function run() { var confirmBtn = document.querySelector(".sele ...

The absence of the iframe in ie8 is causing problems that cannot be fixed with relative positioning

On a website, I am integrating an external 2-factor authentication solution called Duo Web using their PHP and Javascript. It works smoothly on all browsers except for IE8. When the user passes the initial login screen, the 2FA login page loads, but the if ...

What is the process of acquiring JSON and converting it into a JavaScript object array?

Can someone please assist me in converting the JSON generated in Spring Boot into a JavaScript object array? I'm currently facing some difficulties. https://i.stack.imgur.com/Tx5Ri.png I've been using XMLHttpRequest and my JS code is as follows ...

Handlebars: The property "from" cannot be accessed because it is not an "own property" of its parent and permission has been denied

My backend is built on Node.js and I am using server-side rendering with handlebars. I have a `doc` array of objects in handlebars that contains keys "content" and "from". However, when I try to loop through this array using `#each`, I encounter the error ...

Adjusting the bottom property to a negative value in CSS will stretch the page downwards

I want to hide a portion of an HTML element at the bottom of the page and then reveal the entire element by sliding it upwards upon clicking with the help of CSS3 transitions. The expected behavior is for the part of the element extending below the page t ...

Accessing the Parent Variable from a Function in JavaScript: A Guide

How can you properly retrieve the value of x? let x = 5 const f = (n:number) => { let x = "Welcome"; return x * n // Referring to the first x, not the second one } Also, what is the accurate technical term for this action? ...

When attempting to import vue.js within a JavaScript file in a Django application, an error of 'Uncaught SyntaxError: Cannot use import statement outside a module' is encountered

Currently, I am delving into incorporating vue.js into a live django project and have come across a stumbling block. After setting up npm in the venv environment and installing the vue package, my next step is to create a Vue object within a js file using ...

Display a tooltip when the cursor hovers close to a line in D3 visualizations

Currently, I have a D3js line chart with SVG circles added to the points. When users hover over these circles, they can see a tooltip. https://i.sstatic.net/kYpeg.png https://jsfiddle.net/jhynag08/38/ However, I would like the tooltip to appear when user ...