Apologies if this question seems trivial, but I am completely new to coding in HTML and JavaScript.
I understand that I can make some changes based on scroll position, but right now I'm a little confused. I want to increase the height of a box as the user scrolls down.
It currently starts with
"height: 60px;"
and then I would like it to grow proportionally like "height = 60 + scrollY * a very small number + px".
Is there a way to accomplish this?
Many thanks and best regards!
let initialHeight = 60;//default height
document.addEventListener("mousewheel", function(event){
if(event.wheelDelta >= 0){
initialHeight--
element.style.height = `${initialHeight}px`
}else{
initialHeight++
element.style.height = `${initialHeight}px`
}
})
If you want to achieve a cool effect of enlarging a box when a user scrolls, you can utilize the scroll_event method.
Check out this example that demonstrates how to dynamically calculate and change the height of a box as the user scrolls:
<html lang="en>
<head>
<title>Scroll large demo</title>
<style>
body {
min-height: 1000px;
background: aliceblue;
}
#box {
height: 60px;
background: red;
color: white;
vertical-align: middle;
text-align: center;
position: fixed;
margin: 0 auto;
padding: 15px;
}
</style>
</head>
<body>
<div id="box">
I am going to enlarge when you scroll
</div>
<script>
let lastKnownScrollPosition = 0;
let ticking = false;
function doSomething(scrollPos) {
document.getElementById("box").style.height = 60 + (scrollPos * 0.25) + "px";
}
document.addEventListener('scroll', function (e) {
lastKnownScrollPosition = window.scrollY;
doSomething(lastKnownScrollPosition);
if (!ticking) {
window.requestAnimationFrame(function () {
doSomething(lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
});
</script>
</body>
</html>I am facing a challenge where I need to replace an active button with a deactivate button. The issue is that when I click on the active button, it does change to the deactivate button as expected. However, clicking again does not switch it back to the acti ...
My goal is to develop a simple single-page application without using any frameworks, focusing on providing users with tutorials on specific subjects. I am encountering an issue with the javascript code for my page, receiving the following error: Uncaug ...
What is the process for modifying the default error message to a custom error message? Specifically, my custom message. const VALIDATION_SCHEME = Yup.object().shape({ numOne: Yup.Number().required('!'), numTwo: Yup.Number() .r ...
As a newcomer to the world of node.js/express, I must say that I am thoroughly enjoying my experience with it so far. I have adopted ES6 syntax for imports in my project. Initially, when setting up my project, I defined all my routes as follows : app.get ...
Is there a way to stretch only the footer on a blogger simple template to full width without altering other elements? I have looked into similar topics, but they mainly focus on WordPress or involve changing multiple elements, which is not suitable for my ...
I've been struggling to make this jQuery math function work with my form. The snippet works fine, but when I try to integrate it into the actual form, I can't seem to get it aligned properly to perform the required calculations. Any suggestions ...
I have been working on a bootstrap site at http://soygarota.com/blog/public After checking the code multiple times, I have added the bootstrap.min.css, bootstrap.min.js, and jQuery. However, for some reason, the header navigation is not collapsing when vi ...
Despite AutoSizer's width providing the correct value, I am consistently encountering a height of 0 for Autosizer. This is causing the VirtualScroll component to not display properly. However, when using the disableHeight prop and setting a fixed heig ...
While reviewing the Modernizr documentation, I couldn't find any information on creating a menu element and then checking its existence. However, I am concerned that even if the browser supports this, it may not support the type context. Do you have a ...
I'm currently developing an application with speech-to-text commands functionality. I have created a form, but I am looking to manipulate the input elements from outside the form framework. <form id="myform"> <input type="tex ...
Background: My localhost (referred to as Server A) hosts a node.js server, while an external server running node.js can be found at (known as Server B). Although I lack control or access over Server B, which serves as a dashboard site for an IoT device in ...
Is there a way to trigger a method once an image has finished loading and displaying on the web browser? Here's a quick example using a large image: http://jsfiddle.net/2cLm4epv/ <img width="500px" src="http://www.digivill.net/~binary/wall-cover ...
Is it possible to include a button inside a Tab? When I click on "Homepage", the tab switches correctly with the indicator showing on the right tab. However, when I click on "Profile", the indicator moves to the logout button instead. How can I fix this ...
I am currently working on creating a user interface layout with components that need to be arranged in a specific order, as depicted in the accompanying image. My task involves developing a Material UI Dialog within a React application based on the design ...
I need help comparing two similar code snippets: myFunc(); function myFunc() { var e = document.getElementByClassName("link"), i = e.length; while (i--) { e[i].addEventListener("click", function() { //do stuff for each ...
I've been working with Typescript and NLP.js. However, I'm encountering an issue where the argument manager is displaying 'Parameter manager implicitly has an any type'. I attempted to use :, but it didn't solve the problem eff ...
I am currently developing a booking application within Vue CLI. I have made use of vue-ctk-date-time-picker for selecting the date and time. My goal is to disable certain times based on the chosen date, but I am encountering an issue. The code I have writt ...
After attending a recent talk by Steve Souders, I was fascinated by the discussion of the new performance spec being implemented by modern browsers. During his presentation, he used an example to demonstrate how to measure perceived page load time: var ti ...
Below is the HTML code for checkboxes, with a function that limits only three selections: <form class="interestSearchCriteria"> <input type="checkbox" name="walking" value="Walking"> Walking <input type="checkbox" name="running" value=" ...
Having trouble navigating through the submenus? Here's a solution! *,body{ margin: 0; padding: 0; box-sizing: border-box; list-style-type: none; font- ...