dropdown list is misaligned when I rotate the device. I want the dropdown list is align on the select tag. I used javascript to close or blur the dropdown list when rotate but the browser crashed. Is there a work around on this? Below is the code that I'm using for the orientation detection.
$(document).ready(function(){
var winWidth = $(window).width();
if(winWidth <= 768) {
detectOrientation();
window.onorientationchange = detectOrientation;
function detectOrientation(){
if (typeof window.onorientationchange != 'undefined'){
if ( orientation == 0 ) {
//Do Something In Portrait Mode
}
else if ( orientation == 90 ) {
//Do Something In Landscape Mode
}
else if ( orientation == -90 ) {
//Do Something In Landscape Mode
}
else if ( orientation == 180 ) {
//Do Something In Portrait Mode
}
}
}
}
else {
alert("not passed");
}
});
Related
I want to detect a device width and height (responsive layout), so if return is true I want to toggle class "mobile" but I'm doing something wrong and I don't know what.
$(function detectmob() {
if(window.innerWidth <= 720 && window.innerHeight <= 1280) {
return true;
} else {
return false;
}
if (return=true) {
$(document).getElementByClass("box").addClass ('mobile');
}
}
Instead of returning true, you could just add the class there
return will exit out of the function from when it is encountered. You are looking for a variable isolated to detectmob based on which a class can be added.
function detectmob() {
var isMobile = false;
if (window.innerWidth <= 720 && window.innerHeight <= 1280) {
isMobile = true;
}
if (isMobile) {
$(document).getElementByClass("box").addClass('mobile');
}
}
But if you still want to check based on the return value then the logic has to be extracted out into a function which can have a return value.
function detectmob() {
var isMob = isMobile();
if (isMob) {
$(document).getElementByClass("box").addClass('mobile');
}
}
function isMobile() {
return window.innerWidth <= 720 && window.innerHeight <= 1280;
}
You should use user agent instead of screen size otherwise mobile with a huge resolution will be detected as PC (eg Pixel 2 XL have 1440 x 2880 screen). Also user may resize browser window on PC to 700x1000 and your code will detect it as mobile.
I'm setting up some simple booleans that test for mobile layouts and touch devices, but I'm having some difficulty making the code more compact.
isTouch tests for touch devices.
mobile tests for when the screen width is below 769px.
My final if/else statement is to test if I'm on a mobile touch device (iPad, phone, whatever). I can alert the output and everything is expected, but the static_element still appears instead of swiper_element. I know I'm missing something with my booleans.
Help a rookie out?
$(document).ready(function () {
var windowWidth,
isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
mobile,
touchDevice;
$(window).on('load resize', function () {
windowWidth = $(window).width();
if (windowWidth < 769) {
mobile = true;
} else {
mobile = false;
}
if (isTouch = true) {
touchDevice = true;
} else {
touchDevice = false;
}
});
if (touchDevice && mobile) {
$('.static_element').hide();
$('.swiper_element').show();
} else {
$('.static_element').show();
$('.swiper-element').hide();
}
});
The swiper thing is not working, because there is a dash instead of an underscore in the last line of your code. And yes, you could simplify a few things (see the code below). I moved all mobile detection logic to a function, so we can reuse it anytime we want.
Note: Mobile detection is an art – mainly because there are many devices and use cases. Querying the "ontouchstart" capability works fine for most of the devices, it won't work on some devices. That's why I added the console.log, so you can check if the right code block is executed.
$(document).ready(function () {
var isTouch,
isMobile;
// Initially call the function to set isTouch and isMobie
detectMobile();
// If the window is reloaded or resized check again
$(window).on('load resize', detectMobile);
// Set the booleans when called
function detectMobile() {
// Always evalutes to true or false
isTouch = ('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0);
// Always evalutes to true or false
isMobile = $(window).width() < 769;
}
if (isTouch && isMobile) {
// Logs the actual status to the console
console.log("I'm a mobile device!");
$('.static_element').hide();
$('.swiper_element').show();
} else {
// Logs the actual status to the console
console.log("I'm a boring normal device!");
$('.static_element').show();
$('.swiper_element').hide();
}
});
Change your codes into this:
$(document).ready(function () {
var windowWidth,
isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
mobile,
touchDevice;
$(window).on('load resize', function () {
windowWidth = $(window).width();
if (windowWidth < 769) {
mobile = true;
} else {
mobile = false;
}
if (isTouch) {
touchDevice = true;
} else {
touchDevice = false;
}
});
if (touchDevice && mobile) {
$('.static_element').hide();
$('.swiper_element').show();
} else {
$('.static_element').show();
$('.swiper-element').hide();
}
});
I have built a simple vertical scrollable website that snaps the view to divs when the user scrolls up or down the page. You cans see a demo here: http://dev.driz.co.uk/snap.html
The JS is fairly simple:
var currentScreen = 0;
var scrollReady = false;
var screens = new Array( 'one',
'two',
'three');
function scrollNext() {
if( currentScreen < screens.length-1 && scrollReady == true ) {
currentScreen++;
performScroll();
}
}
function scrollPrev() {
if( currentScreen > 0 && scrollReady == true ) {
currentScreen--;
performScroll();
}
}
function performScroll() {
scrollReady = false;
var newYPos = Math.ceil($('#'+screens[currentScreen]).offset().top);
$('.snap').animate({scrollTop: newYPos }, 500, function() { scrollReady = true; });
}
$(document).ready(function() {
scrollReady = true;
$('.snap').bind('mousewheel', function (event, aS, aQ, deltaY) {
event.preventDefault();
if (deltaY > 0) {
scrollPrev();
} else {
if (deltaY < 0) {
scrollNext();
}
}
return false;
});
$(document).bind('keyup', function (event) {
if (event.keyCode == 40 || event.keyCode == 38) {
event.preventDefault();
if (event.keyCode == 40) {
if (scrollReady == true) {
scrollNext();
}
} else {
if (event.keyCode == 38) {
if (scrollReady == true) {
scrollPrev();
}
}
}
}
});
$(document).bind('keydown', function (event) {
if (event.keyCode == 40 || event.keyCode == 38 ) {
event.preventDefault();
}
});
});
However I can only scroll to the first two divs and can't get to the third one... Any ideas why this is happening? I can't see issues that would cause this that wouldn't effect the first two from working...
Update: Sometimes you can get it to scroll to the third div (scrolling up and down until it does), but it skips the second div and then when the user scrolls up again, it jumps all the way to the top... so something weird is happening.
Update 2: I've noticed that currentScreen is incorrectly 2 when you scroll to the second div which is why you can't scroll to the third div. Any ideas why though?
Update 3: It seems that the scrollReady variable isn't preventing the functions from being called multiple times in places, as if you scroll up and down a few times, you find that sections are scrolled passed multiple times. Which shouldn't happen, you should only be able to scroll up one and down one at a time.
Store the values of section offsets in variable and then try, it will work.
check this on codepen.
http://codepen.io/sandeshdamkondwar/pen/veGko?editors=100
In scrollNext() function Your conditional checking is wrong
on second screen this condition will be false and therefore it is not moving to third screen.
It should be
currentScreen < screens.length
I'm trying to detect orientation changes on mobile devices and trigger a function once an orientation has been completed, but the code inside the function is continuously firing in Android and I'm not sure why. Here's my code:
var supportsOrientationChange = "onorientationchange" in window;
var orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent,
function() { alert ('orientation changed'); },
false
);
Does anyone know how to write this so that it only triggers once, after orientation change has been completed?
I used a work-around for this in my app. I added an event listener for orientationchange and then set a timeout so the orientationchange could occur and I could get a new width value that actually reflected the width after the orientation change.
var device_width = 0;
$(document).ready(function () {
var oc_timer;
$(window).bind('orientationchange', function () {
clearTimeout(oc_timer);
oc_timer = setTimeout(function () {
device_width = $(window).width();
}, 500);
});
});
I am not positive this will solve your continuously firing function problem but this is a solution I found to work.
I found a way to do this in case others are still having the same issue, check it out:
function onOrientationChange() {
if (typeof(this.orientation) === "undefined"){
if (window.orientation == -90 || window.orientation == 90) {
this.orientation = "landscape";
} else {
this.orientation = "portrait";
}
// alert ("in 1");
// you code here for change
}
if ((window.orientation == -90 || window.orientation == 90) && (this.orientation == "portrait")) {
this.orientation = "landscape";
// alert ("in 2");
// you code here for change
}
if ((window.orientation == 0 || window.orientation == 180) && (this.orientation == "landscape")) {
this.orientation = "portrait";
// alert ("in 3");
// you code here for change
}
}
Simple solution for less detailed applications
//bind orientation change event
$(window).bind("orientationchange", orientationChange);
//later,
function orientationChange(){
//whatever needs to happen when it changes.
alert("changed");
}
You could also use $.on() instead if you need to pass information.
In browsers that do not support it, the event does not fire. You could then write a custom detection script as a fallback to fire the event if the orientation changes on a device that does not support onorientationchange.
How to detect with javascript or jquery when user turns iPad from vertical position to horizontal or from horizontal to vertical?
Try
$(window).bind('orientationchange', function(event) {
alert('new orientation:' + event.orientation);
});
You can detect the orientation change event using the following code:
jQuery:
$(document).ready(function() {
$(window).on('orientationchange', function(event) {
console.log(orientation);
});
});
Check if device is in portrait mode
function isPortrait() {
return window.innerHeight > window.innerWidth;
}
In Javascript:
<button onclick="detectIPadOrientation();">What's my Orientation?</button>
<script type="text/javascript">
window.onorientationchange = detectIPadOrientation;
function detectIPadOrientation () {
if ( orientation == 0 ) {
alert ('Portrait Mode, Home Button bottom');
}
else if ( orientation == 90 ) {
alert ('Landscape Mode, Home Button right');
}
else if ( orientation == -90 ) {
alert ('Landscape Mode, Home Button left');
}
else if ( orientation == 180 ) {
alert ('Portrait Mode, Home Button top');
}
}
</script>
Or for including additional stylesheets:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Both taken from: http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/ which, FYI, was the first result on Google for 'detect ipad orientation javascript'...
function detectIPadOrientation (orientation) {
if ( orientation == 0 ) {
alert ('Portrait Mode, Home Button bottom');
}
else if ( orientation == 90 ) {
alert ('Landscape Mode, Home Button right');
}
else if ( orientation == -90 ) {
alert ('Landscape Mode, Home Button left');
}
else if ( orientation == 180 ) {
alert ('Portrait Mode, Home Button top');
}
}
window.onorientationchange = detectIPadOrientation;