html button not working in mobile device - javascript

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

Related

Get element from pop up

I'm trying to make an application to change SSID and password more easily using webview with react native. But when i get to apply the changes one popup shows up . I don't know how to get the id from popup's button. I'am using getelementbyid for other elements.
Edit: i found this post in stack where he changes the script inside a button. But i don't know how to do this when the script is inside a tag :((((
Button:
<button id="btnApplySubmit" name="btnApplySubmit" type="button" class="ApplyButtoncss buttonwidth_100px" onclick="ApplySubmit();">
<script>
document.write(cfg_wlancfgother_language['amp_wlancfg_apply']);
</script>Apply
</button>

Javascript - sendkeys to proper dynamically created div

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();
});
});

Editable Div - Highlights Specific Letter On Click

Everytime I click a div or I focus on a contenteditable div it highlights the text I've clicked. This is not the case for other sites I have tried so I know it's not my mouse, I have a fair amount of jquery and css so I don't think it's useful to post all the code. Could people provide suggestions/speculation to why it's doing this and how it could be fixed because at the moment I have no idea.. I have no specific code to highlight any text so I'm very confused.
Relevant Code:
//This is loaded on body load
$("body").click(function(el) {
if($("#menu").is(":visible")){
//The click handler function puts new textboxes in if clicked correctly.
clickHandler($(event.target));
}
<div class="container image">
<img src="https://placeimg.com/240/180/any" />
</div>
You can try
window.getSelection().removeAllRanges();
document.getSelection().removeAllRanges();
To make sure all your text is not selected.
Please take a look at these two entries:
How can I deselect text using Javascript or jQuery?
Select/Unselect Text on click Using jQuery
So I think this is actually a bug in chrome. After leaving it a few hours and then refreshing the page, it randomly started working with normal functionality. Thank you to everyone who attempted to help - guergana presents a possible solution if you have stumbled across this page looking for answers.

Button element not displaying text value

Steps to reproduce:
Open Visual Studio 2012 Express for Windows 8 (Metro App Development)
Left pane; select JavaScript as the language. Right pane; select Blank template
Click OK
Insert: <button name="printbutton" value="Print" /> into default.html
Debug (F5)
The problem:
When I start a brand new HTML5 + JavaScript Windows Store application, and add just 1 element, without making any further changes to the solution, the text value of the button element (value="Print"), does not appear.
Why is this, and have I done something wrong? See below for a screenshot:
I have tried setting the Button element's text color to White (since the background is Dark), by adding style="color:white" to the Button element, but this did not have any effect at all.
Try this
<button name="printbutton" value="Print" style="color:white;">Print</button>

Disable div click events

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

Categories

Resources