I need to know how can I disable a button when I hover over it, and then enable it when I'm not.
I've tried javascript, to disable it when the mouse coordinates were just so, but it didn't work.
Here's my code so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button type="button">Press Me</button>
<script src="script.js"></script>
</body>
</html>
This is for a joke, but I want it done quickly.
Thanks,
Enlighten Me
PS: I'm new to StackOverflow, so please give any pointers to posts and such.
use this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button type="button" id="hbtn">Press Me</button>
</body>
<script>
document.getElementById('hbtn').addEventListener('mouseenter',(event)=>{
event.target.disabled=true;
});
</script>
</html>
Hope this helps
#joke-btn:hover{
display:none
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button id="joke-btn"type="button">Press Me</button>
<script src="script.js"></script>
</body>
</html>
With JavaScript, you could add event listeners for the onmouseenter and onmouseleave DOM events and change the disabled property value of the button HTML element.
For example, in your case, a simple code solution (not the only possible one), would be something like:
const button = document.querySelector("button");
button.addEventListener("mouseenter", () => {
button.disabled = true;
});
button.addEventListener("mouseleave", () => {
button.disabled = false;
});
Setup enter/leave event listeners on your button...
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
I think the simplest option here is to just do it with css. However this doesn't actually disable the button, just the mouse click event, so you can still click the button when it is selected by using the return key:
Assign a class to your button (you can call it anything you want):
<button class="myButton" type="button">Press Me</button>
And in your CSS file disable mouse clicks:
.myButton:hover {
pointer-events: none;
}
Related
I have been experimenting with this for a couple of hours and I remain confused.
I am attempting to open a JQuery UI dialog (modal) when a link ([a] tag) is clicked, getting the content of the dialog window from the href of the link.
So far I have (gleaned from various places) where testb.html is a simple html fragment:
<div><p>Some text</p><p>more text</p</div>
The idea is that when anchor (link) is click the content of testb.html appears in the dialog.
Why doesn't this work???
David (70-year-old pre-Alzheimers ex-programmer with little HTML experience)s
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href).dialog("open");
});
</script>
</head>
<body>
<div class="container"></div>
<p>Click!</p>
</body>
</html>
you can use this code:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p>Click!</p>
</div>
<div id="dialog" title="Basic dialog"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$('.modal').on('click', function () {
var data = $(this).attr('data-get')
$('#dialog').html(data)
$("#dialog").dialog()
});
</script>
</body>
</html>
You run the assignment before the element exists on the page. Wrap it in a load handler
$(function() { // on page load
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
});
})
You cannot open the container as a dialog the way you try it. You need something like
$(function() { // on page load
$(".container").dialog({
autoOpen: false,
width: 750,
modal: true
});
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href)
$(".container").dialog('open');
});
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#modal" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#modal" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="modal">This my first jQuery UI Dialog!</div>
<p>Click!</p>
</body>
</html>
This opens a jquery dialog modal when the anchor tag is clicked.
Combining bits from the previous answers, I got this, which works!
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<p>Click!</p>
<div id="dialog" title="Basic dialog"></div>
<script>
$('.modal').on('click', function (e) {
e.preventDefault();
$('#dialog').load(this.href)
$("#dialog").dialog()
});
</script>
</body>
</html>
With codeangler's answer, the dialog appeared,but didn't have the content of testb.html, instead had the content of the div.
With mplungjan's answer... Well, I couldn't get it to work.
With Sepehr Pourjozi's answer, the dialog appeared but contained the literal text "testb.html", not the content of testb.html.
Taking hints from all three answers, I got it to work. And now I understand JQuery dialogs a little bit better.
Thanks, all.
David
I have a button that acts as a link. The onclick is the myAlert() function shown below. The function creates a popup asking if you want to continue. It still goes to the next page even if you hit "cancel". What should I do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert()">Sign up</button><button >Log in</button>
<script>
function myAlert(){
if (confirm('Are you sure you want to sign up?')) {
console.log('Thank you.');
} else {
}
}
</script>
</body>
</html>
You placed the button inside the link itself. Therefore after closing the dialog, the browser processes the onclick event of the link which results in browsing to the to the link target.
You can remove the link elements completely and handle everything using the buttons:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert('333.html')">Sign up</button><button onclick="window.location.href='22.html'">Log in</button>
<script>
function myAlert(redirect){
if (confirm('Are you sure you want to sign up?')) {
window.location.href=redirect
console.log('Thank you.');
} else {
}
}
</script>
</body>
</html>
Use the preventDefault() method to cancel the default action that belongs to going to the next page.
function myAlert(e) {
if (confirm('Are you sure you want to sign up?')) {
console.log('Thank you.');
} else {
e.preventDefault();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert(event)">Sign up</button><button >Log in</button>
</body>
</html>
I have this kind of bootstrap popover from W3 schools site and edited code for my situation (see onPopoverHtmlLoad() function):
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
Question is, how can I change HTML data content of popover after I hit
popover button/trigger, please? Is there some function like
onHtmlDomPopoverLoad?
I appreciate solutions in Javascript, but accept JQuery help too. I was looking for similar issues but didn't find anything yet.
You can replace onPopoverHtmlLoad with:
function onPopoverHtmlLoad(){
$("#inpopover_button").text("true")
}
And attach the event handler with:
$('[data-toggle="popover"]').on('shown.bs.popover', onPopoverHtmlLoad)
See the codepen: https://codepen.io/anon/pen/MxXwQe
read about bootstrap popover events here :
https://getbootstrap.com/docs/4.0/components/popovers/#events
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover()
.on('shown.bs.popover', onPopoverHtmlLoad);
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.
I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.
Thanks,Amresh
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
<!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
<!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->
var m = document.createElement('meta');
m.name = 'description';
m.id = 'mymetatag';
m.content = '5;URL=http://google.co.in';
m.HTTP-EQUIV= 'refresh';
document.head.appendChild(m);
}
</script>
This works for me.
The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
}
</script>
</body>
</html>
I looks like you misuse the functionality of metatags, JS doesn't save the state between requests. And, BTW, you can do reload/redirect using the javascript itself.