jqueryui | Shim repository for jQuery UI

How do I do a drag and drop using jQuery UI to move data between two or more divs?

I'm using jQuery and this is in conjunction with an asp.net core api.

This would essentially be like a calendar, being able to move entries between days.

The tutorials I've looked at don't cover exactly what I need to do. New Divs (or elements) will be created dynamically, and I've been unable to get the drap/drop to work in the dynamically created divs, even after applying droppable()/draggable() to the new elements.

I've included the html page below and css in a mock-up. The mock-up doesn't include any dynmaically-added elements to keep it simpler for now.

There are a series of divs in the mock-up that represent days. Each day contains event items that can be moved around to different days. If you imagine this when connected to a data source, where it says Monday, Tuesday etc will display the date.

But first of all, I need help with understanding how I get what I currently have to work without absolute positioning.

Index.html:

I'm building a web app and am trying to incorporate animations to make it a little more pleasing to use. I'm new to the industry so I'm sure there is a better way of doing this so sorry in advance for the bad code!

I have two menus: One is for 'Sector', the other is for 'Menus'. Upon selecting a sector a few menu items will populate for that given sector. AND THEN once the Menu item has been selected the blank section on the right will populate with the actual content. (It's kind of like a dashboard?)

In any case, As you can see in the code I'm constantly toggling through which items to show and which items are to hide. (If there is a short cut way to do this please let me know!)

The problem I am running into is when I add a fadeToggle() I find that it works initially, however eventually the app glitches and will loop.

I have written in the code that IF the pharma canvas is display == none then show the welcome message again, but it's not working..

I want to have a high fade ideally so I can incorporate animations on the welcome menu (the big orange div that appears before clicking anything)

Is there a better way of ensuring that once the fade happens it stops if the user selects a different menu option?

For example: If I click Pharma, then click it again (to hide it) i want to absolutely make sure that it will 100% be hidden and not start fading again.

I'm trying to make a Booking website (arrival, departure), where I could choose 2 dates (one for arrival and one for deprature) using jQuery UI DatePicker. Once I'd select 2nd date (deprature) I want the program to calculate how many days were there between Arrival and deprature and multiple it *50. once I get that number I'd like to put it in my text form (Price).

So if I give you an example. I'd select "25.05.2021" for my arrival and "28.03.2021" for deprature. So It would return number "3". Then I'd multiple 3*50 so I'd get "150" and put that "150" inside "Price" form.

I am making a module for a cmyk color model. It's a simple program, but I need advice or solution on how to do it so that the balls are not draggable even outside the background. How should I do that?

My Code:

I am using Drupal 8.9.15 (with composer and Docker). The problem is that the vurenabilities dependency check tool detects about 200 issues and most of them are realted to Drupal, and most of them to jqueryui which is used by Drupal, for example:

/web/core/assets/vendor/jquery.ui/node_modules/grunt-html/vnu.jar/META-INF/maven/commons-fileupload/commons-fileupload/pom.xml

/web/core/assets/vendor/jquery.ui/node_modules/babel-core/node_modules/lodash/package.json

/web/core/node_modules/ftp/package.json

Why is it happening if Drupal is secure CMS? Is it possible to fix it somehow? I see that the packages are downloading automatically to node_modules in drupal core directory.

I am working on my first ecommerce shopify project so I am very new to liquid. I have customised my code to incorporate jQuery's datepicker to select a delivery date and currently when the date is selected and the order is confirmed, the selected date appears in additional information on business side order confirmation, never being visible again to the client. What I would like to do is create a global variable/property that I can: 1. reuse in another liquid page(e.g the confirmation page) and 2: use in an email template. Is this possible and how could I do this?

delivery-date.liquid

I have a slider and an small input text box which updates based on where you scroll on it.

Here is the javascript:

I've done my best to append a CSS version of my wrapper but I am having a lot of trouble with the slider (2nd item in the flex box).

This is a 5 step slider than I am trying to align to its 5 markers, denoted as the years 2017 through to 2021. However, the right hand side is going too far our of bounds each time, and does not line up with the markers themselves. I've tried my best to create a workable version, but this project was allocated to me with no notes and I'm struggling.

My ideal outcome is to have a slider that fits on the markers that requires very little/no responsive design tweaks when moving across displays (1280px, 1920px eg). Just that when you select say, 2019 - the ui handle is actually on that point. Further, when you select 2021 the ui handle doesn't go out of bounds.

The $year variable is read in from an options.inc file as range(2017, 2021) which appends the markers. But there is a disconnect between the slider and the markers.

My solution, if I cannot find better, is to use classes to move the slider depending on the class (first/second/middle) and map that across. But as you can imagine, having CSS overlap JS gives a bit of an awkward animation that I am trying to avoid.

I am on the https://jqueryui.com/selectmenu/ website where I am trying to build xpath for the first selector Select a speed. I build the xpath to iframe but how to reach the first selector Select a speed?