I've got a following element inside <Link> component:
It needs to be whole clickable and it needs to preserve cmd/ctrl + click functionality (also right mouse button + open in new tab). The problem is that I need to enable clicking also on times icon without transition to a new location. Is it somehow possible?
The problem is that the onClick event on the times icon is triggering the parent onClick which is the Link component which is the default behavior.
To prevent this you should add e.preventDefault() in your function:
onClick={(e) => e.preventDefault()}
Note: It might also be a good idea to use e.stopPropagation(); alongside e.preventDefault();
Related
I also want to when I click on the background and there are other pressable things/buttons on this background, they are not being pressed unless the state is back to when it is un-blurred (basically: only the blurred background can be pressed when the screen is blurred). If you need an example look at twitter mobile: when you click on the post (+) button, it blurs the background but when clicked back it un-blurs it. (Must work for IOS and Android).
I think you need this..
In CSS create 2 classes - First one with the blur and second one without.
In React create 2 functions - 1 onclick for the blur-button and 1 onclick for the close button. These functions should change the class of body.
$('.button').click(function(){
$('body').addClass('blur'); });
Currently I'm trying to overlay a button on another button in Material UI:
https://codesandbox.io/s/responsivedrawer-demo-material-ui-forked-inc7xz?file=/demo.js
I'd like if pressing the X would only print B, rather than printing A and B. I know nesting buttons is not the correct way to do it, but I'd like to overlay the button with the exact look and ripple behavior I'm currently seeing with the nesting. I like how it looks so well aligned on the right, clicking the X doesn't ripple the effect to the entire ListButton the ListButtons takes up the entire drawer width without any extra work, and clicking the ListButton ripples under the X.
I'd really appreciate it if someone has the time to help. Thanks so much!
The solution would be to stopPropagation inside the onClick function since this is where the click event happens.
onClick={(e) => {
e.stopPropagation();
console.log("B");
}}
I created a simple app to work through an issue I'm having toggling a sidebar. I'm trying to use onClicks so that I can open and close a sidebar, and yet can't get it to work. I'm using styled-components, and for whatever reason I can't get the sidebar to toggle. I have a simple piece of state, isOpen, which is initialized to false, and when i click on a button in the 'navbar', i'd like it to toggle state to true via an onClick, and the sidebar should appear, and yet, it isn't working.
Here is the codesandbox link
I tried re-writing the app from scratch, using destructuring vs not using destructuring, and looked for any bugs in the code but couldn't. Any ideas for what I can try next? Also I made sure to use arrow functions for my onClicks.
The first issue I see is that the SidebarContainer is creating an overlay that prevents clicking on the button to open it. You'll need to change the visibility property on the SidebarContainer that's exported from SidebarElements:
visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
I prefer using the visibility property over setting display to block or none because if you want to you can animate or transition properties like opacity or transform. When toggling the display property your sidebar will just appear and disappear instantly.
Something else, you don't need to use an anonymous callback when calling the toggle from inside of Sidebar and Navbar:
<CloseIcon onClick={toggle}>X</CloseIcon>
<OpenIcon onClick={toggle}>open sidebar</OpenIcon>
I've updated the sandbox link you provided.
There are two problems with your code
You are calling the toggle like onClick={() => toggle} when you should be calling it like onClick={toggle} or onClick={() => toggle()}
Your "sidebar" is a overlapping your navbar (it is position:fixed with opacity:0 and covers the whole screen)
So fix 1 and then either move the sidebar elsewhere (as to not overlap) or change its display from none to block instead of the opacity.
My code is here.
The p-in-p button of the MediaPlayer triggers the MiniPlayer component.
And the react-draggable package is used in MiniPlayer component.
The top-left button works on the computer; however, it does not work in the mobile device.
When I remove the <Draggable> tag from the MiniPlayer.js, the top-left button works on mobile again.
How can I fix the problem?
react-draggable works on mobiles. It seems onClick or onChange inside <Draggable> are disabled on mobiles (or on touch devices in general).
To make elements inside the drag component clickable, set as cancel the selector of those elements.
<Draggable cancel=".btn">
<div>
...
<button className="btn">click</button>
</div>
</Draggable>```
Is there a way to get lightbox to automatically move on to the next image without the need for pressing the arrow buttons to move on?
The view I'm asking about is when one has already clicked on the already moving carousel to get the lightbox(Image attached below).
View of lightbox I want to automatically move to the next image.
Thanks
The Lightbox API doesn't expose this feature but you can programmatically click on the 'next' navigation button with Javascript. This could be done on a timer with setInterval.
// Simplified code
setInterval(() => {
$('.lb-next').trigger('click');
}, 2000)