Disable JS for mobile devices

evgeni0s · June 23, 2022, 9:25am

Hello i am trying to disable my JS code when the site is loaded on mobile devices, so far no success.
I’ll be thankful if someone helps me here. This is the code in the JS file:

let targetCircle = document.querySelector('.circle-name');
let targetFontSize = document.querySelector('.name-and-text')


function biggerCircle () {
    targetCircle.style.transform = 'scale(1.2,1.2)';
};

function smallerCircle () {
    targetCircle.style.transform = 'scale(1,1)';
    targetFontSize.style.fontSize = '1rem';
};

// image changing size and color by mouseover mouseout

let targetImg = document.querySelector('.picture')

function normalImage () {
    targetImg.style.backgroundBlendMode ='normal'
    targetImg.style.transform = 'scale(1.2,1.2)';
}

function luminositylImage () {
    targetImg.style.backgroundBlendMode ='luminosity'
    targetImg.style.transform = 'scale(1,1)';
}


function descktopDevices () {
    targetCircle.addEventListener ('mouseover', biggerCircle)
    targetCircle.addEventListener ('mouseout',smallerCircle);
    targetImg.addEventListener ('mouseover', normalImage)
    targetImg.addEventListener ('mouseout',luminositylImage);
}

function windowCheck (){
    if ($(window).width() > 430) {
    return descktopDevices ()
    }
}

windowCheck();

mirja_t · June 23, 2022, 9:31am

Hi,
what I did does not distinguish between mobile devices and desktop, but viewport size (media query), so I don’t know if that fits for you, too.
What I did is adding a class to the body, if the viewport is larger than xy px. Then I applied my JS only to elements if their parent has this class. Very simple and doing the trick to execute the JS code only when the viewport has a certain size.

evgeni0s · June 23, 2022, 12:44pm

Hi, thank you for the answer. I think I had tried something like that, but it didn’t work.
Can you please write some examples?

mirja_t · June 23, 2022, 1:17pm

Currently I’m working on a project where I do it slightly differently. I created a class for a fullpage layout that should only apply on large screens (or have different code for different viewport sizes).
In the constructor I define my breakpoint and I have a variable for big screen layout initialized as false:

export class Fullpage {
    constructor() {
        this._breakpoint = 991;
        this._largeScreen = false;

In my methods I check whether the the variable is set to true or false:

anyMethod {
        if(this._largeScreen) {
            // js code for large viewports
        }
}

In my init method I get the viewport size:

_initLayout() {
        this._largeScreen = this._getViewportSize();

The getViewportSize method:

_getViewportSize() {
        return window.matchMedia(`(min-width: ${this._breakpoint}px)`).matches;
    }

Then I have an event listener for viewport resize that executes the initialization method:

_addEventListener() {
        window.addEventListener('resize', this._initLayout.bind(this));

evgeni0s · June 24, 2022, 9:18am

Hi, thank you for the examples, that is looking too complicated for my level now.
I couldn’t make it work.

Current status: stuck.
Time stuck: 3 months.

mirja_t · June 24, 2022, 9:19am

Have you done classes yet?
Then it should be doable and I could guide you through.
What have you tried yet? Can you post your failing code (please make sure it’s properly formatted)?

evgeni0s · June 24, 2022, 9:49am

HTML page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>about me</title>


<link rel="stylesheet" href="aboutMeStyle.css">
    

</head>

<body>
    <div class="circle-background">
    </div>    
    
    <header>
        <ul>
            <li id="aboutMe"><a href="./aboutMe.html">about me</a></li>
            <li id="projects"><a href="./projects.html">projects</a></li>
        </ul>
    </header>
    


    <article>
        <div class="circle-name mobile-circle-name">

            <div class="name-and-text mobile-name-text">
            
                <h3>Evgeni Milev</h3>
                
                <div class="text-and-picture">
                </div>
                
                <h4>Hi, I'm Evgeni and I am a student at codecademy. By profession I am a full-time CNC machine operator situated in Germany.
                In april 2021 I started the codecademy course - Full-Stack Engineer which I am currently completing on .... (28%)
                <br>
                <br>
                This page is still part of my training.
                I am open to further development in coding and web-development.
                </h4>
            </div>
        </div>    
            
    
    <div class="picture-with-email-and-skills-container">
        
        <div class="picture">
        </div>
        
        <div class="skills"> 
            <div class="skills-icons">
                <img src="./Resources/icons8-javascript-90.png"/>
                <img src="./Resources/icons8-html-5-90.png"/>
                <img src="./Resources/icons8-css-100.png"/>
            </div>
        </div>
        <div class="email">
            <p>evgenios709@gmail.com</p>
        </div>
    </div>
    

    </article>
    
<script defer type="text/javascript" src="aboutMeJS.js">
</script>

</body>

</html>

CSS

* {
    box-sizing: border-box;   
}

@import url('https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap');

html {
    font-size: 16px;
    height: 100vh;
    font-family: 'Kdam Thmor Pro', sans-serif;  
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-image: url(./Resources/Ellipse\ 2.png);
    background-repeat: no-repeat;
    background-position:bottom; 
    background-size:100vh;
    background-color: rgba(217, 199, 255, 0.5);
}

header {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.23rem;
    font-family: 'Kdam Thmor Pro', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem;
}

header ul {
    margin-left: 42%;
    margin-right: auto;
    display: flex;
    justify-content: center;
    list-style-type: none;
}

#aboutMe {    
    background-color: rgba(41,6,96,0.3);
    padding: 0.5rem;
    margin-right: 2rem;
    z-index: 100;
    text-decoration: none; 
    font-size: 1.5rem;
    /* border-radius: 0.3rem; */
}

a {
    text-decoration: none;
    padding: 0.5rem;
}

a:hover {
  color: white;
}

#aboutMe:hover {
    background-color: rgb(41,6,96);
    z-index: 100;
}


#projects {
    z-index: 5;
}

#projects {
    color: rgb(41,6,96);
}

#projects a:hover {
    color:white;
    background-color: rgb(41,6,96);
    z-index: 100;
}

#projects {
    padding: 0.5rem;
}


/* ------- main part article - body ------- */



article {
    position: relative;
    display:flex;
    flex-wrap: wrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.circle-name  {
    margin-top: -7rem;
    position: relative;
    display: flex;
    width: 35rem;
    height: 35rem;
    margin-left: 1rem;
    align-items:center;
    justify-content: center;   
    background: #e8f5fa;
    border-radius: 100%;
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.13rem;
    padding:1rem;    
}

.circle-name .name-and-text {
    width: 22rem;
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.13em;
    /* padding:1rem; */
    color:black; 
}

.circle-name .name-and-text h3 {
    font-weight: 700;
}
.circle-name .name-and-text h4 {
    font-weight: 400;
}

/* article .blend-background-picture (
    background-color: rgba(217, 199, 255, 0.5);
    background-blend-mode: multiply;
) */

article .picture {  
    width: 9rem;
    height: 16rem;
    background-image: url(./Resources/IMG_1405.jpeg);
    background-size: 100%; 
    background-color: rgb(217, 199, 255);
    background-blend-mode: luminosity;
}

.skills-icons {
    display: flex;
    margin-top: 1rem;
    margin-left: 3rem;
    margin-right: 3rem;
}

.skills img {
    margin-top: 10%;
    padding: 0.3rem;
    font-size: 1rem;
    width: 4rem;
    height: auto;
    opacity: 0.7;
}

.picture-with-email-and-skills-container {
    display: flex;
    flex-direction: column;
    margin-top: 2.5em;
    align-items: center;  
}


.email {
    font-size: 1.1rem;
}


/* ----- header media rulset for small devices ---- */


@media only screen and (max-width: 420px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    header {
        display: flex;
        /* justify-content: space-evenly; */
        width: 100%;
        letter-spacing: 0.1em;
        font-size: 1.2rem;
    }

    header ul {
        margin-left: auto;
        margin-right: auto;
        }

    #aboutMe {
        font-size: 1.2rem;
    }

} 

/* ----- article media rulset for small devices ---- */

@media only screen and (max-width: 420px) {

    body {
        overflow-x: hidden;
    }

   header ul {
       margin-bottom: 8rem; 
    }
    
    article .circle-name {
        display: none;
    }

    article{
        flex-wrap: wrap;
        margin-top: 5%;
    }

    article .picture {  
        display: none;
    }


    article .mobile-circle-name {
        display: flex;
        z-index: 100;
    }
    


    .mobile-name-text .text-and-picture {
        float: right;
        width: 7rem;
        height: 12rem;
        background-image: url(./Resources/IMG_1405.jpeg);
        background-size: 100%; 
        background-color: rgb(217, 199, 255);
        background-blend-mode:luminosity;
    }


    .mobile-circle-name .mobile-name-text {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-bottom: 0;
        z-index: -10;
    }
    
}

JS

// js for aboutMe.html 

// circle changing color by mouseover mouseout

let targetCircle = document.querySelector('.circle-name');
let targetFontSize = document.querySelector('.name-and-text')


function biggerCircle () {
    targetCircle.style.transform = 'scale(1.2,1.2)';
};

function smallerCircle () {
    targetCircle.style.transform = 'scale(1,1)';
    targetFontSize.style.fontSize = '1rem';
};


// image changing size and color by mouseover mouseout

let targetImg = document.querySelector('.picture')

function normalImage () {
    targetImg.style.backgroundBlendMode ='normal'
    targetImg.style.transform = 'scale(1.2,1.2)';
}

function luminositylImage () {
    targetImg.style.backgroundBlendMode ='luminosity'
    targetImg.style.transform = 'scale(1,1)';
}

//targetCircle.onmouseover = function() {biggerCircle()}
// targetCircle.onmouseout = function() {smallerCircle()}

function desktopDevices () {
    targetCircle.addEventListener ('mouseover', biggerCircle)
    targetCircle.addEventListener ('mouseout',smallerCircle);
    targetImg.addEventListener ('mouseover', normalImage)
    targetImg.addEventListener ('mouseout',luminositylImage);
}

desktopDevices ()

function windowCheck (){
    if ($(window).width() > 430) {
    return desktopDevices ()
    }
}

windowCheck();

Sorry for the long post, I don’t now still how to share a GitHub repository

mirja_t · June 24, 2022, 9:54am

Ok, that is the approach you initially posted, have you tried the class approach as well?

mirja_t · June 24, 2022, 9:56am

The main problem I see here is that this line is JQuery, but from what I see you haven’t included the JQuery library.

This would be the Vanilla approach to get the viewport width:

window.innerWidth

Edit: everything you did in your functions could be achieved with pure css, are you sure you need a JS distinction in addition to a CSS mediaquery?

evgeni0s · June 24, 2022, 4:25pm

Hi, I try the following code:

desktopDevices ()

function windowCheck (){
    if (window.innerWidth > 430) {
    desktopDevices ()
    }
}

windowCheck();

But ist not working

mirja_t · June 24, 2022, 4:54pm

What exactly isn’t working?
You call desktopDevices() without any conditions in the first line and you call it inside windowCheck(). That means it’s going to run in any case.
And if it does not run, your desktopDevices function is to blame. Did you add a console.log() in the first line of desktopDevices in order to see if it runs and how often it does?

Your program also has these additional problems:

You add event listeners if the viewport is larger than 430px. But you don not remove them if it becomes smaller.
You return the result of desktopDevices from the windowCheck function. Why? windowCheck does not return a value.

Debug your code by adding consoles. You’ll probably see that desktopDevices runs twice.

evgeni0s · June 24, 2022, 6:24pm

My goal is JS to not be active on mobile devices so when I touch the screen nothing happens. On wider devices text and picture are bigger when the mouse is over.

I had remove desktopDevices() from above, and add some removeEventListener-s, but JS is still active on small screens.
windowCheck should call the desktopDevices ().
Debuging is not working because I run the site on ‘live server’ on Node and I get error just at the start:

let targetCircle = document.querySelector('.circle-name');
                   ^

ReferenceError: document is not defined

and I cannot use console.log() to see if window.innerWidth is showing something.

My current code looks like this:

function desktopDevices () {
    targetCircle.addEventListener ('mouseover', biggerCircle)
    targetCircle.addEventListener ('mouseout',smallerCircle);
    targetImg.addEventListener ('mouseover', normalImage)
    targetImg.addEventListener ('mouseout',luminositylImage);
}

function mobileDevices () {
    targetCircle.removeEventListener ('mouseover', biggerCircle);
    targetCircle.removeEventListener ('mouseout',smallerCircle);
    targetImg.removeEventListener ('mouseover', normalImage)
    targetImg.removeEventListener ('mouseout',luminositylImage);
}
 
function windowCheck (){
    if (window.innerWidth > 430) {
    desktopDevices ()
    }
    else {
        mobileDevices ()
    }
}

windowCheck();

JS in the mobile version is still active

mirja_t · June 24, 2022, 6:41pm

The problem with this now is that the event listeners aren’t removed on mobile devices on resize of the browser, because your function windowCheck only runs immediately after load or reload of the page. With this setup you’d also need an event listener for the resize event that calls the function windowCheck.

This is a rather simple setup that doesn’t need compiling. So I’d recommend that you add the consoles to your functions, simply open your index.html in a browser and use the debug tools of the browser. Resize the browser after you added the resize event and see what happens.