Develop Reference

Dropdown menu of a select element is changing the background of the page (JS, MUI)

I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using.
Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image.
At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.
Example:
My site : https://dinsangun.github.io/crypto-converter/
The lib docs: https://mui.com/components/selects/
(In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)
Is there a way to overcome this little bug?
Thanks.

Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen.
It's the same problem for MUI website.
One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;

Setting active text link based on mouse wheel scroll content + linking text links to each mouse wheel scroll content

I know this is a JS/ jQuery problem, and I have very decent CSS skills but sadly my JS knowledge is failing me big time. I bought a website template recently for my portfolio. It's a good one but I'm really struggling to adapt it.
What I'm trying to achieve is:
when you mouse wheel scroll (up or down) through each content block, the links below (at bottom of page) are active based on the content above. Forwards and backwards. So basically the text links at bottom would be bold depending on the active content above it.
I'd also like the text links below to link to it's relevant content above. i.e. Project 3 would open Project 3 content (with the content animation).
For a start I've tried targeting each ID for the content blocks. i.e. id="project-3" then adding href="#project-3" but this is clearly not working. I also tried data-target="#project-3". Still no dice.
I'm trying to mimic the bottom navigation of this brilliant site here: http://fakemusic.fr/ (so as you wheel scroll through each artist, the links below are highlighted + they're clickable.
I made a Codepen here:
[Codepen](https://codepen.io/oioisaveloy/pen/eYzjGLr)
Apologies in advance, I couldn't work out how to de-activate the annoying preloader.
Thanks in advance!

With Jquery it is very easy
Give A unique data-id to your each "display-table" class and give a unique id also in anchor of "menu-item"
make a css class which has a highlight css like underline
then try jquery conditional js like if your "display-table class" has class "projects-item-active" then add class to anchor id and remove from siblings
and if someone clicking on anchor then add class "projects-item-active projects-item-animate" to "display-table" and remove from siblings.
click project 1 project 2 project 3 and see
Pen Added
[1]: https://codepen.io/mamun-rashid-raja/pen/zYBLRrp

Changing URL while displaying page change animation

Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.

There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.

Menu hover effect when scrolling on the page

I created a site with a top navigation bar that has hyperlinks to anchors in the same page for different content.
I'm trying to create a hover effect on the navigation bar when a user scrolls past the corresponding anchor in the same page. For example, when I scroll past link1's anchor, I want the top navigation hyperlink for link1 to change to a different color.
I tried searching Google but can't find anything relevant to do this.
Can someone point me in the right direction or provide some code examples for how I might do this using HTML/CSS/Jquery/Javascript, etc?

Sounds like you want a ScrollSpy plugin.

dropdown menu stops working after page jump

My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.

The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.

It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.

Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!