Adjustable Height Feature for JavaScript Pop-Up Windows

I'm looking to design a popup window that has a fixed width and a height that adjusts based on the user's screen size. Is this even possible? I've searched through various websites but haven't found a solution yet.

I came across a similar question about dynamic height for popups, but my requirement is different as I don't need it sized based on content.

Dynamic height for popups depending on content, is it possible?

The popup window is used for training purposes. It automatically resizes and is placed on one side of the screen, providing instructions on how to use an application that occupies the rest of the screen. The challenge lies in accommodating users with different monitor sizes and screen resolutions, although we primarily focus on IE11.

A quick disclaimer: I have minimal knowledge of JavaScript other than its existence and potential to meet my requirements. I am familiar with HTML & CSS. Here's what I've attempted so far, but I'm aware it may not be the correct approach:

    <a href="link.html" onclick="javascript:void window.open('link.html','1429893142534','width=290,height=675,toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=0,left=0,top=0');return false;">Link</a>

I experimented with removing the height parameter entirely, but that didn't yield the desired result. The current height is based on the smallest screen size a user might have, which appears disproportionate on larger screens with higher resolutions. Perhaps there's an alternative to JavaScript that would be more effective?

Thank you in advance for any assistance!

javascripthtmlcss

Answer №1

Here is a different approach you can take:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<a href="" onclick="redirectToLink();">Click Here</a>
<script>
    function redirectToLink()
    {
        window.open('newpage.html','1429893142534','width=' + (parseInt(window.innerWidth) * 0.4) + ',height=' + (parseInt(window.innerHeight) * .4) + ',toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=0,left=0,top=0');
        return false;
    }
</script>
</body>
</html>

Answer №2

<a href="page.html" onclick="javascript:void window.open('page.html','1429893142534','scrollbars=1');return false;">Page</a>

This solution meets your needs and it has been tested successfully. For additional information, please visit this link

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

Is it possible to maintain inline style modifications when the dispatch event is triggered?

I am encountering an issue with inline style changes that are reset once my dispatch function is completed. Even though the rest of my component's functionality is working fine (the counter continues to run), the state is being re-rendered. Here is a ...

javascriptreactjs

Determining when the clear button is clicked in a v-select (vue-select) detection strategy

While working on creating a drop-down using v-select, I encountered an issue. After selecting an option, I needed to clear the drop-down and revert the option array back to its initial stage upon clicking the clear button. I attempted various methods such ...

javascriptvue.jsdropdownv-selectvue-select

Implementing gridlines on a webpage using HTML and JavaScript to mimic the grid layout found in Visual Studios

Currently, I have a grid snap function in place, however, I am looking to add light grey lines horizontally and vertically on my Designing application. The goal is to achieve a similar aesthetic to Visual Studios' form designing feature. Utilizing so ...

javascripthtmlcssformsgridlines

The functionality of my JQuery validation plugin seems off when it comes to handling checkbox inputs

I created a versatile validation plugin that accepts a function to check input validity, along with callbacks for valid and invalid cases. The plugin consists of two functions: '$.fn.validation()' to attach validation logic and success/failure ca ...

javascriptjqueryvalidationpluginsjquery-plugins

Using Javascript with the Google Calendar API: How can I swiftly make a new event with the Quick Add feature?

Currently, I am exploring the Google Calendar API and struggling with implementing a Quick Add Event using javascript. Is it possible to achieve this task? Are there any resources or examples that can help me understand how to do it? My issue lies in the ...

javascriptgoogle-apigoogle-calendar-api

What are different ways to modify a bytearray within a file using angular js, whether it is an .xlsx or other

I received a bytearray response from my API that was converted from a .xlsx file. I now need to open or download this bytearray in the browser after converting it back to its original file extension. Can anyone provide guidance on how to achieve this? I ...

javascriptangularjsblob

How to send a contact form in Wordpress with multiple attachments via email without using any plugins

The main objective is to enable users to submit their own content for new articles (including text and files) to the administrator's email. A form has been created for this purpose: <form class="form form-send" enctype="multipart/fo ...

javascriptphpajaxwordpresssend

Is there a way to utilize PHP/HTML to exhibit a diverse array of random images as dynamic background visuals?

I'm currently learning the process of constructing a website. I've successfully constructed the index page, and below you will find the PHP and HTML code: <?php session_start(); $pngFiles = array('image1.png', 'image2.jpeg' ...

phphtmlcss

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas

Can the .scroll function be turned off when a user clicks on an anchor link that causes the page to scroll?

I am currently developing a timeline page and I want to implement a feature similar to the chronological list of years displayed on the right side of this webpage: As part of this feature, I have set up a click event which adds a circle border around the ...

javascriptjqueryhtmlcss

What is the best way to transform the words in my JavaScript array into clickable links?

I am working on a search bar that autofills words and I want to turn those autofilled words into clickable links. For example, if I type "locations" in the search bar, I want it to autofill the word "locations" and turn it into a link that directs me to pa ...

javascripthtmlcss

Display a series of messages using an Angular directive

Here is a sample HTML code: <section class="correspondence"> <header> <div class="from">{{ message.from }}</div> <div class="when">{{ message.when }}</div> </header> <div class="content"> { ...

javascriptangularjs

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Currently, I am utilizing the most recent version of Angular Material (1.0.0) library and I am attempting to ensure that my <md-sidebar> panel occupies the entire height of the available space on the webpage. While it functions correctly on a regul ...

htmlcssangularjsangular-material

Additional spacing within nested divs utilizing the display: table property

In my current project, I am working on styling a list to resemble a table layout for horizontal alignment. The first column contains labels, while the second column features groups of buttons using Bootstrap's btn-group-justified class. This setup ess ...

csstwitter-bootstrap

What is the best way to align the middle element of a flex row in the center?

Desired Outcome: I have three elements within a container styled with display: flex. My goal is to align the left item to the left, the right item to the right, and have the middle item centered. space-between does not achieve this look due to the varyin ...

htmlcssflexbox

Delete particular user inputs following a $.ajax request

I have created a search feature with inputs that allow users to search the database using ajax requests. Unfortunately, I am facing an issue where the response from the server includes the search inputs themselves. This is not what I want. Here's a ...

javascriptjqueryhtmlajax

Ways to retrieve the context of a function caller?

I'm exploring the concept of JavaScript scopes and am curious about a specific scenario: // B has access to 'context' var x = function (context) { y = function () { console.log(context); }; y(); }; x('cool'); ...

javascriptnode.js

What could be causing my React Router to display empty pages?

I've been working with the latest version of create-react-app and have been struggling to display the pages within my app. I've tried both functional components and class-based components, but nothing seems to work. I've wrapped the content ...

javascriptreactjsreact-routercreate-react-app

Deploying a node application and a Java JAR to Heroku

Currently in the process of developing a node.js app, with plans to host it on Heroku. The only complication is that the app depends on a jar file that needs to be executed. Can Heroku support running Java for this purpose? ...

javascriptjavanode.jsherokujar

Title of the most recently created file on GitHub

Being new to web designing and javascript, I am seeking help in understanding how to display the latest PDF file in my small website hosted on GitHub. Despite successfully displaying a PDF file, I encountered difficulties when attempting to showcase the mo ...

javascripthtmlgithubgithub-api