This question already has answers here:
How to create a dialog with “Ok” and “Cancel” options
(17 answers)
Closed 7 years ago.
I have tried these code for displaying yes or no command as pop-up icon.But it is displaying ok and cancel button.If anybody can suggest me an idea would be helpful for my project.I have added my code below
<script type = "text/javascript">
function Confirm() {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm("Do you want to block hour?")) {
confirm_value.value = "Yes";
} else {
confirm_value.value = "NO";
}
document.forms[0].appendChild(confirm_value);
}
You have to create your own confirmBox,it is not possible to change the buttons in the dialog displayed by the confirm function.
see this example: http://jsfiddle.net/kevalbhatt18/tr6k43ca/
<div id="confirmBox">
<div class="message"></div>
<span class="yes">Yes</span>
<span class="no">No</span>
</div>
function doConfirm(msg, yesFn, noFn)
{
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no").unbind().click(function()
{
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.show();
}
Call it by your code:
doConfirm("Are you sure?", function yes()
{
form.submit();
}, function no()
{
// do nothing
});
EDIT
I created JavaScript confirmBox
Example: http://jsfiddle.net/kevalbhatt18/qwkzw3rg/1/
<div id="id_confrmdiv">confirmation
<button id="id_truebtn">Yes</button>
<button id="id_falsebtn">No</button>
</div>
<button onclick="doSomething()">submit</button>
Script:
<script>
function doSomething(){
document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line
document.getElementById('id_truebtn').onclick = function(){
//do your delete operation
alert('true');
};
document.getElementById('id_falsebtn').onclick = function(){
alert('false');
return false;
};
}
</script>
CSS:
body { font-family: sans-serif; }
#id_confrmdiv
{
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: fixed;
width: 300px;
left: 50%;
margin-left: -150px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#id_confrmdiv .button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#id_confrmdiv .button:hover
{
background-color: #ddd;
}
#confirmBox .message
{
text-align: left;
margin-bottom: 8px;
}
The browsers' API doesn't support custom buttons. OK and Cancel are the only buttons you can get.
If you want custom popup buttons you can use a library to make the popup like alertify.
according to me you cannot change the standard javascript pop-up button labels. In case you want to do so, you can use the jquery-ui or you can create your own custom pop-up and check for the button clicks. This is a better way rather than using the default pop-up as the UI varies from browser to browser.
Related
This question already has answers here:
Get ID of element clicked
(2 answers)
Closed 1 year ago.
wish all of you are fine , in my code below :
the user every time he clicked on element --> #crBtn, a new button should be create with different id (but all have the same className), for example if the user clicked on #crBtn three times that means 3 buttons will appear , now if I clicked on any of these button i want it to change its background-color and at the same time I need its id , how can i do that in js?
var idNum = 0;
function crBtn()
{
idNum++;
var button = document.createElement("button");
button.innerHTML="HERE";
button.setAttribute("class","name");
button.setAttribute("id","na"+idNum);
document.body.appendChild(button);
}
.name
{
background-color: aquamarine;
border: none;
width:300px;
height: 50px;
cursor: pointer;
margin-right: 10px;
margin-bottom:10px;
}
#crBtn
{
width:500px ;
height:60px;
background-color: blue;
border: none;
margin:30px;
color:white;
font-size: 30px;
}
.name:hover
{
background-color: skyblue;
color:aliceblue;
}
<body>
<button id = "crBtn" onclick="crBtn()">CLICK TO CREATE BUTTONS</button><br>
</body>
Pass event to the function. target property of the event object is your clicked element.
<button id = "crBtn" onclick="crBtn(event)">CLICK TO CREATE BUTTONS</button><br>
function crBtn(e){
console.log(e.target); //e.target is the button element
}
The following script defines a delegated click handler, bound to the body element of the document. Different actions are taken depending on which button was clicked.
var idNum = 0;
document.body.onclick=ev=>{
if (ev.target.id==="crBtn") crBtn()
else if (ev.target.className==="name") {
console.log("click on button with ID "+ev.target.id)
ev.target.style.backgroundColor="red";
}
}
function crBtn(){
idNum++;
var button = document.createElement("button");
button.innerHTML="HERE";
button.setAttribute("class","name");
button.setAttribute("id","na"+idNum);
document.body.appendChild(button);
}
.name
{
background-color: aquamarine;
border: none;
width:300px;
height: 50px;
cursor: pointer;
margin-right: 10px;
margin-bottom:10px;
}
#crBtn
{
width:500px ;
height:60px;
background-color: blue;
border: none;
margin:30px;
color:white;
font-size: 30px;
}
.name:hover
{
background-color: skyblue;
color:aliceblue;
}
<body>
<button id="crBtn">CLICK TO CREATE BUTTONS</button><br>
</body>
I know it's probably simple to handle, but seems that not for silly boy like me.
Here is the deal:
I am trying to load 3 different html pages, depending on 3 different buttons for a user to select.
It only displays button selected but when I try to click book button I see error 405.
Thanks in advance to everyone guiding me through what am I doing wrong =)
let bookBtns = document.getElementsByClassName("btn");
let bookNow = document.getElementById("book-btn-widget");
let bicycleBtn = document.getElementById("bicycle");
let carBtn = document.getElementById("car");
let vanBtn = document.getElementById("van");
// Transport selection buttons trakcer
for (var i = 0; i < bookBtns.length; i++) {
bookBtns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("icon-active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" icon-active", "");
}
this.className += " icon-active";
});
}
bookNow.click = function() {
if (carBtn.classList.contains("icon-active")) {
location.href = "file:///Users/apple/Desktop/AnyRuns%20Project/car-quote.html";
} else if (vanBtn.classList.contains("icon-active")) {
location.href = "./van-quote.html";
} else {
location.href = "./bicycle-quote.html";
}
};
.transport-buttons {
display: flex;
flex-direction: row;
}
.bicycle-icon,
.car-icon,
.van-icon {
border-radius: 25px;
cursor: pointer;
padding: 8px;
width: 110px;
border: 2px solid #13985C;
transition-duration: 1s;
margin-left: 10px;
}
.icon-active {
border-radius: 25px;
padding: 8px;
background-color: #13985C;
color: #fff;
border: 2px solid #13985C;
}
.fa-biking,
.fa-car,
.fa-truck {
font-size: 15px;
}
.book-button {
background-color: #13985C;
border: none;
outline: none;
padding: 9px 23px;
border-radius: 12px;
color: #fff;
cursor: pointer;
outline: none;
}
<div class="transport-required-section">
<h4 class="delivery-headings">Transport required</h4>
<div class="transport-buttons">
<div class="bicycle-icon btn icon-active"><i class="fas fa-biking" id="bicycle"></i> Bicycle</div>
<div class="car-icon btn" id="car"><i class="fas fa-car"></i> Car</div>
<div class="van-icon btn" id="van"><i class="fas fa-truck"></i> Van</div>
</div>
</div>
<div class="vl"></div>
<div class="booking-section">
<button id="book-btn-widget" class="book-button" onclick="location.href = 'bicycle-quote.html';">Book Now</button>
</div>
I've used this code to go to a page within 3 seconds. Maybe you could alter it with the onclick function so that when you press on the button, you'll immediately go to the page you want to go to. (Setting the setTimeout at 1 ms (E.G.) or completely removing it.
<script>
setTimeout(function(){
window.location.href = 'https://kapsalonyazanonline.nl/';
}, 3000);
</script>
I have a button enclosing an icon. I believe the icon is interfering with my click event. I am only able to click on the icon margins to activate the onclick event, but nothing happens when I click on the icon. I replaced the icon with some text and the button onclick works perfectly fine. I have tried z-index to put the icon behind the button, but to no avail. Can someone explain why the icon blocks the click from occurring and how I can fix it?
html:
<div class="navMenu">
<button onclick="navClick()" class="navMenu-button"><i class="fas fa-bars"></i></button>
<div id="navList" class="navMenu-content">
Home
About
Resume
</div>
sass:
.navMenu{
position: relative;
display: inline-block;
margin-top:5px;
margin-left:5px;
&-button {
background-color: #615b5b;
border-radius:50%;
color: white;
padding: 7px;
opacity:0.7;
border:none;
font-size: 14px;
cursor: pointer;
}
&-button:hover, &-button:focus {
background-color: #615b5b;
}
&-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
&-content .navMenu-link{
color: $body-text-color;
padding: 12px 16px;
text-decoration: none;
display: block;
}
&-content .navMenu-link:hover {
background-color: #ddd;
}
&-show {
display:block;
}
}
js:
function navClick() {
document.getElementById("navList").classList.toggle("navMenu-show");
}
window.onclick = function(event) {
if (!event.target.matches('.navMenu-button')) {
var dropdowns = document.getElementsByClassName("navMenu-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var show = dropdowns[i];
if (show.classList.contains('navMenu-show')) {
show.classList.remove('navMenu-show');
}
}
}
}
This is happening becuase your are setting an event that verifies if the element clicked contains an especific class, and indeed when it clicks the icon, it won't match because the icon does not contains the class you can solve it asking if also the parent contains the class....
window.onclick = function(event) {
if (event.target.matches('.navMenu-button') ||
event.target.parentNode.matches('.navMenu-button')
) {
console.log("it matches...");
}
}
.icon {
background:red;
}
<button class="navMenu-button">this is the button
<div class="icon">this is the icon</div>
</button>
On the other hand you could reference the click event using the "onclick" method in this case it will solve it automatically..
var button = document.querySelectorAll('.navMenu-button')[0];
button.onclick = function() {
console.log("button clicked");
}
This is the html code...
<div id="video-embeds">
<div id="Div1">
<input id="Button1" type="button" value="►" onclick="switchVisible();" style="font-size: 40px; font-weight: bold; line-height: 2; background-color: #000; text-align: center; color: #fff; margin-bottom: 0px; z-index: 102; background: url('.get_post_meta(get_the_ID(), 'fifu_image_url', TRUE).') no-repeat; background-size: cover; position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; margin-bottom: 0px; width: 100%; font-size: 120px; line-height: 5;"/>
</div>
<div id="Div2" class="video-embed" style="font-size: 40px; font-weight: bold; line-height: 2; background-color: #000; text-align: center; color: #fff; margin-bottom: 0px; z-index: 102;display:none;">'.
do_shortcode('[video_display]').'
</div>
</div>
This is the script...
<script type="text/javascript">
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
</script>
I want to add url openning in new pop up window or new window also onclick input as
Something like...
https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode( get_permalink( get_the_ID() ) ); ?>
Is it possible?
The best way is to use addEventListener, and just forget about the onclick attribute altogether. Remove the onclick in your <button> code and add this to the script:
document.getElementById("Button1").addEventListener("click", (e) => {
/* write code for stuff button is supposed to do when clicked */
});
This way, you are separating your JavaScript from your HTML, resulting in nicer code. Instead of calling an anonymous function (e) => { ... } or function() { ... }, you can call functions by name, and you can do this repeatedly, if you want multiple functions to run when the button is clicked:
document.getElementById("Button1").addEventListener("click", functionName1);
document.getElementById("Button1").addEventListener("click", functionName2);
/* etc... */
With that code, both functionName1() and functionName2() will run when the button is clicked.
More info: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
And make sure the <script> tag is the last element inside the <body> tag, so that the script does not interrupt the loading of the page.
You can try bootstrap modal
example
OR
window.open('http://google.com');
I'm trying to remove class 'active' when you click on the checkbox the 2nd time, the same way Pinterest does it for Twitter/Facebook checkboxes when a user adds a pin:
Adding 'active' class on click is easy. However, I couldn't figure how to remove it once it was added. I tried this, but it didn't work:
$(".add_link_twitter.active").click(function(e) {
$(this).removeClass(activePostTwitter);
});
I have two questions:
How to remove the 'active' css class on the 2nd click on the
checkbox?
How to disable '.add_link_twitter:hover' when the Twitter
checkbox is selected?
Thanks in advance!
Here's the jQuery:
var postTwitter = ".add_link_twitter";
var activePostTwitter = "active";
$(postTwitter).click(function(e) {
$(this).addClass(activePostTwitter);
});
Here's the html:
<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>
Here's the css:
.add_link_twitter{
position:absolute;
left:15px;
bottom:16px;
color: #a19486;
border: 2px solid transparent;
border-color: #F0EDE8;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
.active {
border-color: #468BD0;
color: #468BD0;
background-color: whiteSmoke;
}
.add_link_twitter:hover
{
color: #A19486;
border: 2px solid transparent;
border-color: #C2B1A2;
border-radius: 4px;
background-color: white;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
Instead of
$(postTwitter).click(function(e) {
$(this).addClass(activePostTwitter);
});
use
$(postTwitter).click(function(e) {
$(this).toggleClass(activePostTwitter);
});
EDIT:
The event triggers twice per click, probably because of event propagation. To work around this, assign the handler to the input and have it change the class of its parent:
$(postTwitter + " input").click(function(e) {
$(this).parent().toggleClass(activePostTwitter);
});
Confirm jsfiddle: http://jsfiddle.net/bpfqB/
This should work for both your questions:
$(function() {
"use strict";
var $postTwitter = $("label.add_link_twitter");
$postTwitter.find("input:checkbox").click(function() {
$(this).parent().toggleClass("active");
if($("input.publish_to_twitter").is(":checked")) {
$(this).parent().removeClass("hover");
}
});
$postTwitter.hover(
function() {
if($("input.publish_to_twitter").is(":checked")) {
return;
}
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
});
});
You need to make some changes to your CSS though, you have to do the hovering with jQuery (skip the CSS hover).
DEMO