Turning off Slider load based on device width - javascript

I'm working on a site for a client who bought a template and the issue is that now client wants the slider remove from hand held devices.
I know that we can use <picture> tag to assign different images based on screens size but what I'm trying to do here is to disable(by disable i mean canceling image load on mobile devices, not {display:none;} the slider loading all together from a certain screen size.
We'll probably have to create a script to call event assigned to that <div> to cancel its loading on for instance any screen size bellow 768px.
How can I do this?
(BTW I'm still learning JS .. any help is muchappreciated)
Many thanks in advance.

I have a simple solution to achieve your need. Below is the mobile check method.
// Mobile Device Check
function MobileDeviceCheck() {
var mobileFlag = false;
var isMobile = window.matchMedia("only screen and (max-width: 768px)");
if ($(window).innerWidth() < 768 || (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
mobileFlag = true;
}
return mobileFlag;
}
Call the Above function to check the mobile device and do your necessary actions.
// Load Device Specific Actions
var mobileFlag = MobileDeviceCheck();
if (mobileFlag == true) {
// Do Your Actions
}

Related

Screen width as a condition to redirect to other url during on load

i have a website and i was wondering if it is possible to set a condition in which when the screen is less than a certain size it will automatically open a different url?
the mobile version of website is completely different than my desktop one, so basically all i am asking is if it passible to load a different INDEX.html when the request comes from a smaller screen. also : is it possible to combine javascript, css and html only? (without jquery)
thank you so much!
All the above can be solved simply with JavaScript.
First we need to get the width, so we can call window.innerWidth or document.clientWidth for that.
Next we need to redirect if it's under a certain amount of pixels, so use window.location.
Finally we need to run the function when the page loads and when the view is resized.
function redirectMobileHandler() {
const width = Math.max(document.clientWidth || 0, window.innerWidth || 0);
if(width < 1000) {
window.location = 'https://linktoyourmobilesite.com';
}
}
window.onload = redirectMobileHandler();
window.onresize = () => redirectMobileHandler();
Alternatively you can either do a user agent check either with window.navigator on the client side, or by the User-Agent header on the server side to determine what kind of device it is.
As you said you can catch the width on which you want to load the other page
// when width equal 500px
if (window.innerWidth === 500) {
//window.location = "path to new page"
}
hope this helped
The answers given are work as long as you are only concerned for the screen width of the browser. But if you need to capture the actual screen width of the device then you need to use the 'screen' property.
function redirectToMobile() {
if(screen.width < 1000) {
window.location = 'YOUR LOCATION';
}
}
window.onload = redirectToMobile();

Block javascript activation in mobile devices

In this post What is the best way to detect a mobile device in jQuery? I found this code:
function detectmob() {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
}
I have a web site that passes Googles test for "mobile friendly" with out any pop ups for my newsletter / e-courses.
I tried the above script and it will run the scitps, however do to the size of the pop up blocks the form is too large.
I would like to block the script to keep the pop up from displaying, I tried to resize the block but when I do that it become unreadable for a device with a screen size smaller than 400 pixels.
Any help would be greatly appreciated.
CSS:
#mobile-only{
display:none;
}
HTML:
<div id="mobile-only">
<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>
</div>
The java script is a form that will display after 10 second delay, the form is 800x800 pixels, this is very large for most mobile devices, the reader can not scroll the form to the right to touch the 'x' to close the form.
After testing the CSS and the HTML the script still runs.
Please see the below code and attempt it.
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
$('#mobile-only').append('<script async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"></script>');
};
});
Things To Consider
Now if you want to worry about what to do if the user resizes the window on his desktop, you can either handle these events using the following items for help:
onresize
.resize()
Media Queries
I hope this helps!
Using the above code by A.Sharma I modified it like this:
<script>
$(document).ready(function(){
var x = $(window).width();
if(x >= 400)
{
$('#desktop-only').append('async type="text/javascript" src="http://forms.aweber.com/form/19/37402019.js"');
}
)};
</script>
Where '#desktop-only' is the CSS container for any desktop content that either will not fit on a mobile device (tables, large hi res images, etc.) or will fill the screen past the accepable limitations of the device.
This code does not run, however it looks like the best way to block javascript from running.
Any suggesitons for modification to make it run?
Thanks!

reload web page only when size of page change

I have problem with reloading page, iam writing a site using RWD and media queries for desktop and tablet/mobile layout. And i have one page where i use google maps. My client want me to refresh page if he resize window from desktop size to mobile (i tried to tell him this is rather dumb idea but he didnt listen). Desktop displays all map with markers, but for tablets and mobile layout is different, i use accordion/list to display list of countries. when you click on one element form accordion he expands showing info from google maps windowinfobox. and the problem is when i use only media query ofcourse it change layout but all elements on the accordion are expanded, but it must be hide and only if you click then they expand, if i refresh page everyting is ok, problem is with resize page. i tried use window.resize(function(){location reload}); and its work perfectly with resize, but on mobile devices every touch couses relouding. so i want to write a function that reload page only when window size change from xxx to yyy if they cross the border 1024px., because then my accordion will display perfectly.
I am assuming this is what you want.
$(function(){
var width = $(window).width();
var screen = "";
if(width < 1024 && width >640){
screen = "small";
} else if(width>1024) { screen = "big"; }
$(window).resize(function(){
var cur_width = $(window).width();
if(cur_width<1024 && cur_width>640 && screen == "big"){
location.reload();
} else if(cur_width >1024 && screen == "small"){
location.reload();
}
}
}

How do you undo the 'destroy' command in cycle2?

I'm trying to activate cycle2 on a list of images when the window gets too small to fit all the images and show all the images when the browser is big enough to display them. (#bignav is element containing the images.) I did some testing and the function stops working after I destroy it as it wont start it again. Is their another way of going about it? Could I activate it and deactivate by changing the name of the class?
$(window).resize(function() {
var width = $(window).width();
if (width < 1325) {
$('#bignav').cycle();
} else {
$('#bignav').cycle('destroy');
}
});
Re-initialize it...
$('#bignav').cycle('reinit');
They have an api here.

Easiest way to determine if user is on mobile device

I'm showing a notification bar on my website, and frankly, it doesn't work well when its on a mobile device. I'd like to show the bar ONLY for desktop users.
What is the easiest way to determine if a user is on desktop or on mobile?
A user agent check is the "easiest", though you could easily employ CSS3 media queries
Here is an example that checks iphone, android and blackberry; you could easily add other mobile browsers.
var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
Check this http://detectmobilebrowsers.com/
Work for Javascript, jQuery etc.
I find that it's best to use feature detection. Use Modernizr to detect if it's a touch device. You can do things like:
var mousedown = 'mousedown';
if (Modernizr.touch) {
mousedown = 'touchstart';
}
$('.foo').on(mousedown, handleMouseDown);
And then use CSS Media Queries for handling screen width (and it's also easy to detect screen width with javascript). That way you can correctly handle touch devices with large screens, or non-touch devices with small screens.
If you use modernizr. a "no-touch" class will be added to the element. You could hide the bar by default and add a css rule to show the bar if the "no-touch" class exists. Example:
default:
.bar{display:none;}
desktop:
.no-touch .bar{display:block;}
If the user is on a mobile device this javascript 'if' will return true.
if (navigator.userAgent.indexOf('Mobile') !== -1) { ...
See also: https://deviceatlas.com/blog/list-of-user-agent-strings
The easiest way to differentiate between touch and non-touch devices is using media queries.
1) CSS to target Mobile/Touch Devices can be written using media query,
#media (hover: none), (pointer: coarse) {}
2) CSS to target Desktop/Non-Touch Devices (only) can be written using media query,
#media not all and (pointer: coarse) {}
On Few latest mobile devices (Eg: IOS 10+, one plus etc.,.) hover is detected hence we use, the (2) to identify non-touch devices.
const is_mobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/BlackBerry/i);
if (is_mobile != null){
popup.modal('show');
}
If you are reading this post 2021, there is an even easier way to find this out.
let isMobile = window.navigator.userAgentData.mobile;
console.log(isMobile);
The above method simply returns a boolean value.

Categories

Resources