I need help with scrolling a div horizontally using the mouse scroll button. My div does not have a vertical scroll and I would like users to be able to scroll horizontally. Can anyone provide guidance on how to achieve this?
I need help with scrolling a div horizontally using the mouse scroll button. My div does not have a vertical scroll and I would like users to be able to scroll horizontally. Can anyone provide guidance on how to achieve this?
<html>
<head>
<title>Scrolling Test</title>
<script type='text/javascript'>
window.onload = function(e) {
evt = e || window.event;
var mousewheelevt=(/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel';
if(document.attachEvent) {
document.getElementById('scrollableDiv').attachEvent('on'+mousewheelevt, scroll);
} else {
document.getElementById('scrollableDiv').addEventListener(mousewheelevt, scroll, false);
}
}
function scroll(evt) {
scrollTarget = evt.currentTarget || evt.srcElement;
if(scrollTarget.scrollWidth > scrollTarget.offsetWidth) {
var delta = Math.max(-1, Math.min(1, (evt.wheelDelta || -evt.detail)));
switch(delta) {
case 1:
scrollTarget.scrollLeft -= 32;
break;
case -1:
scrollTarget.scrollLeft += 32;
break;
}
}
}
</script>
</head>
<body>
<div id='scrollableArea' style='width: 256px; height: 256px; position: absolute; overflow: hidden;'>
<div style='width: 400px;'>
Sample text for scrolling test Sample text for scrolling test Sample text for scrolling test Sample text for scrolling test Sample text for scrolling test Sample text for scrolling test Sample text for scrolling test Sample text for scrolling test Sample text for scrolling test Sample text for scrolling test
</div>
</div>
</body>
</html>
Typically, this task involves leveraging JavaScript. While I'm unable to supply the exact code at this time, the concept is fairly straightforward:
margin-left on the element, adjusting it in line with how much the user has scrolled vertically.Being a beginner in both unit testing and angularjs, I encountered an issue while trying to test if my modals are displaying correctly. > TypeError: undefined is not a constructor (evaluating '$('#modalId').modal('show')') ...
With all the conflicting information available, I am seeking clarity on this topic. Objective: To create and enhance a Phonegap app using Phonegap Build. 1) My preference is to utilize Phonegap Build without needing to install Android and iOS SDKs. 2) I ...
I have a form for adding users to my Application. After submitting the form, I want to open a hidden TAB/WINDOW where another form is displayed with values retrieved from the database being written to a file. I need this second form to be automatically su ...
Currently, I am conducting research on how to establish connections with Bluetooth devices through a web page. My goal is for the webpage to display a list of paired devices and be able to connect to them (specifically bluetooth printers). While I have com ...
My current challenge involves implementing form validation using JavaScript. The goal is to prevent the form from being sent to the server if any errors are found. I have made sure that my JavaScript function returns false in case of an error, like so: ...
I am facing an issue with my code where the page is redirected to the index page of my website after the AJAX method completes, but the redirected page appears empty with just a background. function login(){ var uname = document.getElementById("UserNa ...
<table> <tr id="family_1"> <td>Family 1</td> </tr> <tr class="member"> <td>Member 1</td> </tr> <tr class="member"> <td>Member 2</td> </tr> ... <tr ...
Struggling to grasp the concept of vue.js, I am currently navigating my way through understanding how to fetch or call an API. Setting up my index.html and app.js, along with the required packages in the node_modules, has been relatively smooth. However, ...
My goal is to resize a file server-side using Jimp before uploading it to Cloudinary in a node.js environment. Here's the controller I'm using: exports.uploadImage = async (req, res) => { if (!req.files) { return res.status(400).json({ m ...
Creating a webpage with the ability to control an IP camera's movements such as moving up and down or zooming in and out involves calling specific URLs. While trying to implement this feature asynchronously, I encountered issues using AJAX which did n ...
Is there a way to animate a div element so that it expands to fit the screen when clicked without specifying an initial position? I need the div to be able to adjust dynamically within the screen. .box { width: 80px; height: 80px; background: red; ...
I'm in the process of setting up a CronJob to make an API call and save the response into the database: const CronJob = require("cron").CronJob; const btc_price_ticker = require("../../controllers/BtcExchange/Ticker"); const currency = require("../.. ...
I have a code snippet that is almost working. My goal is to change the selection of a JQuery dropdown select combobox using a separate button named "next". What I want is for the JQuery dropdown to automatically switch to the next selection every time I c ...
Whenever I attempt to inject 'ngAnimate' into my app, I encounter issues with instantiation. Here is the code snippet in question: var app = angular.module('musicsa', [ 'ngCookies', 'ngResource', 'ngSanit ...
Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...
Hello, I'm just starting out in programming and I could really use some help with this issue. index.html <button id="press">Click here</button> <div id="show_image"> </div> <br> <div id="appended_area"></div&g ...
After dedicating almost two full weeks to this project, I'm still struggling to achieve the desired outcome. I suspect that the issue may lie in the depth of the rows and columns I'm working with, but I'm open to any external perspectives or ...
When working with three.js, the Y axis typically represents up and down, while the Z axis represents forward and backward. However, I want to switch this so that the Z axis represents up and down, and the Y axis represents forward and backward. Here is an ...
I am currently working on resizing an image using drawImage while maintaining the scale. Here is what I have so far... window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext(" ...
My goal is to enhance my learning by fetching data from a mock JSON API and adding "hey" to all titles before returning an Observable. Currently, I am able to display the data without any issues if I don't use the Map operator. However, when I do use ...