We're currently using ReactJS and MaterialUI for our front end, there's a specific component that we're struggling with and we're not sure what's the best way to do it. If it should be a slider: https://material-ui.com/components/slider/ or stepper https://material-ui.com/components/steppers/ or a line with simple selectable dots. It's also hard to know where to look...
Here is a exemple, basically we have a algorithm working in the back end that will select one of the four exclusion dots on a vertical line.
For this scenario vertical stepper would be the best choice.
Link : https://material-ui.com/components/steppers/
You can modify or remove the next and back button as per your requirement.
Related
I want a little help from you. I'm stuck with a problem using react beautiful dnd library.
I want to prevent dropping items before the red line and before the red line all items should not be draggable also. You can say kind of a timeline task. The red vertical bar shows the current time and before the current time no items can be dropped.
Here is a chunk of my code to take a look:
If you have any suggestions or ideas please comment. Thanks
I am new to scroll Trigger.
I want to achieve 2 things in this demo. I will appreciate a little help here. I am trying it for the last 24 hours but not sure what I am doing wrong.
My Pen
`https://codepen.io/amirkhan1992/pen/mdLJKOo`
First I want to pin the Do More word after the scale down and scroll up the right side list.
Second, when the do word come comes in from of list item it should change the color. just like this demo.
`https://codepen.io/mikeK/pen/poPwzae`
I am pretty new to this. I am using https://github.com/Wildhoney/ngDonut to create donut on my website. I am able to get it up and running now my next step is to make it clickable. Lets take this example http://ng-donut.herokuapp.com/
Suppose if I want to make it in a way when a user click on the donut partition the it becomes highlighted with corresponding row on the left hand side pane. I am not sure how to achieve it.
Can anyone throw some light on it?
Thanks in advance.
If you don't want to fork and modify the project they have https://github.com/Wildhoney/ngDonut#mouse-events
Using the click handler and the model object I imagine you can find the corresponding row and set a property on it that causes it to be highlighted (ng-class). For the pie itself to highlight you may be able to make use of the colours property mentioned in the README.md there.
If that doesn't work out would need to fork the project and take a look at where it's using those colours to draw the pie with D3 and have it modify them based on the last one that was clicked on.
I've built a very basic grid of divs by using float:
However when expanding one of the items placed in the right-hand side column, here is what happens (please excuse my crude/lame arrows I've used to illustrate what I'm trying to achieve):
Which is what I expected but not what I really want. I'm looking for a neat way of having boxes A and B move up to fill the empty spot and items C-H to move up one row so that available space is utilized most efficiently.
Here is the JSFiddle I've created to illustrate this problem (apologies it's not clickable, stack overflow rep thing again...) :
http://jsfiddle.net/VDV6S/4/
I would appreciate any suggestions.
You need jQuery Masonry, or something similar.
Alternatively, you can split the items into two columns manually: http://jsfiddle.net/thirtydot/VDV6S/5/
Another option is to use CSS3 columns, however the browser support might not be acceptable.
I can use CSS or javascript but I've been struggling with it. It needs to be an "on-click" behavior when you click on the number in the lower right corner... like this one: http://www.winteradagency.com/mrw/images/residential2.jpg
So that when you click on #1 you get the first photo, #2 the 2nd one and so on...
Any ideas?
thanks!
Without showing what you've tried, I'm a little reluctant to just give you the answer. You'll learn more if I don't. If you provide code and show where you're stuck and such, well, that's a different story.
That being said, if you want to use jQuery, there are some nice plugins that have a similar functionality to what you want. One of them being Easy Slider. Here's also a list of 15 jQuery Image Gallery Plugins that I got from doing a quick google search.
Why not create four buttons and align it to right end, and everytime the image changes you update the text of the buttons. Each button could simply update the image to the one corresponding to its number.