I want to create a "palette" to drag from using react-beautiful-dnd. This will be like a palette in a drawing app, ie. (a copy of) the draggable will remain in the palette during the drag, and the palette will not animate at drag start or drag end.
I have achieved most of what I require using:
setting isDropEnabled={true}
hiding the placeholder with CSS div[data-rbd-placeholder-context-id] {display: none !important;}
reducing the drop animation according to https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md
reducing the drag animation with CSS div[data-rbd-draggable-context-id] {transition: 0.001s !important;}
inserting a duplicate Draggable in onDragStart
There is still a flicker on dragging, and a flicker on dropping.
Is there anything else I can do to prevent react-beautiful-dnd from animating the removal of the draggable at drag start, and also at drag end?
Related
I'd like to achieve the same opening/closing animations as macOS' notifications center, basically having it slide from a side.
Is it possible to do this using electron?
I think it is possible. Electron has everything you need for it:
A Frameless Window is probably the way to go for this.
win.setPosition(x, y[, animate]), win.setSize(width, height[, animate]), win.hide() and win.show() is all you need to animate the window
screen and Display will help you put the window in the correct position
Initial state:
Place window at the side of the screen
Set to smallest possible width
Hidden
Opening:
Show window
Increase width and change position towards center of the screen until the window reaches the desired size
Closing:
Decrease width and change position towards side of the screen
Hide window when side is reached
The content of the window is then just CSS and JS magic, to make it look good.
Check out css animations here
You can position elements off screen with css and animate them in with css
No javascript required.
Iam new to css and html5.
I`m using bxslider and would like to have controls (arrow nav) outside the slider div. I made it according to http://bxslider.com/examples/custom-next-prev-selectors but I do not like it.
How to replace "onward" with an arrow image (jpg)?
How can I move my arrow image to the edge of the slider? I don't want it in the center but aside the slider.
http://www.pulik.edl.pl/WWWMG/foto.html
Why you don't use the controls of the own bxslider and change its css?
Then with left/right you can work around to make the controls to be on the edge of the slider.
Else, if you really want to use the custom controls, make a container around the controls and the slider. Then you can easily do the trick, if the container was made properly.
To move the direction controls outside of the content, you'll need to override the bxslider css in your own css file:
.bx-prev {
margin-left: -70px;
}
.bx-next {
margin-right: -70px;
}
This might cause a further issue where the controls are outside ALL of your content and not even visible. In that case you should wrap the whole slider control inside another div that has left and right padding.
So as far as I'm concerned, overflow:hidden does hide the scrollbar, but makes it impossible to scroll (at least scrolling doesn't work in Firefox).
I have a scroller-slider on my homepage - it scrolls automaticaly to lower full-screen elements one by one and then comes back to the first element and starts over. It looks really nice in my opinion, but the scrollbar is visible - I would like to make it invisible. With overflow: hidden the scrolling mechanism doesn't work.
Any idea how to do it?
You can hide scrollbar with CSS - wrap your scrollable container into another one with overflow:hidden and less height/width (depending on scroll you want to hide - vertical or horizontal one). This way helps if you have static container/content sizes. If container can be resized or size depends on content - you will have to use JS solution to calculate container size.
I am building an interactive visualization app that is pretty much all client-side Javascript, see here:
http://korhal.andrewmao.net:9294/#/classify/APH10154043
Try the following controls:
mousewheel: zoom
drag empty area: pan
drag bottom area or handles: pan/zoom
click once, then click again: draw a box
drag on box: move box
drag edges of box: resize
The underlying mechanism is a SVG overlying a canvas. The canvas has z-index 0 and the SVG z-index 1 - feel free to inspect the DOM. Everything works pretty much fine on Chrome/Firefox.
The problem is, in IE9, the canvas seems to receive click events over the SVG, even with a lower z-index. You can tell because the mousewheel/click/drag actions don't work in the main chart area, yet they work in the edge areas because the SVG is slightly larger than the canvas and it picks up the events there. For example, try mousewheeling in the axis areas or the bottom.
After playing with it some more, I think I saw the pathology. I made a version of the page where I allowed boxes to be drawn outside the canvas (graph) area but still inside the SVG. Then I could do the following (in IE):
Draw a box in the axis area (outside of canvas)
Drag it into the main area (over the canvas)
Hold mouse over the box and use mousewheel - now the zoom events are picked up by the SVG. Mousewheeling where there was no box caused the events to go to the canvas (disappear.)
So it seems what is happening is that the SVG is only picking up mouse events when there is an explicit SVG object under the mouse, otherwise it gets passed through to the canvas, and only in Internet Explorer.
One obvious way to solve this problem is to make a transparent rect over the entire SVG region, but that seems stupid. Also, maybe I'm doing something wrong that is patched up when using Chrome but broken in IE. Does anyone have any suggestions?
Note: One (deleted) answer suggested wrapping the entire SVG region in a <g> element and applying pointer-events: all to it. However, that didn't work. I don't even think that is necessary, as pointer events are being detected fine in the entire SVG region except where there is a canvas.
If you want to prevent clicks on transparent regions in the SVG from going through to the underlying Canvas, then I would use a (slightly modified) "stupid" solution: put a transparent rect underneath the SVG contents. Something like:
<svg>
<rect width="100%" height="100%" pointer-events="all" fill="none"/>
<!-- … everything else … -->
</svg>
With fill=none and pointer-events=all, the rect won't be visible, but it will still receive mouse events and prevent those from going through to the underlying Canvas. So, if you put a click listener on the SVG, the SVG would still receive the clicks rather than the Canvas. (You can apply this technique to a G element as well, though you'll probably want to position the rect explicitly rather than using 100% width and height.)
I've been trying to animate a uiwebview by making its frame shorter height using the UIView animateWithDuration:animations: method. I successfully shorten the uiwebview by making the frame property equal to a shorter height however when i scroll to the bottom of the uiwebview I find a grey box.
After I animate the uiwebview to be shorter height I animate the uiwebview to be longer height (back to normal height it was originally), and the grey box disappears (and it's animated, too).
I'm wondering if anyone has any idea how I can get rid of the grey box at the bottom of the uiwebview when i animate it to be shorter (via the frame property).
I've tried reloading the webview (via the reload method).
I've tried setNeedsDisplay.
I've tried setting the contentMode to redraw.
Scale Pages to Fit is off (I'd rather that it be off because otherwise my content shrinks too much).