Different scripts for Desktop and Mobile

November 19, 2019, at 01:40 AM

I have been working on this website, and I have a script that works quite well on desktop, but I would like to make some modifications on mobile.

The script I have provided below will generate the 'menu box items' as the user is scrolling down. Then, as the user keeps scrolling down, the boxes will a get zero opacity.

Now, this script is not working that good on mobile (especially on iOS). So what I would like to do is: Instead of having an opacity of 0 at the beggining, I would like the boxes to have an opacity of 1 when the page is loaded. Then, as the user makes his/her first scroll on mobile, the boxes will get an opacity of 0.

The code can be tested here.

$(document).scroll(function () { 
    $('.hContentV2>div').each(function () { 
        var dataOpacity = $(this).attr('data-opacity'); 
        var opacityValue = $(document).scrollTop() / 500; 
        var aosDelay = Math.floor(Math.random() * (700 - 100 + 1)) + 100; 
        var t = $('.hotelSection2').offset().top; 
        if ($(document).scrollTop() > 150 && $(document).scrollTop() < ($('.hotelSection2').offset().top - 300)) { 
            if (opacityValue >= dataOpacity) { 
                opacityValue = dataOpacity; 
            } 
            $(this).css({ 'opacity': 1, 'transition-delay': aosDelay + 'ms' }); 
 
        } 
        else if ($(document).scrollTop() <= 100) { 
            var opacityValue = 0; 
            $(this).css('opacity', opacityValue); 
        } 
        else if ($(document).scrollTop() > $('.hotelSection2').offset().top) { 
            var opacityValue = 0; 
            $(this).css('opacity', opacityValue); 
        } 
    }); 
 
    if ($(document).scrollTop() < 100) { 
        $('.scrollTopButton').css({ 'opacity': 1 }); 
    } 
    else { 
        $('.scrollTopButton').css({ 'opacity': 0 }); 
    } 
});

Answer 1

You can look at the width of the device

E.g

if(document.documentElement.clientWidth < 900){
            //script
        }

Answer 2

First detect the device mobile device with this script

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // YOur less opacity code will be here for ios
}
else{
   //Your normal code here    
}

or you can do same by detecting the width of screen to detect the mobile screens

if(window.screen.width < 768){
   // Your ios code here for mobile
}
else{
}

Like this.

I hope it helped you.

POPULAR ONLINE

How do you return max values by day in MySQL?

Environment

141

MySQL

Merge consecutive identical rows [on hold]

So I have the following table

125

MySQL

Mysql Router Always sends all the requests to Primary(Read and Write) Node Only

I am using mysqlrouter version 80

Different scripts for Desktop and Mobile

PrimeFaces datatable default sortBy from backing bean

python code to convert a text format to another [on hold]

How to display selected the state and city name from the database and selected in the drop-down on the edit page

Error while executing my SQL select from php

Error while calling interface parameter method with implemented class

sshtunnel in python - Windows & ubuntu

How do you return max values by day in MySQL?

Merge consecutive identical rows [on hold]

Mysql Router Always sends all the requests to Primary(Read and Write) Node Only