We Keep Coding

Creating a side panel similar to code pen

I am trying to create a side panel similar to that of codepen editor in react, where you can drag to adjust the size of the different editors.
If I drag an editor header towards the bottom low enough, the editor below it will follow, almost as if I have appended that component to the drag, likewise if i try ti drag the header upwards. I have built the layout to my liking with a similar concept to the accordion from material UI:
https://mui.com/material-ui/react-accordion/
I was also able to mimic the on click behaviors of the header from codepen, for example, double click would open the editor to full size and triple click will open all evenly by keeping track of the heights of all the 'containers' in a useState hook. However, I am having trouble with the dragging part. I am looking for some suggestions for good libraries/ideas to use to help me achieve this.
Currently I am using framer motion to make the expanding of the container more 'smooth'.
https://www.framer.com/docs/transition/
I noticed that they also have dragging capabilities which I am also exploring. My idea is to have an onDrag for each of the headers. Depending on which header I am dragging, if I drag down until my container size is 0, I start shrinking the container below it and then the one below it and so on and so forth. I am able to get the Y property from the onDrag function but I am a bit hesitant to do my calculations in x/y coordinates. Does anyone have any suggestions or any libraries that might make this easier?

I don’t know any libraries. I think if you got this far you can probably do it yourself in plain js, using listeners and selectors, etc, or whatever react can provide. Is there something specific that makes you ‘hesitant’? I recently found these which made things easier for me, they might not be 100% relevant but still good to know: getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
That will tell the position relative to the viewport, it was useful for me dragging dividers between panels.
And if you need the position relative to the container:
https://stackoverflow.com/a/11634823/5350539
And if you’re not already, I guess you could look at setting the panel CSS positions using ‘bottom’ (with position absolute or relative), then animating the height to e.g. 30px less than the bottom edge of the upper panel. Tip: while dragging, add a body class to disable user select: user-select: none;

I want to scroll zoom in and out of an image, but also have pins on that image stay positioned correctly. jQuery

So I want to make a scroll zoom feature on a map I have created. The map contains an image and a number of divs positioned on top of the map marking out positions (pins).
I have found a number of jQuery tools which allows me to scroll zoom on an image. And I could probably try and use the mouse position and scroll amount to edit the coordinates of my divs as well. Is this the best way of going about this, or does anyone know any jQuery tools that will allow me to scroll zoom in and out of divs?
Here are some tools I found for scrolling on images.
image zoomer
Wheel zoom

You could try using leaflet.js. It is a lightweight javascript library meant to be used for maps, but it also work for images. This tutorial could help you start, and you might want to check this post.
Here is a very basic example of what it could look like.

Flot line graphs in popups have overlapping axis labels

I have a table of data with some hover-activated popups. These popups are simply div elements with position: absolute and display: none initially set; a few lines of JavaScript then hide or show them based on mouse hovering. A flot line graph is attached to each popup.
This works great and fast, except for one hitch. Flot has a bug which causes the x-axis and y-axis labels to overlap at the lower-left corner when the graph is part of a popup like this. In short, the solution is to display the containing div before generating the graph.
I tried a solution in which I eliminated the initial display: none from the CSS for each popup div. I also eliminated the background-color and border style elements, effectively making these divs invisible. Then some simple jQuery generates the graphs and does the proper CSS styling for these popups (setting the background-color, border, etc.). This works, functionally. The graph labels are now correctly positioned. But it's slow. It easily triples the loading time of the page, which is unacceptable.
Simply adding display: none back into the initial CSS for the popup divs solves all the performance problems. So the jQuery code itself cannot be the bottleneck. But that of course causes the label formatting to be messed up again.
Does anybody know how to overcome this issue?

As you discovered, Flot must draw into a div that's attached to the DOM. I can't say for sure without an example, but I would guess that your slow performance is probably due to the fact that the divs, even if they have no content, are still on-screen, and so you're triggering a redraw whenever you change them.
Instead of hiding the background and border, simply absolute-position the div far off-screen, e.g. top:-9999px; left:-9999px. That way it's still in layout, so Flot can make its measurements, but the browser is smart enough not to redraw something off-screen.

I've solved the problem by just deferring the generation of each graph until the initial corresponding mouse hover event is fired. I also had to initially set the z-index of the containing divs to be -1 and then change this to 1 upon generation of the graph; otherwise the invisible div would "cover up" other page content, making it impossible to, say, click on links "behind" the div before the graph was generated.

how can I frozen, fixed label when scroll down on the jquery flot

Please refer to http://jsfiddle.net/7FfMd/3/
I have x-axis label at the top, when scroll down since the height of the chart is very height, I want to have the label still visible, or fixed, or frozen. How can I do that?
This use jquery and jquery flot.
thanks

Some incarnation of this possibly.
http://jsfiddle.net/7FfMd/5/
I would do this though:
There is a navigation plugin that lets you pan and zoom. I would just make sure your graph is within the bounds of the page (no scroll bars) and let people pan and zoom.
Plugin: http://people.iola.dk/olau/flot/jquery.flot.navigate.js
Plugin Example: http://people.iola.dk/olau/flot/examples/navigate.html

Put a div behind another but still show up above?

Ok this question may sound a bit convoluted, or at least esoteric, but I'll try my best to elucidate.
In my charting application I have a div which is used as a popup tool tip. This tooltip appears when you hover over a datapoint and gives you some information. I used z-index to make the tooltip render above the underlying chart div. However, the underlying chart has interactivity with mouse events, so is it somehow possible to have the underlying chart register mouse events even though the mouse is hovering over the tooltip?

You could capture the mouse event, taking note of the coordinates, then add these coordinates to the real position of the tooltip relative to the page. Then you can re-fire a fake MouseEvent using these coordinates, minus the coordinates of the underlying div element, at the underlying element.

While I agree with the answer regarding capturing the mouse events, I think there is a workaround. Simply position the tooltip div a few pixels off of the mouse cursor. That way it never appears underneath the mouse cursor and it would not be clickable.

I do not know if this is practical or not in your situation, but you could append the tooltip as a child element to the data point. That way it is still part of the chart.

Actually, on browsers that support css3, pointer-events is the simplest solution. :)