Javascript: save and restore browser window sizes - javascript

In my vaadin application, user can save a user workspace with multiple browser popup windows and restore the workspace later.
I save the browser window size returned by following vaadin methods.
Page.getBrowserWindowHeight();
Page.getBrowserWindowWidth();
Vaadin returns the content width and height of the browser in above methods, not including title bar and other controls in the top such as the address bar and toolbar.
When restoring a workspace, I use resizeTo() javascript method to set the size of the browser windows.
JavaScript.getCurrent().execute("resizeTo(" + windowWidth + "," + windowHeight + ")");
resizeTo() sets the total width and height of the browser window, not the content area. Due to this, the browser window becomes smaller than the intended size.
Does anyone know of a better method to achieve this?

The methods you are using
Page.getBrowserWindowHeight();
Page.getBrowserWindowWidth();
use the following JavaScript to determine the 'UI' dimensions
// Window height and width
var cw = 0;
var ch = 0;
if (typeof(window.innerWidth) == 'number') {
// Modern browsers
cw = window.innerWidth;
ch = window.innerHeight;
} else {
// IE 8
cw = document.documentElement.clientWidth;
ch = document.documentElement.clientHeight;
}
To do this using resizeTo() (although I think you may run in to some browser compatibility issues) you need to take into account a few other thing:
function doResize(width, height){
// Window height and width
var cw = 0;
var ch = 0;
if(typeof(window.innerWidth) == 'number') {
// Modern browsers
cw = width + (window.outerWidth - window.innerWidth);
ch = height + (window.outerHeight - window.innerHeight);
} else {
// IE 8
cw = width + (document.documentElement.offsetWidth-document.body.offsetWidth);
ch = height + (document.documentElement.offsetHeight-document.body.offsetHeight);
}
window.resizeTo(cw, ch);
}
Another option would be to create a hidden component with RPC to do your own JS browser size calculations.

Related

How to use javascript/css to force a website page zoom level to fixed value?

I need html/css/javascript to fix everyone's zoom level on a website page.
Does anyone have an idea on the javascript?
The only way I found that works natively is in designing my HTML/CSS with the units "vw" and "vh" (% relative to the viewport) instead of "px". You can use it everywhere you used to put "px" (font-size, width, height, padding, margin, etc...). Very useful for a page designed to be display full screen only (no scroll) or "Kiosk-style". "vw" and "vh" are not affected by browser zoom. See: https://www.w3schools.com/cssref/css_units.asp
You can use the document.onLoad to change the scale in CSS through Javascript:
var minimum_width = 840; // Put you own value here
var desired_width = 1440; // and here
var actual_width = document.all ? document.body.clientWidth : window.innerWidth;
var actual_height = document.all ? document.body.clientHeight : window.innerHeight;
if (desired_width > actual_width) {
desired_width = actual_width;
}
if (desired_width < minimum_width) {
desired_width = minimum_width;
}
var scale = Math.round(actual_width/desired_width*100)/100;
var desired_height = Math.round(actual_height/scale);
var body = document.body;
body.style.transform = "scale(" + scale + ")";
body.style.width = desired_width + "px";
body.style.minHeight = (desired_height) + "px";
Will work on most popular browsers.

Touch events on canvas in javascript have wrong coordinates

I have an html5 canvas game for desktop browsers that uses the keyboard, and I'm trying to create compatibility for smartphones by adding touch-screen controls.
The current issue is that the events for touch input are returning X and Y coordinates that don't match the location where I'm touching.
The purple dots in the image above are a diagnostic test I added. The game places a circle in each location where it detects a touch event. In this case, I traced the border of my phone screen. The placement of dots illustrates the difference between where my screen actually is and where the game seems to think it is.
<body onload="html_init()">
<div class="canvas_div" id="canvas_div">
<canvas width="1050" height="600" id="canvas"></canvas>
</div>
</body>
function html_init()
{
canvas_html = document.getElementById ("canvas");
window.addEventListener ("resize", resize_canvas, false);
canvas_html.addEventListener ("touchstart", function(event) {touch_start (event)}, false);
}
function resize_canvas ()
{
// Scale to fit window, decide which scaling reaches edge first.
canvas_2d.restore();
canvas_2d.save();
var game_ratio = canvas_2d.canvas.width / canvas_2d.canvas.height;
var window_ratio = window.innerWidth / window.innerHeight;
var xratio = window.innerWidth / canvas_2d.canvas.width;
var yratio = window.innerHeight / canvas_2d.canvas.height;
var ratio;
if (game_ratio > window_ratio) ratio = xratio;
else ratio = yratio;
if (ratio > 1) ratio = 1;
canvas_2d.scale (ratio, ratio);
}
function touch_start (event)
{
var touch = event.changedTouches;
var x = touch[0].pageX;
var y = touch[0].pageY;
// this goes on to add the purple test sprite to the screen at that location.
}
I've tried referencing pageX, clientX and screenX, but none of them have the correct values. Even though my canvas is set to 1050 x 600, which is what my game runs at, the touch screen seems to think it's somewhere around 650 x 350. If it matters, the test phone is an iPhone 6.
I'm not sure what to check at this point. Any ideas are appreciated.
UPDATE: I've narrowed the problem down to two facts - that the canvas size is larger than the display area of the web page being shown, and that I'm using resize_canvas() to set the scale. It looks like I'm going to have to either reduce the overall size of the canvas to fit the phone or add a formulaic adjustment to the coordinates based on the scale ratio.
canvas_html.addEventListener ("touchstart", touch_start, false);
function resize_canvas ()
{
// Scale to fit window, decide which scaling reaches edge first.
canvas_2d.restore();
canvas_2d.save();
var current_ratio = canvas_2d.canvas.width / canvas_2d.canvas.height;
var new_ratio = window.innerWidth / window.innerHeight;
var xratio = window.innerWidth / canvas_2d.canvas.width;
var yratio = window.innerHeight / canvas_2d.canvas.height;
if (current_ratio > new_ratio) screen_size_ratio = xratio;
else screen_size_ratio = yratio;
if (screen_size_ratio > 1) screen_size_ratio = 1;
canvas_2d.scale (screen_size_ratio, screen_size_ratio);
}
function touch_start (event)
{
var touch = event.changedTouches;
var x = Math.floor (touch[0].clientX / screen_size_ratio);
var y = Math.floor (touch[0].clientY / screen_size_ratio);
}
Because of the scale() I was doing on the canvas, the actual coordinates had to be un-scaled using the ratio I calculated in canvas_resize().
I also had to change my "touchstart" event handler to not use an anonymous function. For whatever reason, this was causing the phone browser to default back to using "mousedown" for the click.

Detect when browser window has been resized from certain size to a larger size?

I want to reset a particular element once the browser window has been resized from any size less than 641px, to a greater size. Here is an example of what I am trying to achieve, written in pseudo code:
if (browser.window <= 641px && browser.window.resizedTo > 641px) {
$( ".foo" ).removeClass( "bar" )
}
Thank you!
I'll assume for the sake of this question that you mean 641px as the width, but I left the innerHeight variable there, too, in case you need it:
// Closure last-height/width
var lastX = window.innerWidth
var lastY = window.innerHeight
function fooOnResize() {
var x = window.innerWidth
var y = window.innerHeight
if (lastX <= 641 && 641 < x) {
$(".foo").removeClass("bar")
}
lastX = x
lastY = y
}
window.addEventListener("resize", fooOnResize)
// Also okay: window.onresize = fooOnResize
The trick is to basically hold the last size in some closure variables, then on resize, you can make your comparison. After you have done the comparison and the work, you store the current x/y as the last ones, for the next resize.
Try the window.onresize event:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize
You can get the current dimensions of the browser window using window.innerHeight and window.innerWidth:
window.onresize = function() {
console.log('height: ' + window.innerHeight);
console.log('width: ' + window.innerWidth);
}

Trouble using the data obtained by javascript browser detect size

Being new to javascript I seem to be missing something. I have used this code.
<script language="JavaScript">
// Get Browser Viewport Width
var adjust = "<?php echo $adjust; ?>";
// Get Browser Viewport Height
var height = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
// Get Browser Viewport Height
var height = window.getSize().y;
window.alert( 'height = ' + (height - adjust) + 'px' );
</script>
which works perfectly and gives me an alert to show that the calculation is working fine. However I cannot seem to transfer the height variable correctly to make the div do what I ask.
The following code I have used in the body.
<div id="bodyheight">
</div>
<script language="JavaScript">
document.getElementById("bodyheight").style.height = height;</script>
Can anyone point in the right direction and fill in the gap in my knowledge.
Here - I do not know from where you get getSize -you had two var height, which is not correct syntax
DEMO
window.onload=function() {
// Get Browser Viewport Width
var adjust = "200";
// Get Browser Viewport Height
var height = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
// Get Browser Viewport Height
height = (window.getSize)? window.getSize().y:height;
var newHeight = (height - adjust) + 'px'
window.alert(height+' adjusted to '+newHeight);
document.getElementById("bodyheight").style.height = newHeight;
}

Javascript Move opener window

I have two windows; one is inside a frameset and the other is opened from the other in a new window (window.open(...)).
I am trying to move the left edge of the opened window to the right edge of the opener window.
Here are the requirements:
Must work in IE8.
Cannot modify the code in the opener window.
The opened window should be completely visible (See the X in the upper-right hand corner)
I was able to find a solution that gets the correct width and height (with the scroll bars) of a IE8 window. It involves moving the window and checking it's value, but when I run window.opener.moveTo() it moves the frame instead of the actual window and thus doesn't record the correct values.
Here is the code I am currently using:
function moveAway()
{
//Array Style
var main = getWindowSize(window.opener)
var child = getWindowSize(window)
//How to move
var topAvail = main.top;
var bottomAvail = window.opener.screen.availHeight - main.bottom;
var leftAvail = main.left;
var rightAvail = window.opener.screen.availWidth - main.right;
var choice = Math.max(topAvail,bottomAvail,leftAvail,rightAvail)
if(choice == rightAvail)
{
window.moveTo(main.right,main.top)
window.resizeTo(rightAvail,main.bottom)
}else if(choice == bottomAvail)
{
window.moveTo(main.left,main.bottom)
window.resizeTo(window.opener.document.body.clientWidth,bottomAvail-36)
} else if(choice == leftAvail)
{
window.moveTo(0,main.top)
window.resizeTo(leftAvail,main.bottom)
} else if(choice == topAvail)
{
window.moveTo(main.left,0)
window.resizeTo(main.right,topAvail)
}
//return "item\ttop\tleft\tbottom\tright\nmain\t" + main.join("\t") + "\nchild\t" + child.join("\t")
}
function getWindowSize(windowObj) {
var wW, wH;
var wT = windowObj.screenTop;
var wL = windowObj.screenLeft;
if (windowObj.outerWidth) {
wW = windowObj.outerWidth;
wH = windowObj.outerHeight;
} else {
var cW = windowObj.document.body.offsetWidth;
var cH = windowObj.document.body.offsetHeight;
windowObj.resizeTo(500,500);
var barsW = 500 - windowObj.document.body.offsetWidth;
var barsH = 500 - windowObj.document.body.offsetHeight;
wW = barsW + cW;
wH = barsH + cH;
windowObj.resizeTo(wW,wH);
}
return { right: wW, bottom: wH, top : wT, left : wL };
}
How do I get JavaScript to open a popup window on the current monitor deals with positioning popup windows and contains a lot of insight into getting screen and window coordinates and positioning windows
You must beware that many browsers will disallow funny behavior like
Off-screen windows
windows wider than a screen
windows that span multiple screens
With code from my answer on the question mentioned above, you can get started with the following
// Pops a window relative to the current window position
function popup(url, winName, xOffset, yOffset, width, height) {
width = width || 100;
height = height || 100;
var x = (window.screenX || window.screenLeft || 0) + (xOffset || 0);
var y = (window.screenY || window.screenTop || 0) + (yOffset || 0);
return window.open(url, winName, 'top=' +y+ ',left=' +x + ',width=' + width + ',height='+ height);
}
var size = getWindowSize(window);
var popupWin = popup("http://www.google.com", "popup", size.right - size.left);
I'm not addressing your concern that the popup window must all be on screen. That is because I don't know what you could possibly do if the main window is full screen.
Pop windows are passé, I know some people want to use it, but the browsers are really fighting against it (by imposing rules that came out of tabbed windows environments). You're swimming against the current here.
Last point, you shouldn't need to move your window, you can just specify top/left and width/height, instead of having a window that moves around after it has been displayed. See my popup function.
Here's a jsfiddle to get you started showing us your problem

Categories