Develop Reference

How to get device rotation for iPhone 7 in javascript?

I want to get the device rotation for (alpha, beta, gamma) for iPhone 7 and higher. For iPhone 6 this works well for me:
window.addEventListener('deviceorientation', function(event) {
console.log(event.alpha);
console.log(event.beta);
console.log(event.gamma);
});
But for iPhone > 6 this event is not triggered anymore. To be clear, i dont want the device orientation (portrait/landscape), I want the rotation. Best case would be absoulte (calibrated) data.
For Android "deviceorientationabsolute" works well. Is there something similar for the Apple universe?
Thanks & regards,
Andreas

for get device rotation in all devices better listen on resize window:
window.addEventListener('resize', function(){
if(window.innerWidth < window.innerHeight){
//portrait
}
if(window.innerWidth > window.innerHeight){
//landscape
}
});

Ok, the solution for me was to get the user permission to use orientation like this. After that 'ondeviceorientation' works.
function startOrientation() {
if (typeof DeviceMotionEvent.requestPermission === 'function') {
DeviceOrientationEvent.requestPermission().then(function(response) {
if (response == 'granted') {
console.log('granted');
}
});
} else {
console.log('not granted');
}
}
$("#get_permission").click(function(){
startOrientation();
});

mousewheel event not working on firefox

Below code is working fine on chrome however it doesn't work on Mozilla for some reason that I am not aware yet. Am i missing something ?
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
$('#currentMove').html('Movement: Scroll up');
$('#currentMove').css('background','#98FB98');
scrollUp++;
$('#scrollUp').html(scrollUp);
}
else {
$('#currentMove').html('Movement: Scroll down');
$('#currentMove').css('background','#FFB6C1');
scrollDown++;
$('#scrollDown').html(scrollDown);
}
});
Here is my fiddle: https://jsfiddle.net/w0wffbxc/ Appreciate your help with this.

Here's your sqlfiddle fixed.
You should use wheel as mousewheel is not recognized by Firefox since version 3. Also with wheel, you should use event.originalEvent.deltaY instead.

Use wheel event instead. Its more of a standard now. This page also provides polyfills for old browsers https://developer.mozilla.org/en-US/docs/Web/Events/wheel
Ex
$(window).on('wheel', function(event){
// deltaY obviously records vertical scroll, deltaX and deltaZ exist too
if(event.originalEvent.deltaY < 0){
// wheeled up
console.log("Works Up");
}
else {
// wheeled down
console.log("Works Down");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Catch mousewheel up or down with jQuery/JS, without actually scrolling

I'm trying to catch whether the mousewheel is triggered and whether it's scrolled up or down without actually scrolling the page (body has an overflow: hidden).
Any idea's how I can achieve this using jQuery or pure javascript?
$(window).scroll(function(){
if( /* scroll up */){ }
else { /* scroll down */ }
});

I rarely promote plugins but this one is just excellent (and relatively small in size) :
https://plugins.jquery.com/mousewheel/
It'll allow to do something like this :
$(window).mousewheel(function(turn, delta) {
if (delta == 1) // going up
else // going down
// all kinds of code
return false;
});
http://codepen.io/anon/pen/YPmjym?editors=001
Update - at this point the mousewheel plugin could be replaced with the wheel event if legacy browsers need not be supported:
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) // going down
else // going up
return false;
});

This disables the scrolling.
NOTE: Notice it only stops scrolling if you hover over the element.
$('#container').hover(function() {
$(document).bind('mousewheel DOMMouseScroll',function(){
console.log('Scroll!');
stopWheel();
});
}, function() {
$(document).unbind('mousewheel DOMMouseScroll');
});
function stopWheel(e){
if(!e){ /* IE7, IE8, Chrome, Safari */
e = window.event;
}
if(e.preventDefault) { /* Chrome, Safari, Firefox */
e.preventDefault();
}
e.returnValue = false; /* IE7, IE8 */
}
Quoted from amosrivera's answer
EDIT: To check which way it is scrolling.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});

CSS scrolling issue in mobile phone

I have been trying to solve this weird problem with scrolling in my website. The scrolling works fine when viewed on a Desktop Computer. However, it doesn't work in mobile phones. Do, I need to use some javascript to solve this issue?Or, can it be done just with CSS.
Here is my CSS snippet :
#popup-div{
height: 100%;
overflow:scroll;
}

function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
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);
}
}
//On page load
touchScroll('popup-div');
Chris has shown a best working example
http://chrismbarr.github.io/TouchScroll/

Check for Touch device with Javascript

I have 3 buttons with hover states which makes a little tooltip appear to describe the button. They work fine but on touchs screen they do not disappear after the user clicks on the button.
So I've tried a few js scripts for checking if a device is a touch device or not. They almost work but they also when I test on IE11 it also gets detected as a touch device. Chrome & Firefox do not get mistaken as a touch device.
Any sugestions?
Her is what I've tried
/*****************************
TOUCH DEVICES HOVER FIX START
****************************/
// http://stackoverflow.com/a/4819886/1814446
function isTouchDevice() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
};
// http://www.stucox.com/blog/you-cant-detect-a-touchscreen/#poke-it
var hasTouch;
window.addEventListener('touchstart', function setHasTouch () {
hasTouch = true;
// Remove event listener once fired, otherwise it'll kill scrolling
// performance
window.removeEventListener('touchstart', setHasTouch);
}, false);
// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
define(['Modernizr', 'prefixes', 'testStyles'], function( Modernizr, prefixes, testStyles ) {
// Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
Modernizr.addTest('touchevents', function() {
var bool;
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
bool = true;
} else {
var query = ['#media (',prefixes.join('touch-enabled),('),'heartz',')','{#modernizr{top:9px;position:absolute}}'].join('');
testStyles(query, function( node ) {
bool = node.offsetTop === 9;
});
}
return bool;
});
});
if(bool===true) {
console.log('Touch Device'); //your logic for touch device
jQ( "#btn-1, #btn-2, #btn-3" ).click(function() {
jQ("#btn-1 .tooltip").css('opacity', '0');
jQ("#btn-2 .tooltip").css('opacity', '0');
jQ("#btn-3 .tooltip").css('opacity', '0');
});
}
else {
//your logic for non touch device
}

For IE10+ you can utilize "window.navigator.msMaxTouchPoints"
example code
function isIETouch ()
{
return window.navigator.msMaxTouchPoints == undefined ? false : window.navigator.msMaxTouchPoints;
}