Detecting device JS and toggle class - javascript

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.

Related

Keyboard disappearing when input on focus - mobile

I have this code and everything works good, but when I open my search bar on mobile and click on input field, my keyboard opens and closes, I found that window.resize is the problem, but I haven't found any fixes for this, what should I do?
function appendSearchBar() {
if($(window).width() <= 769){
$('.search-bar').appendTo('.mobile-toolbar .global-search');
} else {
$('.search-bar').appendTo('.header-toolbar-nav .global-search');
}
}
$(window).resize(function() {
appendSearchBar();
});
When you appendTo the element is detach and re-attached to the DOM and thus loses focus.
You should only append if it is not where you want it.
let inMobile;
function appendSearchBar(firstTime) {
const windowWidth = $(window).width();
if (windowWidth <= 769 && (!inMobile || firstTime)) {
inMobile = true;
$('.search-bar').appendTo('.mobile-toolbar .global-search');
}
if (windowWidth > 769 && (inMobile || firstTime)) {
inMobile = false;
$('.search-bar').appendTo('.header-toolbar-nav .global-search');
}
$(window).resize(function() {
appendSearchBar();
});
appendSearchBar(true);

JavaScript media queries breaking greensock

I am trying to create a Navigation Bar that slides in and out when clicked on using JavaScript and Greensock. For some reason, the on click action is randomly not working when clicked on at different sizes but sometimes it works perfectly fine.
My code is below, you can find a live example of this navigation at: http://www.kramergraphicdesign.com/Maura_Website/
var resize = function(){
var viewportWidth = $(window).width();
var lastLiWith = $('#logo').width();
console.log(openOrShut + " this is the true false var");
if ($(window).width() >= 0 && $(window).width() <= 639 ) {
console.log("mobile");
$("#logo, #close, .arrow-right").click(function()
{
console.log("mobile-click");
if(openOrShut === false)
{
TweenLite.to("#custom-nav",".5",{x:viewportWidth-lastLiWith});
openOrShut = true;
}
else{
TweenLite.to("#custom-nav",".5",{x:0});
openOrShut = false;
}
});
}
else if ($(window).width() >= 640 ) {
console.log("tablet");
$("#logo, #close, .arrow-right").click(function()
{
console.log("tablet-click");
if(openOrShut === false)
{
TweenLite.to("#custom-nav",".5",{x:400});
openOrShut = true;
}
else{
TweenLite.to("#custom-nav",".5",{x:0});
openOrShut = false;
}
});
}
else if ($(window).width() >= 1025 && $(window).width() <= 10000 ) {
console.log("dekstop");
$("#logo, #close, .arrow-right").click(function()
{
console.log("desktop-click");
if(openOrShut === false)
{
TweenLite.to("#custom-nav",".5",{x:400});
openOrShut = true;
}
else{
TweenLite.to("#custom-nav",".5",{x:0});
openOrShut = false;
}
});
}
};
$(document).ready(resize);
$(window).resize(function(){
resize();
});
First of all, the resize event can occur an awful lot, especially during a drag to resize the window. This means two things:
Minimise the amount of work you do so it runs fast, or debounce the function (e.g. using Lodash) so it only runs after you stop receiving resize events for a short time.
More importantly, you are adding a new click handler every single time.
So the reason it "randomly" doesn't do anything is that whenever you click, you actually run your function to toggle the menu many, many times if you have previously resized the window at all. If that number of times happens to be even, then there is no net effect.
There are probably a number of ways to fix this, but here are two:
Attach a click handler once, but check the width inside the handler to determine how far to animate it to / how to respond differently to different sizes.
Unregister existing click events first (using jQuery's .off()) before re-adding them, so there is only ever the one handler registered. I recommend using an event namespace so you can deregister everything on the namespace at once.
Bonus observation: your condition for the tablet widths means the desktop code will never run, because there is no <= 1024 condition for the tablet block.

Dropdown misaligned when rotate or change orientation (iPad)

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");
}
});

Unexpected if/else results using booleans

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();
}
});

javascript android window.onorientationchange fires continuously

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.

Categories

Resources