Hi,
I’m trying to catch a Control Key + Scroll Wheel event, in the same manner that you would zoom a page. I was working from this example here, MouseEvent.ctrlKey
This is an attempt to catch a “Zoom Text Only” event in Firefox. I have no interest in the text-size, just trying to catch the event itself.
Very few FF users would actually would actually go through the menu and click Zoom In or Zoom Out. Most will use the Ctrl Key + Scroll shortcut or The keyboard shortcuts shown in the image above. ( Ctrl++ or Ctrl±) I would actually like to catch those too but I’ll take things one step at a time for now.
Using the .resize event to catch a change in the window size also includes Page Zooming for all browsers. I will be using that too, but hoping it doesn’t conflict with an EventListener set up for “Zoom Text Only”.
Here’s my JS
function sizeIt(){
const el = document.querySelector(".get-ht");
const faux = document.querySelector(".faux");
const elHt = el.offsetHeight;
faux.style.height = elHt + "px";
//console.log("sizeIt has run");
}
sizeIt();
// Would like to catch 'Zoom Text Only' in FF with Control Key + Scroll Wheel
window.addEventListener("wheel", function(event){
if(event.ctrlKey){
sizeIt();
console.log("ctrl key down on wheel event");
}
});
//Run again on page zoom and window resize
window.addEventListener("resize", sizeIt);
You’ll see I’m using the .wheel event along with event.ctrlKey. It works, but it’s kinda choppy and causes the sizeIt() function to lag behind. If you run the test page below in Firefox and select Zoom Text Only you will see what I mean by “lags behind”. The green box on the left is always about 20px off.
When I use .keydown it works smoothly but fires continuously while the Ctrl key is down.
window.addEventListener("keydown", function(event){
if(event.ctrlKey){
sizeIt();
console.log("ctrl key down on wheel event");
}
});
In that situation the sizeIt() function works properly and it behaves the same way as my .resize EventListener, which takes care of standard Page Zooming.
Does anyone have any ideas on how I can make sizeIt() run smoothly on a Ctrl Key + Scroll Event ?
Here is the complete test page. It looks like I’m trying to do equal height columns but the green box is not a sibling, so CSS can’t match the heights. This is a test case from a much more involved page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Match height of non-sibling</title>
<style>
h1 {
font-size:1.3em;
text-align:center;
}
.wrap {
width: 80%;
max-width: 600px;
margin: 0 auto;
position: relative;
}
.get-ht, .faux {
width: 75%;
margin-left:auto;
border: 1px solid;
padding: 4px;
background: yellow;
box-sizing: border-box;
}
.faux {
position: absolute;
top:0; left:0;
width: calc(25% - 4px);
height: auto;
background: palegreen;
}
p {margin: 1em}
</style>
</head>
<body>
<h1>Match height of non-sibling</h1>
<div class="wrap">
<div class="inner">
<div class="get-ht">
<p>Set this div's height on the faux div, which is not a sibling.
Give this div's height to the green box to the left.</p>
<p>Set this div's height on the faux div, which is not a sibling.
Give this div's height to the green box to the left.</p>
</div>
</div>
<div class="faux">faux div</div>
</div>
<script>
function sizeIt(){
const el = document.querySelector(".get-ht");
const faux = document.querySelector(".faux");
const elHt = el.offsetHeight;
faux.style.height = elHt + "px";
//console.log("sizeIt has run");
}
sizeIt();
// Would like to catch 'Zoom Text Only' in FF with Control Key + Scroll Wheel
window.addEventListener("wheel", function(event){
if(event.ctrlKey){
sizeIt();
console.log("ctrl key down on wheel event");
}
});
//Run again on page zoom and window resize
window.addEventListener("resize", sizeIt);
</script>
</body>
</html>
