I have two buttons on a page. I styled the second button with CSS to kind of shine in a light grey. Now I want to add some event (I guess with JS?) which only highlights the second button, after the first button has been clicked on.
<button class="tempo1" type="button" onclick="buttonShow()">Datenschutzerklärung</button>
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
TEXT
<p style="text-align: center; margin-top: 20px">
<button type="button" onclick="buttonHide()">Schließen</button>
</p>
</div>
<!-- Der JavaScript-Code -->
<style>
.tempo1 {
background-color: #A4A4A4;
-webkit-border-radius: 10px;
border-radius: 10px;
border: none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
-webkit-animation: glowing 1500ms infinite;
-moz-animation: glowing 1500ms infinite;
-o-animation: glowing 1500ms infinite;
animation: glowing 1500ms infinite;
}
.tempo1:focus {outline:0;}
#-webkit-keyframes glowing {
0% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
50% { background-color: #A4A4A4; -webkit-box-shadow: 0 0 40px #A4A4A4; }
100% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
}
#-moz-keyframes glowing {
0% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
50% { background-color: #A4A4A4; -moz-box-shadow: 0 0 40px #A4A4A4; }
100% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
}
#-o-keyframes glowing {
0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}
#keyframes glowing {
0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}
}
</style>
Basically I want to put a condition on the button (class=temp1) in the top line. The CSS code below should just be activated if another button (I havent listed the code for this button here) is clicked. Also, I would appreciate any advice if there is a way to style a button in a similar way with less code.
If the idea behind it or my question are not clear enough, please ask :)
Thanks for your time and help!
you can achieve this in js by listening to click events on the first button, and adding the 'glow' class to the 2nd button, like so:
//select btn1, and listen to click events on it
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", addGlow);
//the function addGlow, adds the glow class to btn2
function addGlow() {
var btn2 = document.getElementById("btn2");
btn2.classList.add("glow");
}
button{
width:100px;
height:50px;
background-color:grey;
border-radius:5px;
border:none;
}
.glow{
background-color: cyan;
}
<button id="btn1">button 1</button>
<button id="btn2">button 2</button>
note that this code only adds the css glow class, if you want the button to 'turn off' at some point, you'll need to remove the glow class, which can be done like so:
btn2.classList.remove("glow");
hope this helps :)
Related
I am new to web development and I have a bug that I cannot seem to fix. Basically, I have a button that highlights when its hovered and it works but there is a small outline of the original color when hovered. I'm pretty sure this is not because of an outline or a border. The bug is displayed in the picture provided. Here is the code:
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
}
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
}
<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
EDIT: I'm using Google Chrome and Windows 11 (idk if OS is important)
The box shadow is slightly transparent around those corners, allowing you to see the beige background color underneath. Changing the background color of the button on hover to the same color as the box shadow fixes this. The effect is ever so slightly different, but I can't really tell just from looking at it.
Also, on chrome, this box shadow transition blinks. I messed around with it and changed the 4th number to 1px and it stopped blinking. I couldn't tell you why, but there you go.
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
overflow: hidden;
}
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
I just got why it's like that. It's cause of your "beige" background. When I change it to "red" look how it is
red background button
Fix: Let's give background when :hover state is used
So your code will be like
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
background: rgb(36,36,37);
}
Let me know how it is
I have a situation where I multiple divs can have a class with a css animation, but in my situation the classes represent a state. Since these can change, the state that uses the css animation can be set onto the div at a different time than another div. With the yellow blinking effect I now have for that state, you see the multiple divs blink at different moments instead of together simultaneously.
So the question is, is there a way to make it so that the divs start blinking on the same moment instead, like that you can start the animation at .000 milliseonds?
I have added a snippet to simulate my problem:
function changeState(id) {
let stateElement = document.getElementById(id);
stateElement.classList.remove('green');
stateElement.classList.add('yellow-blinking');
stateElement.innerText = 'WARN';
}
setTimeout(() => changeState('state1'), 459);
setTimeout(() => changeState('state2'), 1321);
setTimeout(() => changeState('state3'), 2778);
.state {
margin: 8px;
padding: 4px 0px 0px;
border: 2px solid #000000;
border-radius: 3px;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: 20px;
width: 80px;
text-align: center;
}
.yellow-blinking {
background: #ffff00;
color: #000000;
animation: yellowflash-small 1s linear 0s infinite;
-webkit-animation: yellowflash-small 1s linear 0s infinite;
}
#keyframes yellowflash-small {
0% { background: #ffff00; }
49% { background: #ffff00; }
50% { background: #ffffff; }
99% { background: #ffffff; }
}
#-webkit-keyframes yellowflash-small {
0% { background: #ffff00; }
49% { background: #ffff00; }
50% { background: #ffffff; }
99% { background: #ffffff; }
}
.green {
background: #00d200;
color: #000000;
}
<div class="state green" id="state1">OK</div>
<div class="state green" id="state2">OK</div>
<div class="state green" id="state3">OK</div>
As you can see, the blinking is not synchronised with each other. Is there a way to make them blink together, regardless of when it gets to that state?
Apply the animation initially to the element and animate only the background-color then use background-image to have the initial green color. Like that the animation will start running behind the green and we simply show it by removing the green layer
function changeState(id) {
let stateElement = document.getElementById(id);
stateElement.classList.remove('green');
stateElement.innerText = 'WARN';
}
setTimeout(() => changeState('state1'), 459);
setTimeout(() => changeState('state2'), 1321);
setTimeout(() => changeState('state3'), 2778);
.state {
margin: 8px;
padding: 4px 0px 0px;
border: 2px solid #000000;
border-radius: 3px;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: 20px;
width: 80px;
text-align: center;
animation: yellowflash-small 1s linear infinite;
}
#keyframes yellowflash-small {
0% {
background-color: #ffff00;
}
49% {
background-color: #ffff00;
}
50% {
background-color: #ffffff;
}
99% {
background-color: #ffffff;
}
}
.green {
background-image: linear-gradient(#00d200 0 0);
color: #000000;
}
<div class="state green" id="state1">OK</div>
<div class="state green" id="state2">OK</div>
<div class="state green" id="state3">OK</div>
Before I get into this, I'm sure that there is an answer to my question. I am new to coding, so I don't understand how to plug in the information to make it work on my site. I am trying to get a portfolio like this site: http://gomedia.com/our-work/. Here is my site so you can see the code: http://www.mattsusla.graphics. I have tried for an hour with no success. Please Help!
It's best to do this with native css. Simply call the element's hover state with :hover
button { background: blue; }
button:hover { opacity: 0.5; }
<button>Change Opactiy on Hover</button>
Let's look at the code you'd need in JavaScript
var button = document.getElementById("my-button");
button.addEventListener("mouseover", function() {
button.style.opacity = 0.5;
});
button.addEventListener("mouesout", function() {
button.style.opacity = 1.0;
});
You dont need javascript for this.
Its simple done with css:
img:hover {
opacity: 0.5;
}
if you want it to be more smooth, you can add a transition. this is done with css, too. only use javascript if you really need it!
img {
opacity: 1;
}
img:hover {
opacity: 0.5;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
I am guessing that you are looking for the same functionality that is in the first site? If that is correct this will do it for you. See fiddle: https://jsfiddle.net/8sphkqkn/1/
html
<div id="box">
<div id="overlay">
<span id="text">Boss Dog Brewing Co.</span>
</div>
</div>
css
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://s3.gomedia.us/wp-content/uploads/2015/03/GO_BossDogBrewery-1-e1430266175600-300x300.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
width: 300px;
height: 200px;
}
#box:hover #overlay {
opacity: 1;
}
#text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 16px;
}
I am having an issue with some expand/collapse code. I would like the p class="heading" tag in the HTML (which is what toggles my expand/collapse box) to move down with the expanding content. Right now the content is expanding and populating below the toggle.
I tried making a fiddle of the code and the expand function wasn't working, so I apologize for not being able to provide one.
The code in question is below.
CSS
<style>
/* mouse over link */
p {
color: rgb(206, 134, 57);
margin-left: -10px;
margin-right: -10px;
margin-bottom: 0px;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
p:hover { text-decoration: underline;
cursor: pointer;
color: rgb(206, 134, 57);
-moz-box-shadow: 0 -2px 2px;
-webkit-box-shadow: 0 -2px 2px;
box-shadow: .1px .1px 5px .1px #787878;
}
.heading {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align: center;
padding:7px 14px 7px 12px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
text-decoration:none;
background: -moz-linear-gradient(top, #dedede, white 75%);
background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));
border-top: 1px solid #A6A6A6;
outline:none;
}
a {
color: rgb(206, 134, 57);
}
.heading:hover {
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
a:hover {
color: rgb(137, 90, 39);
}
.transition {
border: 1px solid #A6A6A6;
border-radius: 5px;
background:white;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
.transition:hover {
background:#e6ebef;
box-shadow: .1px .1px 5px .1px #787878;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
</style>
JQuery/JavaScript
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
var s = $(this);
jQuery(this).next(".content").slideToggle(500);
s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
});
});
</script>
HTML
<div class="transition"><span style="font-weight: bold; font-size: 18px; color: rgb(0, 130, 200);"><u>Tree Removal Permit</u><br>
</span> <br>
A tree removal permit is required for removal of any tree on a commercial or multi-family property.<br>
<p class="heading">Click here for more information... </p>
<div class="content">
<div style="height:7px;font-size:7px;"> </div>
<span style="font-size: 14px; color: rgb(6, 78, 137);"><b>Online Application Process</b></span>
<ul>
<li type="square">For an easy, step-by-step permit application process visit our Online Licensing and Permitting Portal</a>.</li>
</ul>
<div style="height:7px;font-size:7px;"> </div>
</div>
</div>
Any help would be greatly appreciated!
You have your <div class="content".. above your less information button. Put that before the <p class="heading".. and change this line
jQuery(this).next(".content").slideToggle(500);
to
jQuery(this).prev(".content").slideToggle(500);
is this what you meant? https://jsfiddle.net/inkedraskal/319j8vwr/
You needed to move the "p" tag to below the "content" div, and then just switch up the js accordingly:
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
var s = $(this);
jQuery(".content").slideToggle(500);
s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
});
});
Just to preface my answer, I'm an absolute novice when it comes to JQUERY.
I'm trying to create a DOM ready function which takes the value of a hidden HTML input field and if the value is ... (something) then show a certain <div> class.
Here's my code:
JS - UPDATED
$(document).ready(function(){
var money = 19.95;
/* not sure if this is written correctly, but this is supposed to
check whether the hidden input element value is equal to var money */
if ($("input[id='VAT_shipping'][type='hidden']").val() == money ) {
$("#ac-wrapper").show();
$("#popup").show();
};
// hide popup when user clicks on close button
$(".close-btn").click(function(){
$("#ac-wrapper").hide();
// hide
});
// hides the popup if user clicks anywhere outside the container
$("#ac-wrapper").click(function(){
$("#popup").hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$("#ac-wrapper.").click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
});
});
HTML
<input type="hidden" id="VAT_shipping" value="<? print $shipping; ?>" />
<div id="ac-wrapper">
<div id="popup">
<center>
<p>
<strong> You have selected World Free Tax Zone - £19.95 for shipping. </strong>
We will automatically remove the VAT - 20% from your order.
Please click close to return to review your order.
</p>
<button class="close-btn">Close</button>
</center>
</div>
</div>
CSS
#ac-wrapper {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 200px; left: 375px;
font-size: 16px;
font-family: 'Oxygen', sans-serif;
text-align: center
}
.close-btn {
cursor: pointer;
font-family:Tahoma, Geneva, sans-serif;
border: 1px solid #000000;
color: #ffffff;
background-color: #AC9E33;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;
text-transform:none;
padding: 7px 12px;
margin:0;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.close-btn:hover {
font-family:Tahoma, Geneva, sans-serif;
border: 1px solid #000000;
color: #ffffff;
background-color: #515280;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 1px #000000;
font: bold 11px Sans-Serif;
text-transform:none;
padding: 7px 12px;
margin:0;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.2));
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
}
So the jQuery function checks the value of the shipping input field and if it is equal to var money = 19.95 then the ac-wrapper and nested popup is shown. The client can then close this window, using the `close-btn' or by clicking outside of the element.
Can somebody explain how to do this please.
Your first problem is
if ($("input[name='shipping']").val(money); ) {
should be
if ($("input[id='shipping']").val() == money ) {
OR
if ($("input[id='shipping'][type='hidden']").val() == money ) {
From the looks of things you're trying to determine whether or not to show a pop-up based on the value of a drop-down (says in your code). For that you'd need a dropdown.
<select id="shipping_dropdown" name="shipping_dropdown" required>
<option value="">Select shipping method</option>
<option value="25.00">Not this one</option>
<option value="19.95">This one</option>
</select>
Next you say that you want to read the value from a hidden <input> field. Why? This seems unnecessary. You could do the following to read a users' selection.
<script type="text/javascript">
$(document).ready(function({
$("#shipping_dropdown").change(function(){
//Handler for when the value of this ID (shippping_dropdown) changes
if( $(this).val() == "19.95" ){
//Replace alert() with your pop-up
alert("You have selected World Free Tax Zone - £19.95 for shipping.");
}
});
});
</script>
See about the .change() function here.
Your code
if ($("input[name='shipping']").val(money); ) {
//code
$('.ac-wrapper').show().css({'height' : docHeight});
$('.popup').css({'top': scrollTop+20+'px'});
});
two syntax error
first line: if ($("input[id='shipping']").val()==money ) {
last line: }