I have been attempting to implement the following code:
body {
touch-action: none;
}
.left-side {
touch-action: pinch-zoom;
}
<div class="left-side"><img src="image.jpg" /></div>
The touch-action: none is functioning properly, but the left-side element seems to be affected:(
Am I making a mistake in my implementation? Could the body style be overriding everything?
The touch-action property has a unique value called pinch-zoom, which serves as a modifier according to The MDN specification. This value is used in conjunction with other keywords:
The
touch-actionproperty can be defined as either:
- any one of the keywords
auto,none,manipulation, or- one of the keywords
pan-x,pan-left,pan-right, and/or one of the keywordspan-y,pan-up,pan-down, and optionally the keywordpinch-zoom.
pinch-zoom by itself does not trigger any specific action, but it indicates to the browser that it should allow two-finger gestures for controlling the specified actions.
For instance, to enable multi-finger support for horizontal scrolling on a page, you would use:
.left-side {
touch-action: pan-x pinch-zoom;
}
Note: Keep in mind that this feature only applies to touch-enabled devices; non-touch devices like mice or accessibility systems will not exhibit any changes in functionality.
These properties may surprise you:
The touch-action CSS property is a powerful tool for controlling user interactions with an element, helping to prevent unnecessary event dispatching.
While you can't introduce new touch interactions, you can limit existing ones as needed. So how does the pinch-zoom property come into play?
Panning on a website typically triggers zooming in on the page content. Specifying a touch-action can override this behavior, but incorporating pinch-zoom will allow it again.
Implementing a pinch-zoom solution via CSS alone is not common knowledge. However, with some JavaScript and key touch events (touchstart, touchmove, touchend), it's achievable. Additionally, libraries like hammerjs offer handy gesture functionalities.
To delve deeper into touch-action functionality, check out this resource here.
I am facing an issue with my Vue CLI application that uses Webpack and Vuetify. The Vuetify components are not loading properly, and I keep getting the following warnings: Unknown custom element: < v-app > - did you register the component correctly? ...
Is it possible to drag an element on the page into a droppable element inside an ajax loaded div? The code works fine when the droppable element is placed directly in the regular page, but not within the ajax loaded div. It seems like the issue may be rela ...
How can we transition from a menu like this : https://i.sstatic.net/qQ2k1.png to this when the screen size reaches a specific width: https://i.sstatic.net/AUM4v.png In essence, replacing certain texts with icons. Is pre-defining it and changing the dis ...
Is there a way to hide a button when a function starts, display some text, and then hide the text and show the button again when the function finishes? I'm struggling with this task because JavaScript doesn't output anything to the screen until ...
Looking to apply a class when a certain screen height is reached? Here's my approach: window.onscroll = function() {scrollPost()}; function scrollPost () { var x = window.screen.width; var i = window.scrollY; var a = i / x; animator ...
Let's consider the arrays provided below. var clients = ['a','b']; var reports = ['x','y','z']; var finalData = []; Now, I aim to iterate through them in a specific manner as shown. for(var i=0;i< ...
When sending compressed JSON in response to an Ajax request from my Java program, I understand that I need to set the Content-Encoding in the Response Header to gzip. However, are there any additional steps I should take? ...
Currently, I am working on a software project built with TypeScript. This project relies on several third-party libraries that are imported through the package.json file. One such library includes a utility class, utilized by other classes within the same ...
When using a bootstrap template, I encountered an issue with adding an image as a background. Here is the CSS code: background:url(../images/banner.png) no-repeat; background-size: 100%; The problem with these CSS rules is that the image gets clipped and ...
I recently pulled my project from a git repository and encountered issues while attempting to run npm install. Despite trying different solutions like running npm install --save core-js@^3 to address the core-js error, I keep receiving the same message pr ...
Can Firebug display CSS comments? I'm wondering if it can help with debugging when using line numbers from SASS. I haven't been able to find any information on this feature, so any help would be greatly appreciated. ...
I am in need of assistance with a question I have. On a page, an AJAX function is executed after the page finishes loading, creating a table in PHP that contains two buttons: one for changing passwords and the other for deleting. This table is then injecte ...
I have a group of items listed, and I would like them to smoothly fade out while the next one fades in seamlessly. Below is the code I've been working on: document.ready(function(){ var list_slideshow = $("#site_slideshow_inner_text"); ...
I am in the process of developing a brand new widget where we are incorporating a unique feature that displays the number of CSS files included within an HTML page. Our team requires the count and names of all CSS files utilized on the webpage. While I a ...
Hello all, I'm currently learning AngularJS and I was wondering if anyone could recommend the simplest and most effective method for dynamically displaying links from AngularJS to HTML. I am looking to display a variable number of buttons in my HTML ...
While utilizing MDL tooltips (), the tooltip typically displays just below the <div> it is linked to. I am aiming for the tooltip to show up to the right of the referenced element, rather than beneath it. My attempt to adjust the appearance in styl ...
I have two Objects in my database collection. [ {"_id" : 1, name: "notLowercased"}, {"_id" : 2, name: "lowercased"}, ] Using find and $regex to search for names that include a specific string. data = await Catal ...
Is there a way to customize the hover tooltip with a "? icon" for users providing input guidance in a text field? I prefer the design to have white background with grey text and larger font size, as opposed to MUI's default style which is grey with wh ...
I have a specific route linked to a specific controller and view: app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/create', { templateUrl: 'partials/form/form.html', controlle ...
<tr ng-model="check" ng-repeat="orderBook in orderBookDetails| orderBy: 'orderBook.no'" value='check=$scope.orderBookDetails.sowNo'> <td ng-if='check!=orderBook.no'>{{orderBook.no}}</td> <td>{{order ...