Zeroclipboard grays out button on hover and active - javascript

When you hover over my button it gets grayed out. Also as you click it. I am using zeroclipboard v1.3.5
code: Javascript
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "zeroclipboard/ZeroClipboard.swf"
});
});
</script>
HTML
<p class="baddress">18b1bypQA52LdYBnth8sqt2zDvZVZStpZe <button class="btca" id="copy_button" data-clipboard-text="18b1bypQA52LdYBnth8sqt2zDvZVZStpZe" title="Click to copy me.">Copy</button></p>
CSS
.btca, .zeroclipboard-is-hover{
background-color: #61ff21;
border: 3px solid black;
border-color: #00ffff;
text-decoration: none;
color:gray;
font-weight: bold;
}
.btca:active, .zeroclipboard-is-active{
border-color: #61ff21;
background-color: #00ffff;
}

Related

button change css style at switch to dark / lightmode

old
(Hello and thank you in advance, I would like to make a button with darkmode and if you click on it then it becomes darkmode and the button is then called white mode then when you click on it again it becomes white mode and the button is called dark mode again.)
new
(now the button change style is missing when you click on it)
function myFunction() {
var element = document.page;
element.classList.toggle("dark-mode");
}
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
</body>
</html>
I don't believe document.page is valid js. assign the class to body
document.getElementsByTagName('button')[0].textContent='dark-mode';
function myFunction() {
var element = document.getElementsByTagName('body')[0];
element.classList.toggle("dark-mode");
var button = document.getElementsByTagName('button')[0];
if(button.textContent == 'dark-mode')button.textContent='white-mode';
else button.textContent='dark-mode';
}
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()"></button>
</body>
</html>

Save Button Colour on local storage

Im quite new to web development. i have seen similar questions, but it did not help me.
I have a button and it turns green when i press it. But when the page refreshes, the colour disappears. I know local storage is a solution to this but i don't know how to implement it. i tried so many times with local storage but couldn't figure out a solution . i have posted my HTML code below. Note that my button is inside a form , because i need to access a link from my button. How can i save the button colour with local storage so that the colour doesn't disappear when the page refreshes. And if i put a second button i want the colour to disappear from the first button, so that only the second button is active. Any help is truly appreciated. Any examples done on my code would also help !!Thanks a lot for your time.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
margin-top: 280px;
margin-left: 420px;
background-color:rgb(128, 128, 128);
border: none;
color: white;
padding: 30px 35px;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button:focus{
background-color:rgba(10, 170, 10, 0.952);
}
</style>
</head>
<body>
<div style = "position:fixed; left:-300px; top:-100px;">
<form method="get" action="http://1.1.1.1/myfile.php" >
<button class="button">Lights On</button>
</form>
</div>
</body>
</html>
You can use localStorage.setItem(key, value) and localStorage.getItem(key). Here's an example that adds an event handler to the form to save in localStorage that the button was pressed, and on page load, mark the color green if it finds that localStorage indicator:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
margin-top: 280px;
margin-left: 420px;
background-color:rgb(128, 128, 128);
border: none;
color: white;
padding: 30px 35px;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button-green, .button:focus {
background-color:rgba(10, 170, 10, 0.952);
}
</style>
</head>
<body>
<div style = "position:fixed; left:-300px; top:-100px;">
<form id="form" method="get" action="https://1.1.1.1/myfile.php" >
<button class="button">Lights On</button>
</form>
<script>
if (localStorage.getItem('formSubmitted') === 'yes') {
for(const button of document.getElementsByClassName('button')) {
button.classList.add('button-green')
}
}
document.getElementById('form').addEventListener('submit', (event) => {
localStorage.setItem('formSubmitted', 'yes');
})
</script>
</div>
</body>
</html>

How do I add/remove div color onclick of the div but not the button?

I have an add and remove button which selects the complete div and adds a green color to the div. The function only works on the "add this extra" and "remove" button. How do I make it work like clicking anywhere on the div instead of the particular button itself?
I would look to hear someone help from you guys.
Regards,
Bilal
$('.btn_extras').addClass('force-hide');
$('.btn-rmv-item').hide();
// Add btn onClick
$('.btn-add-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).next("button.btn-rmv-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").addClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// Remove btn onClick
$('.btn-rmv-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).prev("button.btn-add-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").removeClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// function to Show/Hide Continue Button w.r.t SELECTIONS
function showHideContinueBtn() {
$('.btn_extras').addClass('force-hide').removeClass('force-block');
$('.btn_skip').removeClass('force-hide').addClass('force-block');
$('div.card').each(function(index) {
if($(this).hasClass('card-bg')) {
$('.btn_extras').removeClass('force-hide').addClass('force-block');
$('.btn_skip').removeClass('force-block').addClass('force-hide');
}
});
}
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button class="btn btn-add-item">Add this extra</button>
<button class="btn btn-rmv-item">Remove</button>
</div>
<div class="clearfix"></div>
</div>
You can have the click handler directly on the div (I assume it is .card-border here).
And you need only one button which you toggle the classes and change the text.
I added a .card-bg CSS rule that seemed to be missing in the question...
I also added type="button" to prevent form submission if the button is clicked.
Have a look at the comments in the code below. It replaces the two click handlers you had... And the showHideContinueBtn() function.
$(".card-border").on("click",function(){
// Toggle the div background color
$(this).toggleClass("card-bg");
// Find the button
var btn = $(this).find(".btn");
// Toggle classes for ONE button
btn.toggleClass('btn-add-item btn-rmv-item');
// Depending on a button's class, change it's text
(btn.hasClass("btn-rmv-item"))?btn.text("Remove"):btn.text("Add this extra");
});
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
/* This class was not posted in question... So I improvised one */
.card-bg{
background-color:#44bb44;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
<!--button class="btn btn-rmv-item">Remove</button-->
</div>
<div class="clearfix"></div>
</div>
Change
$('.btn-add-item').on('click', function(e) {
to
$(e.currentTarget).closest("div.card-border").on('click', function(e) {
If you want a toggle functionality, also add a variable that holds the crt state:
var state="default";
...on('click',function(){
if(state=='default'){
state='checked';
....
} else {
state='default';
....
}
});
If I understood you question right then this is answer you are looking for.
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()" style="width:200px; height:100px; border: 1px solid black;">
This Div's background color will change.
</p>
<script>
var color=0;
function myFunction() {
// Just Specify The Id you need
var myDiv = document.getElementById("demo");
if(color == 0)
{
myDiv.style.backgroundColor = "red"; color=1;
}
else
{
myDiv.style.backgroundColor = "white"; color=0;
}
}
</script>
</body>
</html>
Hope This Solves the Issue.

When you hover on a tab then an image changes

I have a tab with an image inside of it and I want to make it so when you hover/select the tab the image changes to a different image and then when you unselect/ unhover it changes back to the original image.
When you hover/select on the tab I want to get the image changes from Icon20.png to Icon10.png
Here is the code for the tab
$('#one').hover(function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});
$('#one').click(function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});
div.tab {
overflow: hidden;
border: 1px solid #336699;
background-color: #336699;
font-family: "Lato", "Sans-Serif";
}
div.tab button {
background-color: #336699;
float: left;
border: #FFF;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
color: #fff;
font-family: "Lato", "Sans-Serif";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
div.tab button:hover {
background-color: #FFFFFF;
color:#336699;
}
div.tab button.active {
background-color: #fff;
color:#336699;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<button id="one" class="tablinks" aria-label="LDS Vacuum Shopper Links" >
<img src="https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png" height="20" width="20" title="LDS Logo" id="two" name="two">
Vacuum Shopper
</button>
</div>
UPDATE: After searching around I found these JSFiddle's: First JSFiddle and Second JSFiddle
and I combined elements from both of them to make the JQuery in the code snippet.
After searching around I found these JSFiddle's: First JSFiddle and Second JSFiddle
and I combined elements from both of them to make the JQuery in the code snippet.
$('#one').hover(function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});
$('#one').click(function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});

CSS on button input cancel the prop disabled property in jQuery

I made some CSS style for input button. After doing it, the prop('disabled',true) is not working for me (it used to work before the CSS changes)
HTML code:
<div id="navigation">
<button id="nextButton" type="button" name="nextButton">Next</button>
</div>
jQuery code:
$('#nextButton').prop('disabled',true);
CSS code:
button{
background: #cfe2f3;
background: -webkit-linear-gradient(#cfe2f3, #d0e0e3);
background: linear-gradient(#cfe2f3, #d0e0e3);
border: 0.5px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
padding: 8px 20px;
font: normal 700 18px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
My propose it to disable the press on the Next button
Try to add some CSS to the disabled state:
button:disabled {
// your css rules
}
Add style to button as well when you make it disable so it will be confirm that button is disabled
$('#nextButton').css('border','1px solid red');
$('#nextButton').prop('disabled',true);
Hope so it will help you.
it is working.try this.I have linked jquery online
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#one{
background: #cfe2f3;
background: -webkit-linear-gradient(#cfe2f3, #d0e0e3);
background: linear-gradient(#cfe2f3, #d0e0e3);
border: 0.5px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
padding: 8px 20px;
font: normal 700 18px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
</style>
<body>
<input type="button" id="one" name="button" value="button">
<script type="text/javascript">
$(document).ready(function(){
$("#one").prop('disabled',true).css({"opacity":"0.6"});
$("#one").on('click',function(){
alert(" I am enable");
})
});
</script>
</body>
</html>
try it with changing 'disabled' to 'enable', if it is enable, you may see an alert.
You can disable a button by using below mentioned steps.
Say your button class name = setAlg
Step 1:
Using Jquery attr Attribute :
$('.setAlg').attr('disabled', 'disabled');
Step 2:
Using Jquery addClass CSS Class :
$('.setAlg').addClass('disabled');
Step 3 :
Then by Declaring CSS Style Class :
<style type="text/css">
.disabled
{
background: none repeat scroll 0 0 burlyWood;
cursor: default !important;
}
</style>

Categories