I have a use case, where I need to make en element positioned fixed whenever you scroll below it.
I can’t use position: sticky in this case as the html is not right for it.

I created a gant diagram with javascript see here

i’m currently working on a website. I have this dropdown menu button and when you press it there are 3 images shown. I want these images to change when you click on them to other images.
My HTML code:

I changed standard cursor to grab. What i would like in addition is that cursor (grab) changes color, not background.

I have a checkers project that I am trying to debug, I am using this logic to move pieces around. I play around with the CSS properties to remove pieces from previous boxes and add them to target boxes. Suppose player taps cell A which contains a gold piece then I use this code to check if the cell contains a gold piece

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: _widgetOptions[_selectedIndex],
),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn’t enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.,
),
child: Text(‘Drawer Header’),
),
ListTile(
title: const Text(‘Home’),
selected: _selectedIndex == 0,
onTap: () {
// Update the state of the app
_onItemTapped(0);
// Then close the drawer
Navigator.pop(context);
},
),

There is a block with limited width. It has buttons. The sum of the button widths is wider than the width of the parent. A scroll appears. When you press a button, it should scroll in the direction it needs until it (the pressed button) is in the center of the parent block.
Scrolling seems to work, but the buttons are not centered correctly, apparently due to the fact that the outermost element rests on the scroll border or block border and this prevents further scrolling. It turns out that only the 4th and 5th buttons are in the center, although they are already almost in the center (and to be honest, I’m not sure that they are doing everything right either). The remaining buttons twitch slightly, but do not become centered. Help me solve the problem.

from source in
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox

I have this javascript function and i want it to be active only for screen min-width:1070px. How can i do? can i use media queries?

I am using this type of menu as in link : https://github.com/SuperZombi/SwipeMenu_JS/blob/main/examples/swipe_menu.html. when i sroll down the main menu and click on last menu the submenu slides out and overlaps the main menu.here the submenu height remains same as main menu height and if there are few submenus i have to scroll up to view the submenus.How can i scroll the menu to top when new submenu displays?