Why don't inline style changes implemented by JavaScript function properly on mobile browsers like Chrome, Dolphin, and Android?

View the jsFiddle here

Issue on PC/Windows browser: When performing action, h1 header "gif" disappears and video starts playing.

Problem on mobile devices: The gif does not disappear as expected but the video still plays indicating that JavaScript is functioning correctly.

Why does the display toggle function differently on Android Chrome compared to Windows Chrome?

Relevant code snippet is shown below:

this.play();
this.removeAttribute("controls"); // this line works fine
//h1.style.display="none"; // this line doesn't work
this.previousSibling.style.display="none"; // this line also doesn't work
javascriptandroidcssmobile

Answer №1

onclick is not a recognized event on touch devices. It is recommended to use ontouchstart for mobile versions instead. Additionally, the touch event object does not include offsetY. To achieve similar functionality, you can utilize pageY on both mobile and desktop browsers.

Check out this functional demo.

Answer №2

After some troubleshooting, I decided to move the show/hide functions and link them to the onplay/onpause events of the video element.

For some reason, the previous method was not effective, but this new approach is working perfectly. Take a look at the code snippet below:

vidx.onplay = function() {
    h1.style.display="none";
    vidx.removeAttribute("controls");
}

vidx.onpause = function() {
    h1.style.display="block";
    vidx.setAttribute("controls","true");
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do watches operate asynchronously?

I am monitoring the status of a variable called radioStatus within a Vue instance: watch: { radioStatus: function(val) { if (!this.discovery) { $.ajax({ url: '/switch/api/radio/' + (val ? 'on' : 'off') }) ...

javascriptvue.js

The JQuery functionality is failing to execute properly on Internet Explorer

I have developed a JQuery script that appears to be working perfectly in all browsers, except for IE 8. Interestingly, when I checked Internet Explorer's error details, it did not provide any specific information about the issue. Instead, IE simply po ...

javascriptjquery

Utilize a function as a parameter

I am struggling to figure out how to make this function pass by reference in my code. Is there a way to achieve this? var Class = function() { var callback1; var callback2; function buildStuff(data, callback) { element.onclick = funct ...

javascriptfunctionclosures

Which specific scenario might trigger the onScrollChanged event of a horizontalScrollView?

Having an issue with HorizontalScrollView. Overriding the onScrollChanged method to monitor only the x scroll position value. While touching and dragging on the screen, the values in onScrollChanged are correct. But when releasing the finger, each value ap ...

androidhorizontalscrollview

A guide on embedding text onto the bottom of an image in Material-UI GridList using Reactjs

I'm currently developing a Mern-stack application and using Material-UI for the frontend. My GridList is functioning correctly, but I want to position my description text at the bottom of the image rather than in front of it. However, when I try to a ...

cssreactjsflexboxmaterial-uicodesandbox

Ways to utilize a string as an object?

Hey there! I'm just getting started with software development and currently working on an application using React Native. The backend is sending me a large data set, but here's a snippet of it. My challenge is that I want to access the first ele ...

javascriptjsonreact-native

A guide to effectively displaying JavaScript variables within a jQuery function

Initially, I believed this was a problem specific to WordPress, but after spending hours attempting to resolve it, I suspect that it may actually be a broader JavaScript issue. I've been grappling with this challenge for a few hours now and I'm ...

phpjavascriptjquery

Styling an image with dual attributes using CSS

I'm looking to customize two img classes with different properties. For instance, in my CSS, I want to define: img { padding-left: 15pt; float: right; } and then: img1 { padding-left: 15pt; float: left; } where img1 would serve as a tag fo ...

htmlcss

The javascript file is unable to detect the presence of the other file

I am facing an issue with two JavaScript files I have. The first one contains Vue code, while the other one includes a data array where I created the 'Feed' array. However, when trying to output a simple string from that array, the console throws ...

javascriptvue.js

SQL says there is no table, but the table is actually present

In python, I created a database file using sqlite3 that contains 2 tables named ANSWERS and QUESTIONS. My goal was to use this file in my android app by following the instructions on this post to copy it instead of creating it. After copying the file and i ...

androidsqlandroid-sqlite

Discover the process of transitioning your animations from Angular to CSS

I have successfully implemented a fade-in/out animation using @angular/animation, but now I am looking to transfer this animation to CSS and eliminate the dependency on @angular/animation. Here is my current animation setup (triggering it with [@fadeInOut ...

cssangularanimationcss-animations

Volkswagen elements spilling over

Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcss

Getting rid of the title bar in Android

Similar Question: What changes are needed in a layout to hide the titlebar? How can I eliminate the title appearing beneath the battery and time indicator bar? I am not sure what to call that specific bar, but it's the "Nested XML Layout" bar in ...

android

This is an alignment of the background image ('relative') to the right side

I am facing an issue with the header section of my website. The background-image is styled using the following CSS: .header { position: relative; min-height: 436px; background: url("../img/holland-canal.jpg") no-repeat; background-size: co ...

cssresponsive-design

Navigating through Node and Express on Azure App Service

I'm facing an issue that I am not sure if it is related to Node or Azure App Service, so here's the situation: In my Node/Express app, I have defined two routes: router.get("/users", checkAuthHeader, userController.getUsers); router.po ...

javascriptnode.jsazureexpressazure-appservice

Ways to have MongoDB present nested JSON data as an array?

I recently came across some interesting data: { "_id" : ObjectId("5461e16ee7caf96f8f3584a2"), "num_marcacao" : "100", "sexo" : "Fêmea", "idade" : "20", "bigdata" : { "abortos" : [ { "data_aborto" : ...

javascriptnode.jsmongodbmongodb-query

Boxes not occupying entire vertical space

My structure is unique, like a 9-box with div elements: <div class="NBWrapper"> <div class="NBTopRow"> <div class="NBLeft" /> <div class="NBRight" /> <div class="NBMiddle" /> </div> & ...

css

What could be causing Next.js to throw an error upon completion of the MSAL OAuth process?

I encountered an error while building a website using next.js. The site is set up for production, and after the authentication process with MSAL for Azure AD integration, I am facing the below error during the OAuth loop. As a beginner in next.js coming fr ...

javascriptnode.jsreactjsnext.jsmsal.js

I am able to access the JSON file from the URL without any issues, but for some reason, I am unable to fetch it using $

(function(){ $(document).ready(function(){ $.getJSON('http://dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=AAPL&callback=?', function(){console.log("function was run");}); }); }()) I recently delved into working with APIs. Ho ...

javascriptjsonajaxxml

Is it possible to embed a section of code from a different file?

Looking for a solution to streamline the process of updating multiple web pages with identical header and footer content. Currently have 5-10 pages with the same information, making it time-consuming to manually update each one when changes are needed. I ...

htmlcss