We Keep Coding

How to highlight the input button by clicking to a button?

I can't code jquery javascript therefore i have no idea how to highlight (border or background change) the submit button for a few seconds. I tried some of the scripts that have been shared on this platform but i wasn't lucky. What code do you suggest?
The button i need to highlight is submitbtn
and the button that needs to highlight it by click is eventbtn
I appreciate the help
Thanks
Edited: I Want to add class to the submit button once the button is clicked
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>
h

The key is to remove the highlighting after a few seconds, this can be done with setTimeout() function:
function highlight(id)
{
clearTimeout(highlight.timer);
const el = document.getElementById(id);
//highlight the button
el.classList.add("highlighted");
//remove highlight after 3sec
highlight.timer = setTimeout(() => el.classList.remove("highlighted"), 3000);
}
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
/* added */
.highlighted
{
box-shadow: 0 0 2em 1px red;
}
.wpcf7-submit {
transition: box-shadow 0.2s;
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight" onclick="highlight('form-submit')"> <<<<<<<<<<< </button>
</div>

Do you mean highlight submitbtn when clicking eventbtn?
Add a js to handle the click event, and then add highlight class to submitbtn.
var eventbtn = document.getElementById('highlight');
var submitbtn = document.getElementsByClassName('submitbtn')[0];
eventbtn.addEventListener('mousedown', function () {
submitbtn.classList.add('highlight');
});
eventbtn.addEventListener('mouseup', function () {
submitbtn.classList.remove('highlight');
});
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
.highlight {
background-color: #8beccc;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>

Simply add a class to the element you want to highlight. Then remove the class with the setTimeout function.
Add a class in CSS with a high specificity that contains all visible changes you want to apply. It does not matter what it is. It can be background, border, box-shadow...
In JS use an eventListener to listen to click-events on the button.
Apply the class you have specified in CSS with classList.add().
Add a setTimeout function to remove the class after a specified time with classList.remove()
Vanilla JavaScript:
// button element that will be clicked
var button = document.querySelector('button[class="eventbtn"]'),
// element that should be highlighted
input = document.querySelector('#form-submit'),
// timer in ms
timer = 2000;
// eventListener to execute the script on button click
button.addEventListener('click', function() {
// adds a class to apply CSS changes for the highlighting
input.classList.add('highlight');
// timeout function
setTimeout(function() {
// removes the class after the timer has been reached
input.classList.remove('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>
jQuery:
// button element that will be clicked
var $button = $('button[class="eventbtn"]'),
// element that should be highlighted
$input = $('#form-submit'),
// timer in ms
timer = 2000;
//Eventlistener looking for a click event
$button.click(function() {
//adds a class for highlighting
$input.addClass('highlight');
//timeout function
setTimeout(function() {
//removes class for highlighting
$input.removeClass('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>

I tryed to answer with pure css by using animation and keyframes. My attempt only works the first time and once everytime after you change the target.
(Note that I'm not used to these properties so there may be a better way to do this)
#form-submit{
background-color: transparent;
}
#keyframes changeBackground {
0% {
background-color: orange;
}
99.999% {
background-color: orange;
}
100% {
background-color: transparent;
}
}
#form-submit:target{
animation: changeBackground 1s;
}
<input type="submit" value="submit" id="form-submit" />
highlight
<br>
change target

Change the flex-direction on button click

I am trying to create an animation effect that moves two buttons when I click on them. I have the flex direction set up as a column in the container div and I essentially just want them to position as a flex row when I click on one of them (probably with a 1s animation). When I click on them currently nothing happens. Here is my code sample:
HTML
<header>
<div class="container">
<h1>Choose Your Allegiance</h1>
<div id="buttons">
<button class="fill"><img src="/assets/Jedi.png" alt="Jedi" /></button>
<button class="fill sith">
<img src="/assets/Sith.png" alt="Sith" />
</div>
</button>
</div>
</header>
CSS
.container {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.container.click {
flex-direction: row;
justify-content: space-around;
}
h1 {
margin-left: 5vw;
color: black;
font-family: "Poller One", cursive;
font-variant: small-caps;
font-size: 3rem;
margin-top: 6vh;
}
button {
color: white;
transition: 0.25s;
float: left;
margin: 2%;
}
button:hover,
button:focus {
border: 2px solid red;
color: black;
}
.fill {
height: 120px;
width: 150px;
background: transparent;
margin-top: 4vh;
outline: none;
border: none;
}
.fill:hover,
.fill:focus {
box-shadow: inset 0 0 0 4.5em #add8e6;
}
.sith:hover,
.sith:focus {
box-shadow: inset 0 0 0 4.5em black;
}
#buttons {
height: 100%;
width: 100vw;
padding-top: 10vh;
display: flex;
justify-content: center;
}
JS
document.querySelector("button").addEventListener("click", () => {
document.querySelector(".container").classList.toggle(".container.click");
});

There are a couple of changes you need to make to get this to work:
1. document.querySelector("button") is only selecting the first button. There are 2 you can add an event listener to the buttons
use document.querySelectorAll("button") to get all the buttons, and then you can loop through them adding an event Listener to each one:
document.querySelectorAll("button").forEach(function(button) {
button.addEventListener("click", () => {
document.querySelector(".container").classList.toggle("click");
});
});
A better way is to add an event listener to the buttons container - you can get the element using getElementById and then add the listener to it:
var buttons = document.getElementById("buttons");
buttons.addEventListener("click", (e) => {
document.querySelector(".container").classList.toggle("click");
});
2. You just use the class name when passing a class into toggle- you don't need the .. Also, you only need to toggle the click class as the container class will always apply. So what you need to use is .toggle("click");
Working Example (without your images):
var buttons = document.getElementById("buttons");
buttons.addEventListener("click", (e) => {
document.querySelector(".container").classList.toggle("click");
});
.container {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.container.click {
flex-direction: row;
justify-content: space-around;
}
h1 {
margin-left: 5vw;
color: black;
font-family: "Poller One", cursive;
font-variant: small-caps;
font-size: 3rem;
margin-top: 6vh;
}
button {
color: red;
transition: 0.25s;
float: left;
margin: 2%;
}
button:hover,
button:focus {
border: 2px solid red;
color: black;
}
.fill {
height: 120px;
width: 150px;
background: transparent;
margin-top: 4vh;
outline: none;
border: none;
}
.fill:hover,
.fill:focus {
box-shadow: inset 0 0 0 4.5em #add8e6;
}
.sith:hover,
.sith:focus {
box-shadow: inset 0 0 0 4.5em black;
}
#buttons {
height: 100%;
width: 100vw;
padding-top: 10vh;
display: flex;
justify-content: center;
}
<header>
<div class="container">
<h1>Choose Your Allegiance</h1>
<div id="buttons">
<button class="fill">Jedi</button>
<button class="fill sith">Sith</button>
</div>
</div>
</header>
As for animating this change, unfortunately CSS animations cannot be applied to flexbox direction property.

You are using classList.toggle wrong. You'll need to do this instead:
const container = document.querySelector(".container");
container.classList.toggle("click");
Documentation on Element.classList here.

Hover command stops working when hiding nested div

I am trying to use the hover command in CSS and it works when hovering over my property button, but I want it to hide after the click event in JavaScript.
Below is an example of my code with a "property" button and then a dropdown that comes when you hover over it. If I add $(".dropdown-content").css("display","none"); to the button click event then the hover command stops working.
I don't understand why this is the case as I would be hiding a nested div .dropdown-content and so the hover command should still work for the outer div `.dropdown but it doesn't. Any help would be appreciated!
$("#001").on('click', function() {
window.whichtab = 1;
});
$("#002").on('click', function() {
window.whichtab = 2;
});
$("#001,#002").on('click', function() {
$("#title1,#title2").hide()
if (window.whichtab == 1) { //home
$("#title1").show();
$("#title1").css("display", "inline");
//$(".dropdown-content").css("display","none");
}
if (window.whichtab == 2) {
$("#title2").show();
$("#title2").css("display", "inline");
//$(".dropdown-content").css("display","none");
}
});
.dropbtn {
background-color: #3d70b2;
color: white;
padding: 13px;
font-size: 16px;
border: none;
}
.dropdown-content button {
color: black;
border: none;
width: 250px;
height: auto;
padding: 13px 16px;
text-align: left;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.dropdown-content {
display: none;
border: solid;
border-radius: 0px;
border-color: #3d70b2;
position: absolute;
background-color: 17, 83, 238;
min-width: 250px;
box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3d70b2;
}
#title1 {
display: inline;
}
#title2 {
/*defult title is hidden for 2*/
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<!--title of each tab-->
<button class="dropbtn">Property</button>
<h4 id="title1">   Home page</h4>
<h4 id="title2">   Content Page</h4>
<div class="dropdown-content">
<!--each button going to each tab-->
<button id="001" ,class='noHover'>Home Page</button><br>
<button id="002">Content Page</button><br>
</div>
</div>

display: none doesn't preserve the space and you can not hover on that. You can use opacity property like the following way:
$(".dropdown-content").css("opacity", 0); // hide
$(".dropdown-content").css("opacity", 1); // show

I'm having trouble with an animation I want to do with JS and CSS in HTML

I'm a beginner to website building, and I wanted to create an animation every time a button is pressed. So I tried doing it on CSS first, but realized it could not be done with that alone, so I incorporated JS into my code which is still not working. The idea is, when I press the button, "Filter", the menu that is in the element, ".filter" comes down, so I tried adding an animation to shift the margin down, which does not work. How can I make this work?
function btnFilter() {
document.getElementByClass(".filter").style.WebkitAnimation = "filter-animation";
document.getElementByClass(".filter").style.animation = "filter-animation";
}
.filter {
display: none;
position: relative;
border-radius: 8px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
margin-top: -57px;
}
#-webkit-keyframes filter-animation {
from {
margin-top: -57px;
display: none;
}
to {
margin-top: 30px;
display: flex;
}
}
#keyframes filter-animation {
from {
margin-top: -57px;
display: none;
}
to {
margin-top: 30px;
display: flex;
}
}
<button onclick="btnFilter()">Filter</button>
<div class="filter">
<p>filter</p>
<form class="drpdwn-1">
<p>Price range:</p>
<select value="Price Range">
<option>$0 - $50</option>
<option>$50 - $100</option>
<option>> $100</option>
</select>
</form>
</div>

jQuery(JS)may help you
https://jsfiddle.net/moongod101/h8t6347b/
My way to do it is just use the jQuery function addClass,easy and simple

function btnFilter() {
document.getElementsByClassName(".filter").style.WebkitAnimation = "filter-animation";
document.getElementsByClassName(".filter").style.animation = "filter-animation";
}
use getElementsByClassName('.className')...

You can use just CSS but you need to toggle a css class for animating the button every time.
Here is an example:
var el = document.querySelector(".button");
el.addEventListener('click', function() {
if(!el.classList.contains("animate")) {
el.classList.add("animate");
} else {
el.classList.remove("animate");
}
});
.button {
font-weight: bold;
font-size: 1.2em;
color: white;
background-color: #777;
padding: 0.7em 2em;
border: 0;
margin: 1em auto 0;
border-radius: 3px;
box-shadow: 0 3px 0 #444;
display: block;
cursor: pointer;
appearance: none;
transition: transform 1.5s ease;
}
.animate {
transform: translateY(50px);
}
<button class="button">Click me</button>

Having a problem with selectors

The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}

Have you tried?
$(this+' > .menuItem div')

I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();