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 am facing an issue with implementing three tabs and buttons in my project. Each button should display a corresponding message when selected I have tried using e.currentTarget but no success so far. Can someone guide me on how to resolve this problem? You ...
I'm currently developing a basic webpage that has a feature allowing users to download the final result as an image file in the last step. To achieve this, I've added a hidden HTML button for downloading the result image and used CSS to set its ...
I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...
I'm struggling with adjusting the position of my dropdown list. It keeps hiding behind the carousel (slider). When I set the position of the carousel section to absolute, it causes the navbar to become transparent and the images from the carousel show ...
In my current application, I have a basic sidebar that displays a list of names fetched from a JSON call to the server. When a user clicks on a name in the sidebar, it updates the 'nameService' with the selected name. Once the 'nameService& ...
I have a form that needs to update values on click of a radio button. Unfortunately, my jQuery skills are lacking. Here's what I have tried so far: HTML: <form> <input type="radio" checked="true" id="q1r1" name="q1" value="Awesome"> ...
Material UI text-fields are being used and validated with Formik. I am looking for a way to map items to avoid repetitive typing, but encountering difficulties in doing so. return ( <div> <Formik initialValues={{ email: '&a ...
Just starting out with Vue, I'm currently experimenting with the active classes feature from this Vue3 carousel plugin. My goal is to only show the text and link divs for the carousel__slide--active class, but at the moment, all carousel__items are di ...
My ultimate goal is to create a button for the main page. I am looking to place an image and text side by side within this button, with a click on it directing me to the main page. Unfortunately, I have been facing challenges in resizing or stretching the ...
I have a collection of marker objects named markers. I am currently utilizing a for loop to assign event listeners to each one. However, I am encountering difficulty in determining which specific marker was clicked. This is the current code snippet I have ...
I have the following code snippet: let self = this; self.rows = []; self.data.payload.forEach(function (item, index) { if (!(self.rows.includes(item))) { self.rows.push(item); } }); The issue is that includes always returns false. Each ite ...
Working on a new small application and experimenting with Angular. Encountering an issue where I am making an AJAX GET request upon clicking a button. After receiving the response, I want to set a variable to hold the result, but for some reason the variab ...
It feels really repetitive to have to add margin classes to each LI manually on a non-dynamically generated menu. It almost seems as messy as using inline style attributes... Is there a more efficient way to handle this? While it may not be a big deal fo ...
Whenever I attempt to send a token from one address to another, I keep encountering the error mentioned in the title. Below is the relevant snippet of my JavaScript code: tokenContract.transfer($("#targetAddr").val().toString(), $("#amt" ...
Our project includes global classes for components that are utilized throughout the entire system. <style lang="scss" scoped> .specialPages { padding: 0 10px 30px 10px; } /deep/ .SelectorLabel { white-space: nowrap; al ...
I've been working on hosting my project on GitHub pages by creating a /doc file and placing all my HTML, CSS, and JS there. If you're interested, you can check out my project here: https://github.com/mattfrancis888/the_movie_db The only way I&a ...
I encountered the following error while trying to execute npm run dev: Error: Missing script: "dev" Error: Error: To view a list of available scripts, use the command: Error: npm run Here is a list of scripts present in my package.json file: "scripts ...
I'm looking to customize the size of my spinner when loading data. Is it possible to have predefined sizes for the spinner? For example: <spinner small> would create a 50px x 50px spinner <spinner large> would create a 300px x 300p ...
While attempting to perform a JSONP AJAX request, an error was thrown: Uncaught SyntaxError: Unexpected token I'm puzzled about what is wrong in my code. Can someone assist? $.ajax({ url: 'http://api.server32.trustklik.com/apiv1/website/ ...
Looking to create a dynamic animation with images that update every 15 minutes from the following URL: How should I go about storing and looping through the most recent 24 images for the animation? Is using a MySQL database the best option or are there o ...