What is the best way to open a browser window at a quarter of its default size?

Is there a way to open a window at 25% of its default device browser window size?

I attempted the code below, which worked. However, it only accepts pixel inputs and not relative % values. This makes it non-scalable across various devices.

window.resizeTo(width, height);

Does anyone have any suggestions on how to achieve this with % values?

Update: How can I make sure this window opens in a new browser tab with the address bar hidden?

I want to launch a chat window that always opens in a new, smaller window with minimal tools visible (only close, min/max buttons).

javascripthtmlcss

Answer №1

let height = window.innerHeight * .25;
let width = window.innerWidth * .25;
window.resizeTo(width, height);

Answer №2

<!DOCTYPE html>
<html>
<body>
<button onclick="myCustomFunction()">Click to Open Window</button>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function myCustomFunction() {
    var width = $( window ).width()/4;
    var height = $( window ).height()/4;
    var newWindow = window.open("", "", "width="+width+"px,height="+height+"px");
}
</script>

</body>
</html>

Answer №3

var dimensions = "width="+screen.width/4+",height="+screen.height/4;
window.open("http://www.example.com","demo",dimensions)

Absolutely correct, percentages are not accepted here. Only pixels can be used. Utilize the screen object to retrieve height and width values.

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

tips for sending types as properties in a versatile component

I am facing a challenge with passing types as props to a reusable component. I have a component where I pass rows and headings as props, but I need to find a way to pass types as props as well. Below is the code for my reusable component: import { TableCe ...

javascriptreactjstypescript

Utilize a single JavaScript file to handle various views without encountering errors due to undefined functions

My backend editing requires a single JS file. However, I face the challenge of needing different sets of methods for view A and view B — never both at the same time. To streamline this process, I combined all the jQuery functions for both views into one ...

javascriptjquery

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

When using 960.gs, I have created a login screen with a div for the login form that has a background image. This div is positioned below a header, which centers it in the browser window. In my CSS, I am setting the body color as follows: body { backgr ...

htmlcss960.gs

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...

cssangularmapboxmapbox-gl-js

Is it possible to pass a useState function to a component during its initialization?

Currently, I am utilizing the useState hook to effectively handle the rendering of components on the screen. My goal is to initialize it with a component while passing in the useState function to set the screen within the component. Below is my App.js fil ...

javascriptreactjsreact-hooksuse-state

Hide the dropdown menu when the user clicks anywhere else on the screen

I have a scenario with 2 dropdown buttons. When I click outside the dropdown or on it, it closes. However, if I click on the other dropdown button, it does not close and the other one opens. I want them to close when I click on the other button or anywhere ...

javascriptjquery

Is there a way to smoothly navigate back to the top of the page after the fragment identifier causes the page to scroll down?

I do not want to disable the functionality of the fragment identifier. My goal is for the page to automatically scroll back to the top after navigating to a specific section. This inquiry pertains to utilizing jQuery's UI tabs. It is crucial to have ...

javascriptjqueryhtml

Reproducing scripts in Google Tag Manager and React/Next applications

Currently, I am delving into the realm of Google Tag Manager and React + Next.js for the first time. This experience is proving to be quite intriguing as my familiarity with GTM is limited and my exposure to React is even less. Nonetheless, it's not a ...

javascriptreactjsnext.jsgoogle-tag-manager

VueJS - Input Image Display Issue Causing Browser Slowdown

I'm experiencing some issues with my VueJS component that includes a file input and displays an image afterwards. Strangely, this is causing my web browsers (both Firefox and Chromium) to freeze up and use massive amounts of CPU. I tried switching to ...

javascriptimagefirefoxvue.jschromium

Effective ways to enable users to upload files in a React Native app

Being in the process of developing a react native app, I am faced with the challenge of allowing users to easily upload files from their mobile devices (pdf, doc, etc). Unfortunately, my search for a suitable native component has proven fruitless. Can anyo ...

cssjavascriptreact-native

Tips for simulating difficult private attributes within a class during unit testing in TypeScript

Is there a way to mock the value of a hard private property in a unit test? For example, how can I expect something like expect(event.getEventHis()).toBeEqual(['a', 'b']) export class EventController { #event: []; constructor() { ...

javascripttypescriptunit-testing

Building a navigation system with previous and next buttons by implementing JavaScript

I am currently working with AngularJS and I have data that is being received in the form of an array containing two objects. As a newcomer, I am still trying to figure this out. data[ { "something":"something1", "something":"something1", "something":"some ...

javascriptarraysangularjsobject

My a:hover isn't functioning properly and my <a> tag is not redirecting to the link when clicked. Can anyone help me troubleshoot these issues?

I've created a website with multiple stacked sections. Each section is contained within a div with the class class="concertDiv". In one of these sections, I want to display an album cover on the left side and three clickable text rows on the right sid ...

htmlcss

Enhancing web page interactivity through dynamic element names with Javascript and jQuery

I have an interesting HTML setup that looks like this: <div> <input type="text" name="array[a][b][0][foo]" /> <input type="text" name="array[a][b][0][bar]" /> <select name="array[0][a][b][baz]>...</select> </div> ...

phpjavascripthtmlarrayspost

Steps to fully eliminate the recent action panel from Django's administrative user interface

Is there a way to completely remove the recent action panel from Django admin UI? I have searched extensively but all the information I find is about clearing the data in the panel from the database. What I'm looking for is a way to entirely eliminate ...

pythonhtmlcssdjango

Duplicate a DOM element and incorporate animation into it

After extensively researching articles and documentation on this topic, I have yet to find a solution that aligns with the approach I am attempting to implement. My scenario involves an array of category items which contain a nested array of products be ...

javascriptangulardom

Is there a way to optimize the re-rendering and redownloading of images files in map() when the useState changes? Perhaps we can consider using useMemo

This Chat application is designed with channels similar to the Slack App. Currently, I am utilizing a map() function for filtering within an array containing all channel data. The issue arises when switching between channels, resulting in re-rendering and ...

javascriptreactjsnext.jsreact-hooks

Embeddable video player failing to adjust size properly within parent div

I've been tackling the challenge of making iframes responsive within a div element, but I've hit a roadblock. While there are plenty of solutions available online, none seem to work seamlessly when dealing with YouTube video embeds. Currently, m ...

cssiframeresponsive-designskeleton-css-boilerplate

Simultaneously, two identical messages arrived in the form of push notifications via FCM

I have been working on implementing WebPush notifications using Vue.js and FCM. However, when testing the functionality, I am facing an issue where instead of receiving just one notification from Firebase, TWO IDENTICAL PUSH NOTIFICATIONS are being receive ...

javascriptfirebasevue.jsfirebase-cloud-messaging

Issues arising with transferring information between components

My webpage had a header with a search engine input, a list of posts, and pagination all on one page. I made the decision to separate the header into its own component in a different Vue file. However, after making this change, searching for posts by their ...

javascripthtmlvue.jsvue-component