I combined two simple examples from the react-select site (5.6.0) and the d3 site (7.6.1) in this codesandbox:
https://codesandbox.io/s/xenodochial-mccarthy-sjqv8w?file=/src/App.js
If you comment out Select on line 61, d3-zoom's behavior works as expected. If you uncomment it, the zoom behavior no longer works.
Anything I can do to make both work? If not, any sense on who I should file the bug with? (The example is adapted from a larger project of my own, where the select will affect the graph.)
Turns out the explanation is that most sample code for d3 just refers to a generic .select('svg'). And react-select has svg in its default dropdown.
Adding a unique identifier to the <svg /> element or a parent element resolves the issue.
Related
I have a website I'm working on that utilizes DaisyUI and Alpine.js (with intersect plugin).
In one of my templates I have a stepper with sections of content relating to each step. When you click one of the steps to the stepper, it scrolls you to the related section. That part is easy peasy. The difficulty is getting the step to highlight when you've scrolled to the related content manually. My lack of understanding of the intersection observer is what is throwing me off.
Here is a pen I made as a simple illustration of what I'm trying to do: https://codepen.io/jtomeck/pen/dyeVONz
The pen only shows the use of x-intersect alone. It works-ish, but you'll notice that there are bugs if you make the viewport taller. I'd ideally like the step to only highlight when the content is near the top of the screen, or at least more than halfway above the center of the viewport. I've tried:
Using threshold, but there are bugs since it does not observe the direction (from top of viewport or bottom of viewport) the intersection is happening from, as well as the threshold being defined as a percent creates strange behaviors on different sized screens.
Using margin, but it did not appear to work at all. I believe this is option is the right solution, but I'm struggling to find the proper resources online specific to my problem. I believe the answer will come if I can figure out how to manipulate the margin using enter and leave.
If someone wouldn't mind helping me with this I'd greatly appreciate it. Bonus points if all previous steps can remain highlighted when a new step is reached :). Not a requirement though!
I'd like to request that all answers continue to utilize alpinejs since it is a constraint of the project. Thank you in advance!
TLDR - Can anyone help me figure out how to use alpinejs and its intersect plugin to make the step of a stepper component highlight when the content it relates to reaches a certain position in the viewport (scrollspy effect)?
Update: Updated codepen to use:
x-intersect.margin.10%.0.0.0="shownStep = ' STEP NUMBER ID HERE '"
According to the documentation the expected behavior would be to detect intersection "when the element gets within 10% of the top of the viewport." It does not appear to work any differently than just using x-intersect without the margin added. I'm very curious why margin does seemingly nothing. I'm going to keep looking into it, but I'd very much appreciate any guidance anyone can provide about rootMargin and why the intersect plugin does not seem to be applying it properly.
I am trying to modify Bullet Charts example of dimple.js with each bullet chart being in a child-svg of the parent-svg. Purpose of having individual svg for each bullet chart is to make their management (show/hide/remove) easier. Also, this makes the recursive definition of a chart complete - That is, a chart is contained by an svg.
The fiddle for the modified version is here....
As you can see, from 2nd chart onwards, on mouse hover, tool tips go out of place!!! Please note that, for child-svg, I've set the style overflow: visible without which tool-tips were not visible at all.
Want to know if I am missing anything in handling the attributes of child-svg elements or is it a bug in dimple.js. Also, please let me know if you know of any workaround.
Thanks.
One of the first questions I have is why do you want child svg elements? What are you trying to accomplish?
The only difference I see in your code and the example is the height / width swap at the top and the sub svg + bounds.
Keep in mind that the origin changes with each sub-svg. This might be why you are having trouble with the tool-tips. Maybe you have that worked into your add-bullet calls.
I think nagu has the right approach here if you really want separate svg elements.
I'm getting strange problem with pie.htc and IE8. I have many elements on page that has rounded corners but pie works only for one element. My CSS is correct - I mean selectors are correctly assigned to pie behavior.
What elese could be wrong?
I have some experience using css3 pie and they have not been great. Here are the fixes i have used:
The elements that you are applying the behavior library too need to be position: relative for a start, so check that first. It may fix it.
If you want it to work in IE6 and 7 you need to add zoom: 1. I know you said you were using IE8 but my customers have said that in the past and it has been in compatibility mode, so always best to add that setting.
CSS 3 Pie does not support browser zooming either on background images so check that you are viewing the website in the 100% view and no other.
Hope that has helped. If you could post a jsfiddle then I could try and help further. If not check the css3pie known issues http://css3pie.com/documentation/known-issues/
Found a solution. Problem was that for these elements was used background with filter. Also css3pie sets background for these elements. After removing this filter everything works fine.
So i am trying to create a stage where i can have multiple items on it that are draggable.. but when the stage is clicked and dragged all the elements move with it.
So far I can only get one or the other to work by adding the 'draggable' property to either.
Has anyone got a solution for how to get this working?
Here is the JSfiddle http://jsfiddle.net/KHVhU/
I have considered the possibility that I might need to make the containing div draggable using jquery-ui instead of trying to do the whole thing inside the canvas, but ideally wouldnt want to take this route
the correct kineticJs library was not included. Use the correct KineticJs below.
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js
Now, each individual items will be draggable even with stage.
found the solution with the help of the setDraggable() function
Updated the JSFiddle here: http://jsfiddle.net/KHVhU/1/ :)
How do I make elements draggable between two divs? This seems to be something that draggables should do. But I haven't been able with the code I have. In this jsfiddle I have two divs with draggable elements. I want to get one element to go from the first div to the second div. That functionality must exist on many web sites.
Here is the jsfiddle with the code.
http://jsfiddle.net/gkvgn/9/
I have asked before and thought that someone would know how to have that functionality. If the code I have isn't the right way, how do I define an element and the draggable containment option to be able to have that functionality.
There's a similar Stack Overflow question that was answered here:
jquery ui draggable elements not 'draggable' outside of scrolling div
I implemented the above solution on my own project and it worked beautifully.
I agree that it does seem like if you set the containment to window or document, cross-div dragging should be allowed. I imagine that you'd prefer overflow to stay hidden due to the amount of content you want to keep in your divs.
Finally found the problem. Specifying overflow: hidden; for the container div restricts the draggable area to the container only. If I remove that specification from the styles. The elements are draggable across the divs. Here is the fiddle with the fix.
http://jsfiddle.net/gkvgn/10/
I could drag draggables from a scrollable div into a different non-parent when I stopped trying to use jquery. I ended up using https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations