It appears that the scrollbar is not meant to be visible in this scenario. By utilizing JavaScript, we can implement a wheel event for scrolling without displaying the scrollbar. This code snippet represents the final product that aligns with what you are aiming to achieve:
const main = document.querySelector(".wrapper")
main.addEventListener("scroll",e=>{
const subs = main.querySelectorAll(".nav > .each > .sub-menu")
subs.forEach(sub=>{
let parent = sub.closest(".each"),
parentX = parent.getClientRects()[0].x
sub.style.left = parentX + "px"
})
})
main.addEventListener("wheel",e=>{
e.preventDefault()
let speed = 0.4
main.scrollBy(e.deltaY * speed,0)
}).each:hover > .sub-menu {display: block !important;}
.sub-menu{display: none;}
.nav .sub-menu > .each > .sub-menu {
left: 100%;
top:0px;
}
.wrapper {
width: 320px;
overflow-x: hidden;
overflow-y: hidden;
}
.title {width: max-content;}
.each {
background:white;
cursor: pointer;
}
.each:hover {background:rgb(194, 194, 194);}
.nav {border:1px solid black;}<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="wrapper">
<div class="nav flex w-max">
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
<div class="each">
<div class="title p-1 px-4 border-l">with sub</div>
<div class="sub-menu absolute border">
<div class="each">
<div class="title p-1 px-4">sub menu</div>
<div class="sub-menu absolute border">
<div class="each">
<div class="title p-1 px-4 border-l">2nd sub</div>
<div class="sub-menu absolute border">
<div class="each"><div class="title p-1 px-4 border-l">3rd sub</div></div>
</div>
</div>
</div>
</div>
<div class="each"><div class="title p-1 px-4">2nd menu</div></div>
<div class="each"><div class="title p-1 px-4">2nd menu</div></div>
</div>
</div>
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
<div class="each"><div class="title p-1 px-4 border-l">menu</div></div>
</div>
</div>Is there a way to capitalize only the first letter of a string if it's a letter, without changing the case of any other letters? For example: "this is a test" → "This is a test" "the Eiffel Tower" → "The Eiffel ...
Hey there! Struggling with incorporating bootstrap into my django website. I've added the bootstrap link in the HTML page and inserted the navbar code in the body section, but upon running the server, the website remains unchanged! What could be ca ...
I've exhausted all options, but I just can't seem to get the fields aligned horizontally. <form class="form-horizontal" role="form"> <div class="form-inline"> <div class="form-group"> <label for="acctName ...
Hey there! I am dealing with a situation where I have two columns of content in a container. The first column contains text, and the second column is a span with a background sprite image. The issue arises when the screen resolution gets smaller - I want ...
Hello there! I encountered an issue with Git recently. I was attempting to clone a repository in order to push my project code, but I ran into an upstream error. I tried doing a git pull without success, then attempted to revert back to my initial commit ...
My goal is to develop an editor that allows users to input code in various languages by selecting an option from a dropdown menu. The code should then be automatically highlighted based on the chosen language. I am considering using Codemirror for syntax ...
I need help retrieving database rows using PHP. The JavaScript success function doesn't seem to be working. Can anyone spot a potential issue in the PHP code? Here is the PHP code: $id=$_GET['id']; $stmt = $db->prepare("SELECT * FROM b ...
My collection of objects includes the following inputs: var jsonArray1 = [{id:'1',name:'John'},{id:'2',name:'Smith'},{id:'3',name:'Adam'},{id:'1',name:'John'}] There is a dupl ...
I have a function in JQuery that asynchronously posts data function post_data_async_globalEval(post_url, post_data, globaleval) { $.ajax({ type: 'POST', url: post_url, data: post_data, dataType: 'html', async: true, ...
Take a look at this simple case in the following jsfiddle: https://jsfiddle.net/hsak2rdu/ I attempted to swap and animate two elements, but it didn't work as expected. When you click the toggle button in the playground, the second element quickly mo ...
I developed a REST API using NestJs and TypeORM, focusing on my user entity: @Entity('User') export class User extends BaseEntity { @PrimaryGeneratedColumn() public id: number; @Column({ unique: true }) public username: string; publi ...
My NodeJS API is set up to communicate with another API and fetch a data object in the form of a Base64 string. The client making the API call needs to be able to download a PDF file generated from this base64 data. What is the best way to return the dat ...
As I delved into the realm of creating a unique Omegle clone using Node.js and Socket.io for educational purposes, I encountered a challenge that has left me scratching my head. The socket ID of clients along with their interests are stored in an array of ...
Encountering an issue with calling multiple elements of the same class using .innerhtml. Here is the URL I am dealing with: When running the following code in Chrome console, this is the output: document.getElementsByClassName('a-size-small a-color- ...
I'm currently implementing the UI Slider on my website. However, I would like to customize the slider with three different colors: Handle Color Previous portion of Handle Next portion of Handle I want it to look something like this: Currently, I h ...
I have developed a full-stack application using React for the frontend and server.js written in nodejs(Express), with Postgres as my database backend. I have previously deployed a similar setup on Heroku, where I hosted my site. The difference is that on H ...
I need help with some extra indentation that is appearing under an ordered list I have created. I want to eliminate the extra spacing to achieve a cleaner look. This is how I want it to appear: https://i.sstatic.net/O7cyG.png However, it currently looks ...
I have developed a web application that incorporates Google's Material Icons into its design. The majority of the icons I utilize are from the default 'filled' style, with only one being from the 'outlined' style. To bring these ic ...
I'm currently working on a solution for sharing signers across multiple JavaScript files. In my walletConnect.js file, I successfully connect to Metamask and retrieve an ERC20 token contract. async function connect(){ try{ const accounts = awai ...
Issue : Error in ./src/components/main.js Line 7: No function call or assignment found, only an expression is present (no-unused-expressions) Search for the specific keywords to get more information on each error. import React from 'react'; ...