Develop Reference

window.onload inconsistent cross-browser?

Does window.onload not work consistently with some browsers..?
I've put a script together purposely utilizing native JavaScript (no library or framework used). I know there may be some issues with cross-browser compatibility. However, there is something different occurring with the Edge browser at least.
The entire page works as expected in webkit(Chrome, not yet in Safari), and it seems to work perfect in the latest Firefox as well.
In Microsoft's Edge browser it seems to have a starter issue, or, it's not booting well every time on the onload trigger. It works perfectly sometimes, if I refresh the page enough.
What can possibly explain this? Edge may be better in this case as I'm not sure if it's working in Safari at all.
Codepen link!
window.onload = function() {
// if you're savvy enough for it... please check codepen for the full code
/* automation from input */
wght_input.oninput = function() {
x = this.value;
var bodyweight = x;
// when puts into form input
this.onchange = function() {
frmFeed[0].innerHTML = "";
recc_wght();
getadd();
whatsTotal();
resetButton.click() ;
};
var kgs = curr_wght_set_amt * kg; //convert lbs lifted to kgs
logs("The highest recorded lift was " + curr_wght_set_amt.toFixed(0) + "lbs or "+ kgs +"kgs");
}; // end active oninput
}; // end onload function

use window.addEventListener instead:
window.addEventListener('load', yourFunc, false);
You'd have to wrap everything else in a named function (yourFunc)...

Is it possible to get the position of a Chrome packaged app window in realtime

I know there is onBoundsChanged, but that only returns the current position once you have stopped dragging the window. Is there a way to return the current position while you are dragging the window?
The reason I'm wanting to do this is so I can have two windows snapped to each other.
Thanks!

Have you looked at the windows sample app? That has an example of two windows that stick together, using onBoundsChanged to set the bounds of the window.
originalWindow.onBoundsChanged.addListener(function() {
var bounds = originalWindow.outerBounds;
copycatWindow.outerBounds.left = bounds.left + bounds.width + 5;
});
Also, that sample uses webkitRequestAnimationFrame to display the window's position information in real time.
function update() {
['screenX', 'screenY', 'innerWidth', 'innerHeight'].forEach(function(prop) {
document.getElementById(prop).innerText = window[prop];
});
webkitRequestAnimationFrame(update);
}
update();

Can you control which display a window created by Javascript is displayed on?

My PC has more than one display attached. I'm working on a web app that displays data in a table in the browser. When the user clicks on a row of the table, a window with details about the row selected is displayed. If the user clicks on a different row, a new window opens.
I have two requirements I need to make work:
The windows should not stack up one on top of the other, they should cascade. I've got code that works for Firefox, but IE and Chrome just open each window in the same place so they stack up. If I keep track of the number of windows opened, I can finagle a cascading mechanism, but is there a better way?
If the machine has multiple displays, it'd be nice if the window with the table were on one screen and the details windows opened on the other. I haven't been able to find anything in any of the searches I've done. Is there some code somewhere that does this?
Edit:
For #Neal:
Function newWin( mypage, myname, cascade ) {
if (!cascade) cascade = false;
if (!myname)
myname = 'DETAILS';
var w = 820;
var h = 685;
var settings = 'height=' + h + ',';
settings += 'width=' + w + ',';
if (!cascade) {
if (screen.width) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
}
else {
winl = 0;
wint = 0;
}
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
settings += 'top=' + wint + ',';
settings += 'left=' + winl + ',';
}
settings += 'scrollbars=yes,resizable=yes,menubar=yes,location=yes';
gPopupWindow = window.open(mypage, myname, settings);
// fix for IE focus
// when from ajax loaded list
// see convoy dropdownlist item click
//gPopupWindow.focus();
setTimeout(function () { gPopupWindow.focus() }, 0);
}
By passing true for cascade, Firefox lets the OS open the window where it wants. But IE & Chrome always put the window in the same place, though where it goes on the screen is different for each browser. I was hoping that IE & Chrome would act like Firefox does, but browser differences is a fact of life.
As I said, I can keep track of how many windows have been opened by calling this function and compute new left & top coordinates based on that number. I'd rather not, though.

The fact is that there's no way to control on which screen a new window will be displayed on a multi-screen system from JavaScript. Not without writing your own DLL and incorporating it into your application. There are ways to call functions in DLLs, but it's not worth it, as the DLL would be Windows specific and you'd need to do something else on the Mac & Linux.
Further, different browsers complicate this problem, as the method to add custom code differs from browser to browser, as well.
For that matter, if you don't specify the left & top coordinates when displaying a new window, each browser displays the new window in a different place on whatever screen it decides to display the window on. The behavior is completely inconsistent browser to browser, let alone OS to OS.
Don't do it.

How to improve performance of JS draggable menu in WebView on Android

We have a web application shown in WebView on Android and we have performance issue on older Android tablets that we really need to deal with
We are using iScroll-lite for javascript dragging
We set hardware acceleration to true, set rendering priority to high and the WebView
lets through only one MOVE touch event in 80ms interval
Is there anything more we can do?
Is there maybe some faster alternative to iScroll-lite?
We don't know what exactly makes it so slow. It for example runs on phone Sony Erricson with 1 GHz, 512 MB RAM with Android 2.3 smoothly but on tablet Qualcomm 1GHz, 512 RAM with Android 4.0 you make a drag and you actually have to wait to see any outcome. The only difference I see in Android version and screen resolution.

It might not be the Javascript after all. Android WebViews tend to have quite unexpected performance issues.
Try to deactivate all unnecessary CSS and see if performance improves. If so, you can re-add the CSS styles iteratively to locate the culprit.
And do not use any kind of animated GIFs. Our experience is that this (strangely enough) drags down performance drastically.

My suggestion is that you write the drag by yourself. It's not difficult. The key part of code looks like below:
var yourDomElement = document.getElementById("demoDrag");
yourDomElement.addEventListener("touchstart", function (e) {
e.preventDefault();
//todo
});
yourDomElement.addEventListener("touchmove", function (e) {
//todo:
});
yourDomElement.addEventListener("touchend", function (e) {
//todo
});
You can find many sample code here (e.g. /assets/www/scripts/novas/framwork/nova.Carousel.js, also the scroller.js). You should read the sample code to learn how to write your own "drag".
If you still have no idea, you can contact our team to finish your task for you. We make phonegap apps with very good performance.

What about using div with overflow set to auto and then applying this fix so that elements can be scrolled
http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/
Short extract:
function touchScroll(id){
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}

We have tried to get iScroll to work smoothly in a phonegap-app on the iPad(2/3), but we were not able to make that happen. Get anywhere near an acceptable in performance even though all stand-alone examples ran super smooth. We finally ended up using -webkit-overflow-scrolling:touch have you looked into that one yet? I know you need this for Android so I cannot say if it is as good there as on iOS6, but on the iPad it worked like a charm.

If you want to REALLY make a difference, I'd suggest you my approach:
I did a JavaScript-callable function for creating another WebView ("child webview") that I would use like an Iframe and fill with content, so from the JS application I could do:
insertWebView (x,y,w,h,"<div>.......</div>").
You have to do some one-time work to stabilish a way to comunicate both webviews, but you get the idea. Please find below attached the source of my insertWebView function for inspiration.
The improvement was awesome, as those tiny iframe-webviews not only performed awesome, but stuff like the glowing overscroll, multitouch (now they are different webviews!) etc provided a near-native experience.
I also did an extension to use native drag and drop between webviews.
Probably it was not very efficient memory-wise, but in terms of user experience believe me it was worth the effort, thousand times.
good luck!
public void insertWebView(int code, int x0, int y0, int w, int h, String url, int vertical, String initContent, String params, int alpha, int rot, int screenId) {
PlasmaWebView webview1 = getWebView(code);
if (webview1 != null) {
if (Conf.LOG_ON) Log.d(TAG, "WEBVIEW: Reusing webview " + code + " at " + x0 + "," + y0 + "," + w + "," + h + " vertical " + vertical+", rot="+rot);
webview1.setVerticalScrollBarEnabled(vertical == 1);
webview1.setHorizontalScrollBarEnabled(vertical != 1);
webview1.move(x0, y0, w, h, Funq.this);
if ((alpha>0) && (alpha<100)) webview1.setAlpha((float)alpha/100);
webview1.setRotation((float)rot/10);
webview1.handleTemplateLoad(url, initContent);
return;
}
if (Conf.LOG_ON) Log.d(TAG, "WEBVIEW: Insert webview " + code + " at " + x0 + "," + y0 + "," + w + "," + h + " vertical " + vertical + " url " + url+" alpha "+alpha+", rot="+rot);
webview1 = new PlasmaWebView(Funq.this.getBaseContext(), code, vertical==1, useHardware, jvs, screenId);
if ((alpha>0) && (alpha<100)) webview1.setAlpha((float)alpha/100);
webview1.setRotation((float)rot/10);
RelativeLayout.LayoutParams p=webview1.createLayout(x0, y0, w, h, Funq.this);
layerContainer.addView(webview1, p);
webview1.handleTemplateLoad(url, initContent);
}

How to access accelerometer/gyroscope data from Javascript?

I have recently come across a few websites that seems to access the accelerometer or gyroscope on my laptop, detecting changes in orientation or movement.
How is this done? Must I subscribe to some kind of event on the window object?
On which devices (laptops, mobile phones, tablets) is this known to work?
NB: I actually already know (part of) the answer to this question, and I am going to post it right away. The reason that I am posting the question here, is to let everyone else know that accelerometer data is available in Javascript (on certain devices) and to challenge the community to post new findings on the subject. Currently, there seems to be almost no documentation of these features.

There are currently three distinct events which may or may not be triggered when the client devices moves. Two of them are focused around orientation and the last on motion:
ondeviceorientation is known to work on the desktop version of Chrome, and most Apple laptops seems to have the hardware required for this to work. It also works on Mobile Safari on the iPhone 4 with iOS 4.2. In the event handler function, you can access alpha, beta, gamma values on the event data supplied as the only argument to the function.
onmozorientation is supported on Firefox 3.6 and newer. Again, this is known to work on most Apple laptops, but might work on Windows or Linux machines with accelerometer as well. In the event handler function, look for x, y, z fields on the event data supplied as first argument.
ondevicemotion is known to work on iPhone 3GS + 4 and iPad (both with iOS 4.2), and provides data related to the current acceleration of the client device. The event data passed to the handler function has acceleration and accelerationIncludingGravity, which both have three fields for each axis: x, y, z
The "earthquake detecting" sample website uses a series of if statements to figure out which event to attach to (in a somewhat prioritized order) and passes the data received to a common tilt function:
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", function () {
tilt([event.beta, event.gamma]);
}, true);
} else if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', function () {
tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
}, true);
} else {
window.addEventListener("MozOrientation", function () {
tilt([orientation.x * 50, orientation.y * 50]);
}, true);
}
The constant factors 2 and 50 are used to "align" the readings from the two latter events with those from the first, but these are by no means precise representations. For this simple "toy" project it works just fine, but if you need to use the data for something slightly more serious, you will have to get familiar with the units of the values provided in the different events and treat them with respect :)

Can't add a comment to the excellent explanation in the other post but wanted to mention that a great documentation source can be found here.
It is enough to register an event function for accelerometer like so:
if(window.DeviceMotionEvent){
window.addEventListener("devicemotion", motion, false);
}else{
console.log("DeviceMotionEvent is not supported");
}
with the handler:
function motion(event){
console.log("Accelerometer: "
+ event.accelerationIncludingGravity.x + ", "
+ event.accelerationIncludingGravity.y + ", "
+ event.accelerationIncludingGravity.z
);
}
And for magnetometer a following event handler has to be registered:
if(window.DeviceOrientationEvent){
window.addEventListener("deviceorientation", orientation, false);
}else{
console.log("DeviceOrientationEvent is not supported");
}
with a handler:
function orientation(event){
console.log("Magnetometer: "
+ event.alpha + ", "
+ event.beta + ", "
+ event.gamma
);
}
There are also fields specified in the motion event for a gyroscope but that does not seem to be universally supported (e.g. it didn't work on a Samsung Galaxy Note).
There is a simple working code on GitHub

The way to do this in 2019+ is to use DeviceOrientation API. This works in most modern browsers on desktop and mobile.
window.addEventListener("deviceorientation", handleOrientation, true);
After registering your event listener (in this case, a JavaScript
function called handleOrientation()), your listener function
periodically gets called with updated orientation data.
The orientation event contains four values:
DeviceOrientationEvent.absolute
DeviceOrientationEvent.alpha
DeviceOrientationEvent.beta
DeviceOrientationEvent.gamma
The event handler function can look something like this:
function handleOrientation(event) {
var absolute = event.absolute;
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// Do stuff with the new orientation data
}

Usefull fallback here: https://developer.mozilla.org/en-US/docs/Web/Events/MozOrientation
function orientationhandler(evt){
// For FF3.6+
if (!evt.gamma && !evt.beta) {
evt.gamma = -(evt.x * (180 / Math.PI));
evt.beta = -(evt.y * (180 / Math.PI));
}
// use evt.gamma, evt.beta, and evt.alpha
// according to dev.w3.org/geo/api/spec-source-orientation
}
window.addEventListener('deviceorientation', orientationhandler, false);
window.addEventListener('MozOrientation', orientationhandler, false);