I'm using React-Beatiful-DnD, as shown in the attached GIF, clicks only work on the center of the elements. I want clicks to also work on the edges of elements...
In this case, what keywords should I search for to solve the problem?
My code is as follows (simplified)
<div {...dragableHandleProps}>
<Button />
</div>
The Button component is from https://blueprintjs.com/docs/#core/components/button
But anyway, the click event is captured by the div tag
Related
I am working on a web application.
In one of HTML page, I have following code snippet:
<div class="div2">
<button id="buttonid" type="button" class="btn-submit pull-right" onclick="alert()">BOOK NOW</button>
<div>
This code is working fine in browsers of PC. But when I try it in browsers in mobile device, a button is not clickable. There are also many buttons in the same page but they are working fine. I tried very hard finding a solution online but none worked.
Few observations :
- Not sure why have u added a div wrapper around the button. Try removing the div wrapper
- Your html mark up needs to be checked, since you are trying to view a html page on a mobile, if the elements are not structured properly, then there are high chances that one of the element be overlapping on the button. Hence the click event is not getting triggered for the button rather then it might be trying to trigger the click event of the overlapping element
The tag defines a clickable button.
Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.
Tip: Always specify the type attribute for a element. Different browsers use different default types for the element.
A clickable button is marked up as follows:
<button type="button">Click Me!</button>
ELSE
<button name="favorite" type="button">
<svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
Add to favorites
</button>
The issue may be that you're using the onClick event which won't register on a mobile device (as you don't click - you tap).
This answer explains how to use the "touchstart" event which will work on a mobile.
https://stackoverflow.com/a/22015946/2619909
See here :)
Button not working on Mobile Devices but works on PC bootstrap
I'm a bit lost as to starting the code for my scenario.
I allow the user to create divs dynamically by clicking on an add new div button and remove div button. Therefore, the user could be focused inside any div on the page and I need to make the keypress event send to the correct div.
I have some buttons to insert Mathml on the left of the screen. I want to be able to click on the button and for the Mathml code to appear in the div the user is currently focused in.
From what I've read, I believe I have to attach an event listener to each div as it is created and remove it when the user removes the div (I maintain an index of the divs).
How do I send the keypress event from the button to the div the user is in without losing focus on the div and making sure the Mathml goes into the correct div?
I know in vb or C# .net it is a 2 second job but javascript seems like a real nightmare for this type of functionality.
Any help/pointers/tips etc.. would be most welcome.
Alright, so I created this fiddle for you the get a look at how a possible solution could look.
https://jsfiddle.net/1u0uw0df/
HTML
<div id="container">
</div>
<button type="button" id="AddBtn">
Add
</button>
<button type="button" id="RemoveBtn">
Remove
</button>
JQuery
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#container').on('click','div',function() {
focusedElement = this;
});
$('#AddBtn').on('click',function() {
$('#container').append('<div>Test'+No+'</div>');
No++
});
$('#RemoveBtn').on('click', function() {
focusedElement.remove();
});
});
I have a svg area in the middle of the screen, where I move some SVG elements around, by using D3 drag behavior. Below the svg, I have some options, in a div like this:
<div id="gui-options">
<div onclick="sortCards()">
<span>Sort cards</span>
</div>
...
</div>
When I have dragged some elements around in the svg, I have to click twice to trigger sortCards(). The first click is not registered. The implementation of sortCards() is not important to this problem.
I have tried to add click handlers after the DOM is ready, but that doesn't make any difference.
I don't have this problem when the drag-functionality is disabled. If I click twice on an option, I only have to click once to toggle the other options. But if I drag some elements two clicks is necessary to "change focus".
Do you have any suggestions where the solution might be hiding?
I have <div> with width and height properties. I want to put <div> over it, so the click events of the first <div> will not be registered anymore.
For example, I have div and when I click on it something is happening, but when I put second <div> over the first, clicking on the first <div> area will now fire that click events anymore.
<div id="firstDiv" style="width:100px; height:100px">bla bla</div>
How to put another <div> over "firstDiv" so I will not be able to change its elements? Is it possible?
just to disable click event to a div don't place extra div over it just use on() and off() from jQuery
Details : ON ,OFF
Still if you want to place a div over another try using css positioning and z-index
A nice way I've seen it done, and done it myself is to use a modal 'mask' overlay.
The grayed out transparent mask that covers the entire page, except for the element you're interacting with, eg. modal popup window.
You could do a mini version of it just within the popup and push the three non active divs behind it with CSS z-index.
One more way is to use the jQuery BlockUI plugin.
I personally like using something like this
pointer-events:none;
Disable's click events
I have a series of input buttons. Let's say two for simplicity. Each button has its own associated content in a separate div. All the content is in invisible divs ( display: none ) to begin.
If you click a button, its associated content is displayed. If you click it again, the content disappears. This is done with toggle(). The problem is that if you click one button and then click the other button, both divs are now visible.
So my main question is the best way to solve this problem. The solution I tried doesn't work, so if you have an entirely new approach, please let me know, or if you can refine my approach to make it work, that'd be great too. Okay, on to how I tried to solve this.
To solve this, I used siblings() to make sure all content divs are invisible before a new content divs appears.
So now, if I click 1 it appears. If I click 2, 1 disappears and 2 appears..... but now, if I click 1 again nothing happens (because it's my second click on number 1, and toggle() keeps track of each button separately)
How can I implement this type of content toggling without running into these issues?
(On the real page there are an unknown number of button / div combos and the user can click on them in any order)
Here's an example of the problem code (click 1, 2, then 1)
Thanks!
Looks like the answer may be something using .trigger('click') and :visible... just having trouble making it work.....
try this: http://jsfiddle.net/TennG/
To achieve your desired results, keep the state separate for each div (by using classes to represent hidden and visible, and don't use the toggle function.
$("input").click(
function(event) {
var theDiv = $("#d" + $(event.target).attr('id'));
var wasHidden = theDiv.hasClass("hiddenDiv");
$(".visibleDiv").removeClass("visibleDiv").addClass("hiddenDiv");
if(wasHidden){
theDiv.removeClass("hiddenDiv").addClass("visibleDiv");
}
}
)
div div.hiddenDiv {
display: none;
}
div div.visibleDiv {
display: inline:
}
<input id="i1" type="button" value="one" />
<input id="i2" type="button" value="two" />
<div>
<div id="di1" class="hiddenDiv ">This is the first one.</div>
<div id="di2" class="hiddenDiv ">And here we have number two.</div>
</div>
The technique can be summed up as follows
Start off with all divs hidden
When a click occurs, look at the relevant div, to see if it was hidden
Remove the visible class from all divs that have it, and replace with the hidden class
If the div was previously hidden, remoe the hidden class and replace with the visible class.