Please bear my ignorance.
I have a page with one button on it:
How to detect if the user clicks (on a computer) or touches (smarthone, tablet) this button?
I read the answers of this quite similar question but the solutions involves using advanced and comlicated libraries. I am just a beginner: d you know how to do this in simle JavaScrit or jQuery ?
Determine and bind click or "touch" event
Thank you all.
you could try to use a variable for this if you would like, maybe try
<script>
var buttonTouched = 0;
function anyFunc01() {
buttonTouched = 1;
}
function anyFunc02() {
if(buttonTouched == 1) {
console.log("button01 has been clicked at some point");
}
}
</script>
<button onclick="anyFunc01()">button01</button>
<button onclick="anyFunc02()">button02</button>
JAVASCRIPT
With your button use
<button onclick="myFunction()">Click me</button>
Then write your myFunction() in <script> in javascript. like this
<script>
function myFunction()
{
alert('Button clicked');
}
<script>
Read more here
http://www.w3schools.com/jsref/event_onclick.asp
JQUERY
Inlcude the jquery.js in your file then give button an ID then use a script.
Button:
<button id="submitbutton">Submit</button>
Jquery
$( "#submitbutton" ).click(function() {
alert( "Submit button clicked!." );
});
TOUCH OR CLICK JQUERY
But from what I know, the problem you can face here is the touch. Here is a code that could make for touch or click
$( document ).ready(function() {
$('#submitbutton').on('click touchstart', function() {
alert( "Submit button clicked!." );
});
});
Jsfiddle
https://jsfiddle.net/0xdLjvtu/
use jQuery!
var deviceEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(deviceEvent ,function(){alert('click true!');});
Related
I'm using a plug-in (PopUp Maker) to create a pop-up landing page. Inside it I have a button (made by me) that should close this pop-up.
I have no clue how to do it. I tried adding some javascript but is not working, and the thing is that I don't know if it's my code that isn't correct, Wordpress not reading my javascript file, or the plug in preventing me from doing it.
Any suggestions?
Here's the code I tried:
$(document).ready(function() {
$('.close-button').on('click', function(){
$(this).parent().fadeOut('slow', function(){
});
});
});
Here is a Native Javascript Solution to Close or open a Div by onclick.
function myFunction(){
if (document.getElementById('idofpopupdiv').style.display == "none") {
document.getElementById('idofpopupdiv').style.display = 'block';
document.getElementById('idofpopupdiv').style.visibility = 'visible';
} else {
document.getElementById('idofpopupdiv').style.display = 'none';
document.getElementById('idofpopupdiv').style.visibility = 'none';}}
and your button should have an onclick event to call the function.
<button onclick="myFunction();">Button Name</button>
Hope this helps.
Just replace #idofpopupdiv with the id of your popup div or a classname
$(function() {
$('.close-button').click(function() {
$('#idofpopupdiv').fadeOut('slow', function () {
});
});
});
Hi this is an odd question and i will try to ask it correctly. I have a function using javascript called load canvas.
function loadCanvas(canvas) {
relevant code here...
}
I also have a normal button called btn.
<button class="btn" type="button">Play!</button>
I am wondering can i disable the function until the play button is selected? The function is for a game using javascript. So on load there isnt anything there until i press play then it appears!
any ideas/help please?
$(document).ready(function(){
var loadCanvas= function (canvas) {
relevant code here...
}
$("#test").on('click',loadCanvas()); // using jquery
document.getElementById("test").addEventListener("click",loadCanvas()); // using javascript
<button class="btn" id="test" type="button">Play!</button>
})
If you are having issue because other method is triggering the function you can add a flag with a boolean and turn it on when you click..
Something like that:
The button don't change at all
<button class="btn" type="button">Play!</button>
The js code with this change:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
And in the on click function add this before call the function:
buttonClicked = true;
At the end your js should look like this:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
$(".btn").click(function(){
buttonClicked = true;
var canvas = ...;
loadCanvas(canvas );
});
EDIT
If you have more buttons with the class .btn you should use an id and change the selector of the .click() with the selector of the id instead of the class selector
As you mentioned in the comments <script type="text/javascript"> loadCanvas("game"); </script> You are calling the function as soon as the page loads. So you will have to change it to:
<button class="btn play-button" type="button">Play!</button>
<script type="text/javascript">
$('.play-button').click(function(e){
loadCanvas("game");}
);
</script>
If you are not using jquery you will have to handle the click event by javascript.
You got to do following:
function loadCanvas(game) {
alert('loading canvas');
}
<button class="btn" type="button" onclick="loadCanvas('game')">Play!</button>
I've been asked for a simple solution to add to links on a blog that would pop-up a warning before going to that link. Only if you agree do you go on to that link. The first solution works fine (and I got it here):
<script type="text/javascript">
function confirm_alert(node) {
return confirm("some message here");
}
</script>
Click Me
However, now I've been asked to have a checkbox in the pop-up that says something like "I understand" and then a button to continue. If it isn't checked or if they click outside the box (or the X close button if there is one), then it just goes back to the page they were on. If it IS checked and they click continue it goes to the URL on the link (as above).
Along with this, I need to set a browser cookie ONLY if the dialog is checked and continue hit. I've set cookie's in browser with JS before, but not attached to to an event like this, so I'm not sure how to do that either.
I've done many searches here and on the net in general and can't seem to find any examples that do this. I have found that there's no way to do this with a standard confirm dialog and would need to use jQuery and that's fine, but I still can't find an example.
Any help is much appreciated.
I haven't tested this code (I just free typed it here).
In the HTML:
<div id="agreeModal">
<input id="agree" type="checkbox" />
<button id="btnCancel">Cancel</button>
<button id="btnContinue">Continue</button>
</div>
JavaScript (in another file or in a <script> tag) :
document.addEventListener('DOMContentLoaded', function() {
var agreeUrl = '';
// Get the links on the page
var links = document.querySelectorAll('a');
links.addEventListener('click', function( event ){
event.preventDefault(); //stop it from following link
agreeUrl = this.getAttribute('href'); // get the url
document.getElementById('agreeModal').style.display='block'; //show Modal
});
var btnContinue = document.getElementById('btnContinue');
btnContinue.addEventListener('click', function( event ) {
event.preventDefault();
var cb = document.getElementById('agree');
if (cb.checked) { //if checkbox is checked goto url
location.href= agreeUrl;
}
});
var btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function( event ) {
event.preventDefault();
//hide Modal
document.getElementById('agreeModal').style.display='';
});
});
Same code in jQuery:
(function( $ ){
$(function(){
var agreeUrl='';
$('a').on('click', function( event ){
event.preventDefault(); //stop it from following link
agreeUrl = $(this).attr('href'); // get the url
$('#agreeModal').show(); //show Modal
});
$('#btnContinue').on('click', function( event ) {
event.preventDefault();
if ($('#agree').prop('checked')) { //if checkbox is checked goto url
location.href= agreeUrl;
}
});
$('#btnCancel').on('click', function( event ) {
event.preventDefault();
//hide Modal
$('#agreeModal').hide();
});
});
})( jQuery);
Hope that helps!
I'm using jQuery 1.9.1 in my project.
I've following HTML :
<button type="button" id="btn_add" class="btn btn-primary">Add</button>
<a class="btn_delete" href="#"><i class="icon-trash"></i></a>
I want to display the same alert message if user clicks on a icon enclosed in anchor tag with class "btn_delete" or click on a button having id "btn_add".
For this I tried following code but it didn't work out for me.
$(document).ready(function() {
$("button#btn_add.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Can someone please help me in this regard please?
If you want any more information regarding the issue I'm facing please let me know.
Thanks in advance.
**Approach #1**
function doSomething(){
//your code
}
$('#btn_add').click(doSomething);
$('.btn_delete').click(doSomething);
**Approach #2**
$("#btn_add,a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button#btn_add, a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
</script>
Your code is quite close to what it should be. Change:
$("button#btn_add.btn_delete")
To:
$("#btn_add,a.btn_delete")
You can use , to have multiple selectors.
$(".btn_delete i,#btn_add").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
You can have both the HTML Tag in the jQuery selector as below:
$(document).ready(function() {
$("button#btn_add, a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Hope this helps!
$(document).ready(function() {
$("#btn_add,.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Additionally to the other answers:
Your current selector will find elements like this:
<button id="btn_add" class="btn_delete">Foo</button>
I'm trying to write a simple javascript function that will clone some html input fields when the user clicks a button, but for some reason the button's click function isn't being called when I click it. Any ideas why?
Here's the javascript:
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(
function(){
$("#default-label").hide();
$("#default-element").hide();
var counter = parseInt($("#counter").val());
$("#addProduct").click(
function(){
var product = $('#fieldset-default');
var newProduct = product.clone(true);
newProduct.insertAfter(product);
document.getElementById("addProduct").innerHTML = 'Add More';
$("#counter").val(++counter);
}
);
}
);
</script>
My HTML for the button:
<button id="addProduct" type="button" name="add">Add Product</button>
i think you missed jquery plugin,included latest version of jquery library, if not there.