Is there an easy JavaScript method that works across different devices and libraries?
I am looking to assign a class to the html element in order to enable scrollable containers on mobile devices when needed.
I want to follow a similar approach to Modernizr, where feature support is detected instead of relying on browser detection. However, I prefer not to use the entire Modernizr framework as I am aiming for lightweight JavaScript for a mobile project.
Thank you!
While it may not be perfect, I am utilizing this method to identify the presence of -webkit-overflow-scrolling.
var overflowScrolling = typeof($("body")[0].style["-webkit-overflow-scrolling"]) !== "undefined";
Subsequently, I check for absence of overflow-scrolling on mobile devices before loading iScroll.
This ensures that devices capable of supporting overflow: scroll, but lacking support for -webkit-overflow-scrolling, will still utilize iScroll, providing native scrolling functionality to iOS 5 and newer versions of Android.
Check out this unique solution that covers all potential options, including non-vendor prefixed properties and is not reliant on libraries such as jQuery or Modernizr:
function checkOverflowScrollingSupport() {
var prefixes = ['webkit', 'moz', 'o', 'ms'];
var testElement = document.createElement('div');
var bodyTag = document.getElementsByTagName('body')[0];
var hasSupport = false;
bodyTag.appendChild(testElement);
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
testElement.style[prefix + 'OverflowScrolling'] = 'touch';
}
// Including the non-prefixed property
testElement.style.overflowScrolling = 'touch';
// Checking the properties now
var computedStyle = window.getComputedStyle(testElement);
// First the non-prefixed one
hasSupport = !!computedStyle.overflowScrolling;
// Now onto the prefixed ones...
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
if (!!computedStyle[prefix + 'OverflowScrolling']) {
hasSupport = true;
break;
}
}
// Cleaning up old div elements
testElement.parentNode.removeChild(testElement);
return hasSupport;
}
alert(checkOverflowScrollingSupport());
Here lies a perplexing inquiry. Alas, at present there appears to be no foolproof method for verifying overflow: scroll compatibility.
The Filament group offers a workaround for this dilemma which could prove beneficial in your endeavors (refer to ). Nonetheless, they themselves acknowledge:
The challenge lies in the difficulty – arguably the impossibility – of confirming overflow support...
Out of necessity, Overthrow delves into the user agent string to greenlight current and future iterations of mobile platforms recognized for possessing native overflow support; however, not before exploring more trustworthy and impartial methodologies: notably, iOS5's (and now Chrome Android's as well!) touch scrolling CSS attribute, alongside a comprehensive desktop browser deduction assessment (absence of touch event support on screens exceeding 1200px width).
I have a piece of code that needs to address synchronization issues related to the execution order of MathJax functions. Specifically, I need to ensure that all the MathJax operations are completed before running the setConsoleWidth() function. What is t ...
My attempts to capture a bad request error using my jquery code have been unsuccessful. $.get('http://example.com/', {}, function () {}, 'jsonp') .done(function () { // never fires }) .fail(function () { // never fires }) .a ...
For a project I am working on with my client, they have requested that the datepicker in MUI X default to the year 2023. They would like the datepicker to automatically display the year 2023 with the option for them to change it if needed, as most of the d ...
How to pass variable values in series: [{data: }] In the code snippet below, I have the value 2,10,2,2 stored in the variable ftes. I need to pass this variable into series:[{data: }], but it doesn't seem to affect the chart. Can anyone guide me on ...
Below is a snippet of my sample code: SAMPLE HTML CODE: <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <l ...
When using WebSocket to communicate with my server, I call the handleSubmit() function to send data and update my state based on the received response. Everything works fine initially. Upon calling componentWillUnmount, I stop sending data to the websocke ...
This is a straightforward question, but I'm unsure how to achieve it. I am currently working on sorting columns using jQuery. $(document).ready(function(){ $(".up,.down,.top,.bottom").click(function(){ var row = $(this).parents("tr:f ...
I am looking to enhance my context menus to be more like what is demonstrated here: Currently, I have only been able to achieve something similar to this example: https://codesandbox.io/s/xenodochial-snow-pz1fr?file=/src/DataGridTest.tsx The contextmenu ...
Html Code:- {% for post in posts %} <article class="media content-section"> <div class="media-body"> <h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}&l ...
After following the W3Schools tutorial to create a slideshow, I found that the animations are working correctly. However, only three dots appear on the screen and I have to manually click on one of them to view the pictures. var slideIndex = 0; sh ...
When I set the height of my Google map div in pixels, it displays correctly. However, when I try to set it as a percentage, specifically 100%, the map does not show up. I have tried setting the height of all parent divs as well, based on suggestions from S ...
My nested list with a collapse feature is almost complete. However, I am encountering an issue where I need to add content just below the selected item when I click on the "add" button. For example, in the attached demo, there is a nested list. If I select ...
I'm looking to create a simple 3D model viewer with rotation capabilities, but I've run into an issue. When I add OrbitControls to my code, the page just shows up as blank: controls = new THREE.OrbitControls( camera ); controls.addEventListener( ...
Imagine a layout where there is always a header at the top, a footer at the bottom, and the space between them should be filled by the content 100% (image 2). Additionally, everything in the header, content, and footer should be horizontally centered, usin ...
Creating a responsive website has been challenging, especially when it comes to accommodating IE7. I'm considering turning off ALL media queries for just IE7 while maintaining the styling and layout in desktop mode. Is this possible? ...
I'm attempting to display the most recent time I made changes and the current version of the library. Initially, I crafted a data element called Global - Example: return "DTM:" + _satellite.publishDate.split(" ")[0] + "|" + "Adobe:" + s.version; Su ...
Currently, I have three node apps running on the same server but with different localhost ports. My goal is to create a router that acts as a proxy for each app and then place this proxy in a virtual host. While I am currently testing this setup on my loca ...
Description I am currently working on a project that involves nodejs, TypeScript, and express. The source files with a *.ts extension are being bundled using webpack, while the node_modules folder is excluded using webpack-node-externals. However, when I ...
My role does not involve JavaScript development; instead, I focus on connecting the APIs I've created to front-end code written in Vue.js by a third party. Currently, I am struggling to determine the hierarchy between parent and child elements when ac ...
I need assistance with auto-formatting the postal code entered by the user. The rule for the postal code is to use the format A0A 0A0 or 12345. If the user inputs a code like L9V0C7, it should automatically reformat to L9V 0C7. However, if the postal code ...