What is the best way to launch a Popup window that spans from the top to the bottom of the screen?

I'm attempting to create a popup window that stretches from the top of the screen to the "applications" bar in Windows. Here's the code I'm using:

function windowOpener(windowHeight, windowWidth, windowName, windowUri) {

var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;


var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;


newWindow = window.open(windowUri, windowName, 'resizable=0,scrollbars=1,width=' + windowWidth +
    ',height=' + windowHeight +
    ',left=' + centerWidth);

newWindow.focus();
return newWindow.name;

}

Can anyone explain why this code works in Chrome but not in IE?

Appreciate any help. Thank you!

javascripthtmlcss

Answer №1

I believe just using screen.width and screen.height is sufficient. There is no need to include window before them.

Update: It seems Internet Explorer (IE) requires a "fullscreen=yes" parameter.

Give this a try:

<script type="text/javascript">
<!--
function launchPopup(url) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0'
 params += ', fullscreen=yes';

 newWindow=window.open(url,'myNewWindow', params);
 if (window.focus) {newWindow.focus()}
 return false;
}
// -->
</script>

<a href="javascript: void(0)" 
   onclick="launchPopup('mypopup.html')">Open fullscreen popup window</a>

Answer №2

Here is a method that has been effective for me:

<a class="popme" href="http://codetips.com">pop up</a>

JavaScript

  $(document).ready(function() {
    $(".popme").click(function(event){
      var height = 600;
      var width = 320;
      var screenHeight = screen.height;
      var screenWidth = screen.width;
      var topPosition = screenHeight/2 - height/2;
      var leftPosition = screenWidth/2 - width/2;
      var popupWindow = window.open(this.href + '', 'popup', 'height=' + screenHeight + ', width=' + width + ', scrollbars=no, left=' + leftPosition + ', top=' + topPosition);
      popupWindow.focus();
      return false;
    });
  });

Example:

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

Executing a PHP script to initiate a ping transmission

I have a project to complete for my university involving the development of a simple application. However, I lack experience in this area and am unsure how to proceed. The objective is straightforward: I want to send ping requests to 50 IP addresses at t ...

javascriptphpcsshtmlping

Timeout error for WebSocket connection on JavaScript client

My first attempt at using websockets is not going as planned. Since my IP address changes frequently, I decided to make the following websocket call on the server-side: $echo = new echoServer("myurl.com","9000"); On the client-side, I'm making the f ...

javascriptphpwebsocket

What is the best way to encode only a specific section of a JavaScript object into JSON format?

Currently, I am in the process of developing a 2D gravity simulation game and I am faced with the challenge of implementing save/load functionality. The game involves storing all current planets in an array format. Each planet is depicted by a Body object ...

javascriptjsonjavascript-objectsstringify

placeholder for dropdown selection in Vue.js version 2.0.0

Currently, I am in the process of developing a web application using vuejs 2.0. In order to create a straightforward select input, I employed the following code: <select v-model="age"> <option value="" disabled selected hidden>Select Age&l ...

javascriptselectvue.jsvuejs2

Moving the webpage into the realm of mobile and tablet devices

Over the next few weeks, I will be working on transitioning my website content to have both a mobile and tablet version. During this process, I have some questions: What is the best way to redirect users to the correct site based on their device/browse ...

htmlcssmobiletablet

Include a sharing option within the magiczoomplus feature

My current project involves creating a WordPress site using Artisteer along with several plugins to showcase photo galleries. To enhance the user experience, I purchased an e-commerce WordPress theme which features a share button that I really like. Now, I ...

javascriptcssmagiczoomplus

Unable to send a String to the controller via ajax

Exploring web development using play framework and ajax. I'm looking to pass a string from a form to a controller using ajax, but unsure of how to go about it. Can anyone assist me with this? Here's my code snippet: html: <form onsubmit="retu ...

javascriptajaxplayframework

Divergent Bootstrap layouts for different devices

https://i.sstatic.net/g1YeJ.png I am working on creating a layout where I want to display certain content differently based on whether the user is viewing it on a mobile or desktop device. The current approach I have taken involves duplicating some divs ...

htmltwitter-bootstrapresponsive-design

Pattern matching for directory path excluding the filename

Looking for assistance with creating a JavaScript regex pattern to validate text input as folder paths only, excluding the filename. Can someone provide guidance on this? For example: folder1/folder2/folder3 => valid folder1/folder2/filename.txt1 =&g ...

javascriptangularregex

CSS - Placeholder styling not being effective when selectors are grouped

Why is Chrome successful at executing this code: .amsearch-input::-webkit-input-placeholder { color: red; } <input class="amsearch-input" placeholder="It works!" /> ...while it doesn't work in other browsers: .amsearch-input::-we ...

cssgoogle-chromevendor-prefix

Troubleshooting Angular directives and the complications of closures

I am facing a problem with this specific directive: @Directive({ selector: '[imgTest]', }) export class ImgTest implements AfterViewInit, OnDestroy { private originalImage: HTMLImageElement; private secondImage: HTMLDivElement; construc ...

javascriptangular

What other choices are available for the Angular ui-select2 directive?

Within the Angular select2 controller below: <select ui-select2 id="projectListSelection" data-placeholder="Select a Project ..." ng-model="selectedProject"> @*ng-options="project.WebsiteName for project in projectList"*@ ...

javascriptjqueryangularjsui-select2angularjs-select2

What is the Proper Way to Import Three.js Modules in a Vue Application?

My goal is to utilize three.js for displaying a gltf file. To achieve this, I need to import the GLTFLoader module from the three.js node package. As per the documentation, the correct way to import it is: import { GLTFLoader } from 'three/examples/ ...

javascriptvue.jsthree.js

Creating a structure for data in Ruby on Rails to facilitate AJAX calls to controller actions

I am in need of a button on my website that can send data to the create action of a controller named "pagetimes". The functionality seems to be partially working, but it is not sending all the specified data. This issue may be due to my inability to struct ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

Preserve unencoded HTML content as a string

Here is an example string: text = '&lt;div class="blue"&gt; &lt;p&gt;This is a sample text string' When I use <%= text.html_safe %> in my webpage, it displays correctly, but not when I try it in the console. If I attempt: ...

htmlruby-on-railsruby

There are multiple sets of radio buttons within nested ng-repeats, but only the final group displays the selected value

I am having an issue with updating a form that contains multiple radio buttons based on data retrieved from an API. The challenge is that only the last set of radio buttons displays the value correctly. Below is the code snippet I am using (angular bracket ...

javascriptangularjs

Is there a way to directly access the React component that was clicked?

I'm looking to dynamically change the class of a component when clicked. By using state to create a new component with properties such as name and done (initiated as false), which are then added to the todos array, I want to find out how to identify t ...

javascriptreactjsreact-hooksjsxreact-state

Use Django, Ajax, and Jquery to incrementally add items to a "cart" by selecting checkboxes one by one

Despite adding new code, it's still not working as expected... I've been attempting to implement a feature where users can select items using checkboxes and add them to the "cart" displayed at the top of the page. Each item on the page has a che ...

javascriptjqueryajaxdjango

The Safari browser is having trouble rendering the website's CSS and HTML properly

Check out this example of how the website should look on Chrome for Android: https://i.stack.imgur.com/RzUSp.jpg And here is an example from Safari on iPad Mini 2: https://i.stack.imgur.com/PAj2i.jpg The Safari version doesn't display the proper fon ...

htmlcsssafari

Applying CSS to Dynamic JavaScript Elements: A Guide to Styling Without In-line Code

I'm a beginner in web development and I've been experimenting with applying styles to dynamically generated div elements using JavaScript. So far, I've only been able to manually add inline styling through this function: function applyStyle( ...

javascripthtmlcss