Develop Reference

How to disable page pinch-to-zoom trackpad gesture or Ctrl + wheel over an element?

Look at the example here - https://openseadragon.github.io/examples/tilesource-dzi/
When you ctrl + scroll on the zoomable image. Image zoom works but the page do not scale. Outside of the image, the entire page zooms.
I am trying to achieve the same functionality on my Next.js page, tried adding preventDefault on the wheel event but it does not work.
How to achieve the desired behavior?

I found this snippet for vanila js project:
const image = document.getElementById("your-image-element");
image.addEventListener("wheel", function(event) {
event.preventDefault();
let zoom = 1;
if (event.deltaY < 0) {
zoom += 0.1;
} else {
zoom -= 0.1;
}
image.style.transform = `scale(${zoom})`;
});
You can use CSS to change the transform property of the image to achieve the zoom effect. You can also use the preventDefault() method to prevent the default behavior of the mouse wheel event, which is to scroll the page. To only zoom the image and not the whole page, you need to update the CSS transform property of the image element only.

On edge, it worked by preventing the gesture event - https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturestart_event
On further investigation, I found that using onWheel on JSX element produces React's synthetic event. Instead when I use object ref and add wheel event like ref.current.addEventListener('wheel', (e)=>{e.preventDefault(); e.stopPropagation()}, it worked.

Particles js not displaying properly until the resize event is triggered

As stated above, I am using the particles.js library to add a background to a div on a site that I am designing.
When the page loads, the correct div has the animation as a background, but it always starts way too "zoomed in". It appears to be using too large a default screen size, however whenever the screen area is changed either by directly changing the window size or opening the developer console it triggers the "resize" event and then everything is displayed correctly.
The resize event code is as follows:
if(pJS && pJS.interactivity.events.resize){
window.addEventListener('resize', function(){
pJS.canvas.w = pJS.canvas.el.offsetWidth;
pJS.canvas.h = pJS.canvas.el.offsetHeight;
/* resize canvas */
if(pJS.tmp.retina){
pJS.canvas.w *= pJS.canvas.pxratio;
pJS.canvas.h *= pJS.canvas.pxratio;
}
pJS.canvas.el.width = pJS.canvas.w;
pJS.canvas.el.height = pJS.canvas.h;
/* repaint canvas on anim disabled */
if(!pJS.particles.move.enable){
pJS.fn.particlesEmpty();
pJS.fn.particlesCreate();
pJS.fn.particlesDraw();
pJS.fn.vendors.densityAutoParticles();
}
/* density particles enabled */
pJS.fn.vendors.densityAutoParticles();
});
}
What I am looking for is either a way to get the animation to load properly, or to trigger the resize immediately upon page load so that it always looks right to page visitors.
What I have tried
I have tried manually setting the size of the canvas element that the library creates, however that does not work. I have also tried changing the size of the div that contains the element, and that also does not work.
Potential conflicts or easier solutions
I am using Jquery 3.1.1 and Bootstrap 3

To trigger the resize you do:
$(window).trigger('resize');
when the dom is loaded

iOS Safari - disable scroll / bounce but retain zoom

I'm creating a web-app for iOS Safari and have run into a slight hurdle.
My web-app only takes up 1024x768 of screen real estate and therefore does not need scrolling, but it does need to be able to zoom (it's a PDF annotator).
I have used a plugin called iNoBounce (https://github.com/lazd/iNoBounce/) which successfully removes scrolling from the page by firing an evt.preventDefault() on the touchmove/touchstart events. This is great.
What this does though, is remove zoom events as well as scroll events. Is there a way to remove scrolling/elastic bouncing but to retain zoom on iOS safari?
Many thanks

I managed to solve this issue by listening to some values on the touch event object, specifically changedTouches.length and scale.
First I set a global variable for zoomLevel at the top of the document var zoomLevel = 1
Next, I replaced evt.preventDefault() in iNoBounce with:
if(evt.changedTouches.length === 1 && zoomLevel <= 1){
evt.preventDefault();
}
if(evt.changedTouches.length > 1){
zoomLevel = evt.scale;
}
This looks at how many fingers are being used and if the page scale is not 100%, then acts accordingly.

Chrome HTML5 Video - Blurs webpage on resize

I'm using the BigVideo.js plugin (http://dfcb.github.io/BigVideo.js/) in a website of mine. I am also using the following Javascript to scale the site up or down as the user resizes their browser.
$(document).ready(function() {
scaleSite();
});
$( window ).resize(function() {
scaleSite();
});
// Scale Site to Fit Window
function scaleSite() {
var windowWidth = $( window ).width();
var defaultWidth = 1200;
var scaleWidth = 1;
var isMobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// MOBILE ACTIONS
} else {
// STANDARD ACTIONS
if(windowWidth >= defaultWidth) {
scaleWidth = windowWidth/defaultWidth;
var scaleWidthRounded = Math.round( scaleWidth * 10 ) / 10;
} else {
scaleWidth = windowWidth/defaultWidth;
var scaleWidthRounded = Math.round( scaleWidth * 10 ) / 10;
}
$("#mainDiv").css("-webkit-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("-moz-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("-o-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("msTransform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-webkit-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-moz-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-o-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("msTransform", "scale("+scaleWidth+")");
// RESET BODY HEIGHT
var mainDivHeight = ($("#mainDiv").height()*scaleWidthRounded);
$("body").css("height", mainDivHeight);
$("html").css("height", mainDivHeight);
}
}
Strangely enough, when I load a page that has a video playing on it, and I try to resize the browser, the scaling works correctly but everything BUT the video gets a little blurred.
I had trouble with this same issue when using the Jssor Slider plugin, it also caused my pages to blur after resizing the browser window. I resolved that issue by adding the $HWA : false to the options for the Jssor Slider, which disabled the plugins ability to use Hardware Acceleration.
Is there something in the BigVideo.js or the underlying Video.js file that I can adjust to prevent hardware acceleration there as well? As it seems to be the same cause.
UPDATE
I just noticed the blur issue ONLY happens in Chrome. Firefox and Internet Explorer both work fine with no problem, but in Chrome, all content on the page OTHER than the BigVideo itself gets slightly blurred.
UPDATE 2
Okay, so I just noticed that if I inspect element on the div containing the HTML5 <video> tag and I delete it from the DOM, my text "snaps" back into focus. I went through the div item by item and unchecked CSS styles thinking that would lead me to the one that is causing problems but still no luck.
Why would deleting the element from the DOM in the Chrome DEV tools snap the rest of the page back into focus and remove the blur?
Below is a screen shot showing an example of the text on my page BEFORE I resize the browser window, and the result AFTER I resize. Again, if I resize, the page gets a bit blurry, and if I delete the element containing the <video> using the Chrome DEV tools, the blur goes away.
UPDATE 3
So I removed the BigVideo plugin and replaced it with a generic HTML5 <video> tag, the video still plays and the blur issue is still present when resizing the browser. So it's something with the way chrome is handling the HTML5 video along with my scale site script.
JSFIDDLE
https://jsfiddle.net/h5vu7La7/3/
Not sure if this will help or not, but if you resize the window on this jsFiddle you can see the text (in Chrome) is blurred a bit. If you remove the <video> from the HTML and re-run and resize it does not blur.
Also noticed if you run the fiddle, and inspect element on the video and delete it from the DOM, the text snaps back into focus.

If you are applying transform scale CSS rule to a HTML element that has child elements (I'm guessing those visible in the pictures are inside one of the divs you are scaling), they will get somewhat blurry due the layer moving to 3D plane.
Open inspector and apply transform: scale(1.01); to the blue button below here on SO and you'll realize what I mean.
Instead of scale, you should just resize the width and height of the video element.

iScroll 4 No Canvas click/tap events when zoomed in

I have an odd problem that I can't work out - I'm using iScroll 4 to scroll an HTML5 canvas (implemented as below):
mapScroll = new iScroll('td_map', {zoom: true, bounce: false,
hScrollbar: false, vScrollbar: false,
}, 100);
The zoom works brilliantly (tested on iPad 2/4), and the canvas items which have tap and click events are firing when the map is not zoomed in. However as soon as the zoom is used (so in iScroll the scale is changed from minZoom of 1) the click events aren't firing or they're not being reached. If I zoom out or double click to reset the zoom back to normal, the events will fire as expected again.
The click event:
trainGroup.on("click tap", function(evt) {
console.log("Hello train!");
});
Any ideas as to what's going on would be great :)
Thanks very much,
Becky
EDIT: After much debug logging to work out what was going on where, it looks like the mouse event has the wrong information. It seems that the CSS transform the zoom does on the canvas doesn't update the mouse clicks, so when I think I'm clicking on the object its actually clicking whatever would be on the non-zoomed canvas. I haven't figured out how to update the mouse events with the translated info yet, but at least thats progress :)