I have a website that functions smoothly with typical user scrolling. Nevertheless, I am interested in incorporating a feature where the user is automatically moved to either the bottom or center of the div element upon scrolling. The elements in question likely have a height of 100vh. Could someone provide assistance with this? Appreciate it!
add this snippet to your index.js file
and include custom code or var elm
var element = ".et_pb_section";
$(element).each(function (index) {
// handle mouse wheel event individually
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail)
delta = -event.detail / 3;
var moveTop = $(window).scrollTop();
var elementSelecter = $(element).eq(index);
// scrolling from top to bottom
if (delta < 0) {
if ($(elementSelecter).next() != undefined) {
try {
moveTop = $(elementSelecter).next().offset().top;
} catch (e) {}
}
// scrolling from bottom to top
} else {
if ($(elementSelecter).prev() != undefined) {
try {
moveTop = $(elementSelecter).prev().offset().top;
} catch (e) {}
}
}
// animate scroll (0.5sec)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 500,
complete: function () {}
});
});
});
Greetings, this is my initial post so please forgive me if I have missed any important information. I'm currently in the process of creating a webpage using react. My goal is to display content on the page by iterating over a relatively straightforwa ...
Currently, I'm facing an issue with transferring data from a form to the Firebase realtime database. Here's my view function. I made some changes by adding a user token, but unfortunately, it hasn't resolved the problem yet. The information ...
Currently, I am utilizing a ValueListBox to showcase a range of values for users to choose from. The main issue I am encountering pertains to IE11 and its subpar behavior when interacting with the control: The dropdown list appears all over the place (in ...
Currently, I am experimenting with WebRTC and looking to share a video stream with multiple peers. To optimize this process, I believe it would be beneficial to cache certain parts of the video. After exploring Cache Web APIs, I found them to be less effe ...
I am trying to implement dual sliding carousels using Bootstrap 5, but I am encountering issues with getting them to slide simultaneously. Despite incorporating data-bs-target=".carousel", the synchronization isn't working as intended in my ...
Can someone provide guidance on how to target a <ul> container within a freemarker template using JavaScript? My goal is to display the content of this specific <ul> element in my FreeMarker template on the web page. Any suggestions on how I ...
I'm currently utilizing https://www.npmjs.com/package/speakeasy for generating OTPs, and I want the expiration time to be set at 10 minutes. Below is the code I'm using for OTP generation: const generateOtp = function generateOtp() { let to ...
Is there a way for me to save a specific text from a cell in Google Sheets into a variable, and then use it to send an email with the text formatted within an HTML table? For example: Cell in Google Sheets: "Lorem ipsum dolor sit amet. Ut tenetur a ...
Having a website that receives traffic from different countries, including Portugal and other non-English speaking places, I decided to add a translation option. However, I encountered an issue with Google's translate feature which displays a banner a ...
Seeking advice on creating an ajax request function that is compatible across various browsers without relying on a javascript framework such as jQuery. Any ideas or suggestions are appreciated! ...
I am currently working with echarts (js). Is there a method to link the dot of the scatter plot with the 0 value on the y-axis? I want it to resemble a pacf plot, similar to this example: The desired outcome should look something like this: https://i.sta ...
I am looking to find a way to submit the information in the inputbox by either pressing the Enter key or clicking the mouse. Currently, when manually changing focus using the tab key or clicking with the mouse, the information is submitted. This is achiev ...
Currently, I am in the process of learning vue.js and have a question regarding the best approach to implement the following scenario: https://i.sstatic.net/2YBEF.png https://i.sstatic.net/YCEHG.png The main query is whether it is acceptable in HTML to w ...
Initially, the frontend passed an identification to the backend. The backend utilized this identification to retrieve data from the database. The extracted data then underwent additional processing on the backend before being sent back to the frontend. Be ...
While working on a scene in three.js that includes a high quantity of instances (around 2000) with 200-300 vertices each, I integrated some postprocessing effects using the EffectComposer. However, I noticed that the performance has been slowing down. Is ...
I am looking to incorporate JSON data into nunjucks "set". Here's a simple example: index.html {% set divname='foo' %} {% include 'template.nunjucks' %} template.nunjucks <div class="{{divname}}"></div> Everything ...
Is there a more efficient way to define the class variable accountHandler without using any? main.ts private accountHandler: any= {}; private requestLOB: string[] = []; constructor() { if (process.env.ENABLEBackendSwitch === "true&q ...
Utilizing the Bootstrap framework version 3.3.7, I am faced with the following code: $('#field_submit').click(function() { //omitted irrelevant parts if (counter == 0) { //no errors encountered, form can be submitted ...
Struggling to develop a progress bar that corresponds to project start dates and end dates. With a roster of 100 projects, spanning from mid-2017 to future launches, the aim is to depict progress between 2018, 2019, and 2020. If a project commenced in 2017 ...
My current CMS, Liferay, heavily relies on jQuery for various functions. Recently, I introduced a new feature to our website using fancybox. However, I realized that this new addition was causing issues with other jQuery functionalities on the page. Remov ...