This is the button:
<button id="get-away">LEAVE SITE</button>
The reason why I made it get-away? I added this Jquery and Javascript functionality to it:
function getAway() {
// Get away right now
window.open("http://weather.com", "\_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
}
$(function() {
$("#get-away").on("click", function(e) {
getAway();
});
$("#get-away a").on("click", function(e) {
// allow the link to work
e.stopPropagation();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key
getAway();
}
});
});
Now, how do I add the CSS to this button? This is my css btw:
.get-away {
border: none;
color: red;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.get-away {background-color: red;} /* red*/
if you want to add .get-away class to your #get-away button on click
$("#get-away").on("click", function(e) {
$("#get-away").toggleClass("get-away");
getAway();
});
you are givving an id to button and applying the css with ".get-away" it should be "#get-away" for understanding basic of class and Id check this link classVsId
#get-away {
border: none;
color: #fff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#get-away {
background-color: red;
} /* red*/
<button id="get-away">LEAVE SITE</button>
Related
I have a button styled to move when clicking. If the button is not in position with the mouse cursor when releasing, the click function is not triggered. How can I still make the click function trigger as expected?
Here is a fiddle with the HTML, CSS and JavaScript. Notice if you hold a click and release in a place where the button does not exist under your mouse pointer, it will not trigger the function.
https://jsfiddle.net/du1eL8gc/1/
Just a note: I know that it makes sense this does not trigger because the button is actually moving out of place, I just want to have it work as a user would expect.
HTML:
<div class="buttons-dialog" style="position:absolute; bottom:20px; left:33%">
<a class="button" id="saveButton">Save</a>
</div>
CSS:
#import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');
:root {
--blueColor: #0028aa;
--darkBlueColor: #022693;
--errorColor: rgb(255, 130, 0);
--grayColor: #bcbdaa;
--darkgrayColor: #525252;
--cyanColor: #59ffff;
--yellowColor: #fffa51;
--emeraldColor: #184343;
--lightEmeraldColor: #38a6a6;
--redColor: #9c0b07;
--badTextColor: #fe6666;
--highlightTextColor: #ffffff;
--fontName: 'IBM Plex Mono', monospaced;
font-family: var(--fontName);
font-size: 16px;
}
body {
background: var(--blueColor);
}
.button-panel {
margin-bottom: 1.5em;
}
.button {
background: var(--darkgrayColor);
border: 0;
font-family: var(--fontName);
font-size: 1rem;
color: var(--grayColor);
outline: 0;
padding: 2px;
margin-right: 1em;
box-shadow: 10px 8px 0 black;
text-decoration: none;
}
.buttonNoShadow {
background: var(--darkgrayColor);
border: 0;
font-family: var(--fontName);
font-size: 1rem;
color: var(--grayColor);
outline: 0;
padding: 2px;
margin-right: 1em;
text-decoration: none;
}
.button:active {
color: var(--highlightColor);
position: relative;
left: 10px;
top: 8px;
box-shadow: none;
}
.button::before {
content: "▯ ";
color: var(--highlightColor);
}
.button::after {
content: " ▯";
color: var(--highlightColor);
}
JavaScript:
document.getElementById("saveButton").addEventListener("click", function () {
console.log('clicked')
});
You can use your JavaScript with the "mouseup" event and have it work by wrapping your button content and moving that content instead of your button.
Working example: https://jsfiddle.net/8a5upveg/3/
For instance you can wrap the text in a <span>:
<a class="button" id="saveButton"><span>Save</span></a>
Then change your CSS to target the <span>:
.button {
// Seems necessary to catch top pixel of button click
padding: 1px;
}
.button span {
background: var(--darkgrayColor);
border: 0;
font-family: var(--fontName);
font-size: 1rem;
color: var(--grayColor);
outline: 0;
padding: 2px;
margin-right: 1em;
box-shadow: 10px 8px 0 black;
text-decoration: none;
}
.buttonNoShadow span {
background: var(--darkgrayColor);
border: 0;
font-family: var(--fontName);
font-size: 1rem;
color: var(--grayColor);
outline: 0;
padding: 2px;
margin-right: 1em;
text-decoration: none;
}
.button:active span {
color: var(--highlightColor);
position: relative;
left: 10px;
top: 8px;
box-shadow: none;
}
.button span::before {
content: "▯ ";
color: var(--highlightColor);
}
.button span::after {
content: " ▯";
color: var(--highlightColor);
}
Instead of .addEventListener("click", function() {});, you can use .addEventListener("mousedown", function() {});, which works exactly as you wanted.
Then the function will be called even if the mouse button is released outside of the moving button.
How can I add a button and react to an outside onclick function?
I need it available as well for the generated button and for static buttons that are on the site. At the moment I have the function twice to make it work for both kind of buttons, but that seems kind of redundant.
button.on("click", function() {
banner.addClass("alt")
$("<br><button class='test'>TEST</button><br>").insertAfter(button);
//Here it works for the generated button:
$(".test").on("click", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
})
//Here it only works with the static buttons:
$(".test").on("click", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
https://jsfiddle.net/tdL3s4f8/
Add your click listener to parent container element handle in following ways. I chose document as parent you can have it more specific.
$(document).on('click', '.test', function(){
banner.removeClass("alt")
banner.addClass("alt2")
})
You need to search static ancestors (parent) of the dynamically added element. And bind certain event based on that parent.
var banner = $("#banner-message")
var button = $("button")
button.on("click", function() {
banner.addClass("alt")
$("<br><button class='test'>TEST</button><br>").insertAfter(button);
//This one works:
//$(".test").on("click", function() {
//banner.removeClass("alt")
//banner.addClass("alt2")
//})
})
//This one doesn't work:
$("#banner-message").on("click",".test", function() {
banner.removeClass("alt")
banner.addClass("alt2")
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt2 button {
background: #000;
color: #fff;
}
#banner-message.alt2 {
background: red;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Basically I am having a third party plugin that is adding a button on the click of this button a specific function is done.
Now I am wrapping this button into a div. Now I want that when I click on this wrapper div then it should click the button that is inside it.
// find elements
var banner = $("#banner-message")
var button = $("button")
banner.click(function() {
console.log('Parent is calling child');
button.trigger('click');
// What shall I place here to stop parent calling itself
})
// This is 3rd party service that is handling this.
button.on("click", function() {
console.log('I am called here');
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Demo : https://jsfiddle.net/8a33n7qg/
Problem : On div click => button click is done => button click is again propagated to parent => then again button click and so on.
So I want to stop this after first time, I can't change the third party plugin and I am avoiding global solutions. Is there any easy solution ?
Note : I CAN'T CHANGE THE BUTTON CODE, SINCE IT COMING FROM THIRD PARTY PLUGIN
Thank You for your time
Your need to place a call to stopPropagation() in the event raised from the child button, not the parent div as your comments suggest:
var $banner = $("#banner-message");
var $button = $("button");
$banner.click(function(){
console.log('Parent is calling child');
$button.trigger('click');
})
$button.on("click", function(e) {
e.stopPropagation();
console.log('I am called here');
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
I can't change the third party plugin, I have tried to show a demo with small code, the button click is handled in third part plugin.
In this case you can use the target property of the click event on the div to check if the button was the triggering element, and do nothing if so:
var $banner = $("#banner-message");
var $button = $("button");
$banner.click(function(e) {
if ($(e.target).is('button'))
return false;
console.log('Parent is calling child');
$button.trigger('click');
})
$button.on("click", function() {
console.log('I am called here');
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Just use event.stopPropagation() in button on handler to stop propagating the event.
I wanna set my css button to unclickable/disable. I've a form, when i click on the "send" button after then i wanna set this button to disable/unclickable.Anybody could help me?
Here is my button:
.good-form > .actions a,
.theButton {
display: inline-block;
width: 540px;
margin: 20px 0 10px;
padding: 12px;
background-color: #b6adb4;
border-radius: 2px;
border: 0px;
text-align: center;
color: #fff !important;
text-decoration: none !important;
font-size: 16px;
font-family: 'Rubik', sans-serif;
}
And here is my jquery:
First i tried this: NOT WORKING!
$(".good-form > .actions a, .theButton").attr('disabled','disabled');
Secondy i tried this: NOT WORKING
$(".good-form > .actions a, .theButton").addClass('disabled');
or
$(".good-form > .actions a, .theButton").addClass("disabled");
Gratefully thanks!
I hope this is working (disabled class added successfully):-
$(".good-form > .actions a, .theButton").addClass('disabled');
// IF NOT THEN USE $(".theButton").addClass('disabled');
Now add CSS like below:-
.disabled{
pointer-events: none;
}
This will also work (without additional CSS) :-
$(".good-form > .actions a, .theButton").prop('disabled',true);
// or $(".theButton").prop('disabled',true);
Try adding a class in your element and provide below css to it :-
HTML
<input type="button" value="Save" class="Disabled"/>
CS
.Disabled{
pointer-events: none;
cursor: not-allowed;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
Hope this helps :-)
The code you are looking for is (assuming the button has an ID).
document.getElementById("theButton").disabled = true;
And you can style it in css like so:
#theButton:disabled{
background: white;
/*or whatever*/
}
this is pure JS, HTML and CSS (i hope i helped)
/* ignore top lines */
document.getElementById("theButton").addEventListener("click", myFunction);
/* ignore top lines */
function myFunction() {
document.getElementById("theButton").disabled = true;
}
.theButton {
display: inline-block;
width: 540px;
margin: 20px 0 10px;
padding: 12px;
background-color: #b6adb4;
border-radius: 2px;
border: 0px;
text-align: center;
color: #fff !important;
text-decoration: none !important;
font-size: 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.theButton:disabled {
display: inline-block;
width: 540px;
margin: 20px 0 10px;
padding: 12px;
background-color: #b6adb4;
border-radius: 2px;
border: 0px;
text-align: center;
color: #fff !important;
text-decoration: none !important;
font-size: 16px;
font-family: 'Rubik', sans-serif;
opacity: 0.5;
}
<button class="theButton" id="theButton">
Click to disable
</button>
JSFIDDLE HERE: https://jsfiddle.net/HappyFone/swhbjer8/8/
Try this one
$(".good-form > .actions a, .theButton").prop('disabled',true);
To disable button
$(".good-form > .actions a, .theButton").prop('disabled', true);
Css for disabled button
.theButton:disabled { /* YOUR CSS */}
I have three divs as below:
Here is a JSFiddle.
$(document).on('click', '.top', function (e) {
console.log("Empty space clicked");
});
.top{
width: 208px;
text-transform: uppercase;
text-align: left;
height: 34px;
background-color: #F44336;
border-bottom: 1px solid #ea1c0d;
color: #ffffff;
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.1);
padding: 3px 8px;
cursor: auto;
}
.inner_1{
font-size: 12px;
}
.inner_2{
font-size: 11px;
text-transform: none;
line-height: 12px;
margin-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.inner_1:hover, .inner_2:hover {
cursor: pointer;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="top">
<div class="inner_1">Top content: This is full width</div>
<div class="inner_2">Bottom</div>
</div>
As you can see from the jsfiddle, when the .top is clicked, it shows a log.
However, I want to make it so that it shows the log ONLY when the empty space is clicked and not when inner_1 or inner_2 div class is clicked (as it shows the log when these two classes are clicked as of now).
What is the best way to achieve this?
Thanks.
Use stopPropagation from jquery. This will stop all child divs from triggering parent onClick
$(document).on('click', '.top > div', function (e) {
e.stopPropagation();
});
Edit:
Code above was building on what OP knows but this way is more efficient for the browser.
$('.top > div').on('click', function (e) {
e.stopPropagation();
});