I am currently utilizing 5 carousels on my screen, all of which are operated by the same navigation buttons. In addition to this, I require the ability to control them using the middle mouse scroll. However, when I activate the mouse wheel control, only the carousel that the mouse is on top of moves when scrolled. My objective is to enable movement for all carousels simultaneously.
In my opinion, this is how I approached the problem.
// Carousels Wheel Control
$( '#body' ).on( 'mousewheel', function ( event ) {
if ( typeof event.originalEvent.wheelDeltaY === 'undefined' ) {
console.log( "Unable to detect mouse deltas" )
}
var deltaY = event.originalEvent.wheelDeltaY;
var scrolledUp = deltaY < 0;
var scrolledDown = deltaY > 0;
if ( scrolledUp ) {
if (swiper_color.activeIndex > 2) {
goTop();
}else{
swiper_color.slidePrev();
swiper_image.slidePrev();
swiper_desc.slidePrev();
swiper_title.slidePrev();
swiper_jar.slidePrev();
}
}
if ( scrolledDown ) {
if (swiper_color.activeIndex < 2) {
swiper_color.slideNext();
swiper_image.slideNext();
swiper_desc.slideNext();
swiper_title.slideNext();
swiper_jar.slideNext();
}else{
checkscroll();
}
}
});
Check out this JS fiddle I created to illustrate my issue. As you zoom in and out of the browser page, the value of max-width that appears in the console keeps changing. However, in the CSS code it is always set to 500px. How can I retrieve the original CS ...
I have successfully extracted specific elements from a form, stored them in an array and now want to convert this array into a JSON object to send it to a PHP file via AJAX. However, I am facing some issues with my code. Here's what I have done so far ...
Is there a way to enhance this code so that when a comment is deleted, the page does not refresh? It can be frustrating when deleting a comment causes the page to scroll back to the top. AJAX function deleteComment(pid){ $.ajax({ type: "PO ...
Currently, I am attempting to establish a connection between MongoDB and Node (ts). However, during the connection process, I encountered an error stating: "This expression is not callable. Type 'Promise<void>' has no call signatures" da ...
Is it possible to dynamically set the background color of the :root CSS property in an HTML file based on a hash present in the URL? The code provided does change the background color, but unfortunately, the hash value doesn't persist as users navigat ...
I am facing an issue with setting up the dropdown feature for my list. It's similar to ul li:hover ul li. What I'm trying to achieve is something like ul li:focus ul li in jQuery because I don't think it can be done using CSS. The desired ou ...
I currently have a hyperlink <a href="url1">url1</a>. Interestingly, I have noticed that some websites utilize JavaScript to display this as url1 but in reality, it redirects to url2. When you hover over the link, the original url is not visib ...
import React from 'react'; import { makeStyles} from '@material-ui/core/styles'; import {Select, MenuItem} from '@material-ui/core'; import useState from 'react'; const sample = () => { const data = [ {TITLE : & ...
I'm working with an API that contains pages from 1 to 10 and my goal is to cycle through these page numbers to make the necessary API calls. app.factory('companies', ['$http', function($http) { var i; for (i = 1; i < 11 ...
I created my own WebSocket server using Python, but I encountered an issue where Chrome 4.0.249.78 dev (36714) always disconnects after the handshake process. Wanting to rule out any issues with my code, I tested it using the WebSocket server from , only t ...
Attempting to switch the engine view from .ejs to .html resulted in an error. After searching online, I was unable to find a solution for the following problems: Express 500 SyntaxError: Unexpected token : in D:\practise\nodejs\nodejs-demo& ...
I am attempting to center one flex item both vertically and horizontally. At the same time, I want some text to remain fixed at the bottom of the flex container. When I use margin-top:auto on the text, it just moves the inner box to the top. Any suggesti ...
As I delve into learning React, I've encountered some challenges. Despite thinking that I grasped the concept of controlled components, it appears that there's a misunderstanding on my end. The issue arises after an onChange event where I notice ...
I'm looking to create a uniquely customized button in React using TypeScript. Essentially, I want to build upon the existing properties of the <button> tag. Below is a simplified version of what I have so far: export default class Button extend ...
My Vue app is constructed using Webpack and includes a few basic computed properties, such as calculating the sum amount from input values. However, I now require the capability to replace the summation function with one stored in a separate file that is n ...
I am currently working on creating an edit form to modify data from a database based on its ID. Here is my approach: import React, {FormEvent, useEffect, useState} from "react"; import TextField from "@material-ui/core/TextField" ...
The carousel code I have found returns a different number of items to display based on screen size. You can check it out here. $(function() { var mini = 1000; var big = 1280; if (window.screen.availWidth < mini) { $('#carousel1').jsCar ...
While attempting to access the reed.co.uk REST web API in order to retrieve all related jobs, I am encountering an issue. Despite passing my username and password, a popup window keeps appearing when I call the URL. The alert message displayed reads: i ...
While running an AngularJS filter sorting on a table, I encountered an issue where if the value is 'n/a' (which is a numeric string), the sorting is incorrect. I expected the order to be n/a, 0, 1, 2, 5, 100 since strings should be considered l ...
In my design project, I utilized Inkscape to create a circle. With the fill turned off, only the stroke was visible. The starting point was set at 45 degrees and the ending point at 315 degrees. After rotating it 90 degrees, here is the final outcome. < ...