I have two examples of the same element side by side. I need to be able to toggle a class on only one at a time.
With my current Javascript they are both getting toggled at the same time.
This is part a style guide that backend developers use to build out the front end so I cant have extraneous classes that are only for the javascript.
This example is only for the style guide it works in the real application using groovy/grails.
Any tips are greatly appreciated!
$('.toggle-button-wrapper').on('click', function(e) {
$('.toggle-button').toggleClass("toggle-button-selected");
e.preventDefault();
});
.toggle-button-wrapper {
display: flex;
}
.toggle-btn-dark .toggle-button-wrapper {
margin-bottom: 0;
margin-right: 1rem;
}
.toggle-btn-dark .toggle-button {
display: inline-block;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 2.4rem;
background-color: #ccc;
color: black;
&:hover {
background-color: darken(#ccc, 5%);
}
}
.toggle-btn-dark .toggle-button .icon {
fill: black;
margin: auto;
}
.toggle-btn-dark .toggle-button-selected {
background: purple;
fill: white;
color: white;
&:hover,
&:active {
cursor: default;
background-color: lighten(purple, 5%);
}
}
.toggle-btn-dark .toggle-button-selected .icon {
fill: white;
}
.toggle-btn-light.toggle-button-wrapper {
margin-bottom: 0;
margin-right: 1rem;
}
.toggle-btn-light .toggle-button {
border: 1px solid #ccc;
display: inline-block;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 2.4rem;
background-color: pink;
color: black;
&:hover {
background-color: darken(pink, 5%);
}
}
.toggle-btn-light .toggle-button .icon {
fill: black;
margin: auto;
}
.toggle-btn-light .toggle-button-selected {
background-color: hotpink;
color: white;
&:hover,
&:active {
cursor: default;
background-color: darken(hotpink, 5%);
}
}
.toggle-btn-light .toggle-button-selected .icon {
fill: white;
}
.toggle-button.first{
border-left-style: none;
border-top-left-radius: 1.4rem;
border-bottom-left-radius: 1.4rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.toggle-button.last {
border-top-right-radius: 1.4rem;
border-bottom-right-radius: 1.4rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 style="margin-bottom: 10px;">Dark toggle</h4>
<div class="toggle-btn-dark">
<div class="toggle-button-wrapper">
<button class="toggle-button btn-card-mini first toggle-button-selected">
-
</button>
<button class="btn-card-big toggle-button last">
+
</button>
</div>
</div>
<br>
<h4 style="margin-bottom: 10px;">Light toggle</h4>
<div class="toggle-btn-light">
<div class="toggle-button-wrapper">
<button class="toggle-button btn-card-mini toggle-button-selected first" >
-
</button>
<button class="btn-card-big toggle-button last">
+
</button>
</div>
</div>
you could change the selector to
$('.toggle-button-wrapper').on('click', function(e) {
$(this).find('.toggle-button').toggleClass("toggle-button-selected");
e.preventDefault();
});
This basically prevents all toggle buttons from being selected and limits to children of the clicked wrapper
Related
I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)
I know this is a minor issue, but you may notice that the icons (that I pulled off of react-icons) are slightly lifted up within the buttons. How could I put them right in the middle?
Thats my only question but it won't let me post that alone because my post it mostly code so here's more words. What a stupid feature.
Navbar.js
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell, AiOutlineSearch } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" placeholder="Search" className="form-control" />
<button className="searchBtn"><AiOutlineSearch/></button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">
<FiMail/></button>
</li>
<li className="btn">
<button className="icon-btn"><FaPlus/></button>
</li>
<li className="btn">
<button className="icon-btn"><AiTwotoneBell/></button>
</li>
<li className="btn">
<button className="icon-btn"><BsFillPersonFill/></button>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar;
navbar.css
* {
margin:0;
padding:0;
box-sizing:border-box;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
text-align: center;
justify-content: center;
padding-left: 25%;
color:#00ce7f;
}
#nav-bar {
background-color: #626466;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
height: 55px;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 70%;
border: none;
padding-left: 10px;
font-size: 20px;
}
.search {
padding-left: 15%;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
padding-right: 20px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
font-size: x-large;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-size: large;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 40px;
border: none;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
Try adding something like this to your css:
button[class*="icon-"],
button.searchBtn {
display: flex;
justify-content: center;
align-items: center;
}
This should center you're icon inside the button. If this doesn't work maybe check the size of the icon in F12 browser mode. Sometimes there are icons which does look like there having the same height and width, but they don't.
Another solution would be using position: absolute trick
button[class*="icon-"],
button.searchBtn {
position: relative;
}
button[class*="icon-"] > svg,
button.searchBtn > svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Hope this works for you :D
There is no need of changing so many things. Since you're using display flex for the parent, the elements position themselves next to each other. In order to make them take equal space (I think that's what you want) you need to use flex wrap for the children.
ul {
display:flex;
}
li {
flex-wrap: 1;
}
I made a search box with CSS grid that shrinks when you shrink the page. But, for some reason, it won't shrink as much as it I think it should be able to.
Here is how it looks fully extended:
Here is how it looks shrunken down:
How could I make the width of the search bar shrink down enough with the page so that the search button doesn't switch to the buttom?
Navbar.js
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" className="form-control" />
<button className="searchBtn">o</button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar;
Navbar.css
* {
margin: 0;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
height: 55px;
text-align: center;
justify-content: center;
padding: auto;
}
#nav-bar {
background-color: #888888;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
}
ul li a {
padding: 1.6rem;
font-weight: bold;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 90%;
flex: auto;
border: none;
padding-left: 10px;
justify-content: center;
}
.homeBtn {
background-color: #00ce7f;
}
.search {
padding-left: 10px;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
margin-right: 10px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
padding-left: 5px;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-weight: bold;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
width: 40px;
border: none;
font-size: large;
font-weight: bold;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
Try adding display: flex on the .search rule:
* {
margin: 0;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
height: 55px;
text-align: center;
justify-content: center;
padding: auto;
}
#nav-bar {
background-color: #888888;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
}
ul li a {
padding: 1.6rem;
font-weight: bold;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 90%;
flex: auto;
border: none;
padding-left: 10px;
justify-content: center;
}
.homeBtn {
background-color: #00ce7f;
}
.search {
padding-left: 10px;
display: flex; /* added */
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
margin-right: 10px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
padding-left: 5px;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-weight: bold;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
width: 40px;
border: none;
font-size: large;
font-weight: bold;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<nav id="nav-bar">
<div class="container">
<h2 class="homeBtn">VIZZEY</h2>
<div class="search">
<input type="search" class="form-control" />
<button class="searchBtn">o</button>
</div>
<ul class="ugh-buttons">
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
</ul>
</div>
</nav>
I have two buttons. The first is a dropdown menu that when hovered, shows two sibling <a href>.
The other button is also a sibling, a formaction redirect to a different page.
Problem #1
I want both bg-color and color of the dropdown menu button to change when hovering one of its <a href> .
Problem #2
I want both bg-color and color of the dropdown menu button to change when hovering the latter formaction button.
I have tried figuring it out with the css below but I can't seem to make it work.
.movie-info:hover .dropbtn{
background-color: #A7A774;
color: white;
}
my css and html:
.dropbtn {
width: 210px;
background-color: #CECE99;
color: black;
font-family: 'peninim';
font-size: 15px;
padding: 3px 0;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #A7A774;
color: white;
min-width: 210px;
z-index: 1;
font-family: peninim;
}
.dropdown-content:hover a {
display: block;
}
.dropdown-content a {
color: white;
padding: 3px 12px;
text-decoration: none;
display: block;
font-size: 15px;
text-align: center;
border-top: 2px solid #767676;
border-right: 2px solid #212121;
border-bottom: 2px solid #212121;
border-left: 2px solid #767676;
}
.dropdown-content a:hover {
background-color: #CECE99;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.movie-info {
display: inline-block;
width: 510px;
background-color: #A7A774;
color: white;
font-family: 'peninim';
font-size: 15px;
padding: 3px 0;
color: white;
cursor: pointer;
}
.movie-info:hover {
background-color: #CECE99;
color: black;
}
.movie-info:hover .dropbtn {
background-color: #A7A774;
color: white;
}
<div class="dropdown">
<button class="dropbtn">dropdown button</button>
<div class="dropdown-content">
first redirect
second redirect
</div>
</div>
<form target="_blank">
<button class="movie-info" type="submit" title="redirect" formaction="https://ticks.co.il"> formaction button
</button>
</form>
Like mentioned in the comments, you can do this with JS.
First at all you need to add a onmouseover and onmouseout trigger to the dropdown box.
Then you add a JS that will call the class and change its color and background-color like shown in the snippet:
function hoverTrue() {
document.querySelector('.dropbtn').style.backgroundColor = "#A7A774";
document.querySelector('.dropbtn').style.color = "white";
}
function hoverFalse() {
document.querySelector('.dropbtn').style.backgroundColor = "#CECE99";
document.querySelector('.dropbtn').style.color = "black";
}
.dropbtn {
width: 210px;
background-color: #CECE99;
color: black;
font-family: 'peninim';
font-size: 15px;
padding: 3px 0;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #A7A774;
color: white;
min-width: 210px;
z-index: 1;
font-family: peninim;
}
.dropdown-content:hover a {
display: block;
}
.dropdown-content a {
color: white;
padding: 3px 12px;
text-decoration: none;
display: block;
font-size: 15px;
text-align: center;
border-top: 2px solid #767676;
border-right: 2px solid #212121;
border-bottom: 2px solid #212121;
border-left: 2px solid #767676;
}
.dropdown-content a:hover {
background-color: #CECE99;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.movie-info {
display: inline-block;
width: 510px;
background-color: #A7A774;
color: white;
font-family: 'peninim';
font-size: 15px;
padding: 3px 0;
color: white;
cursor: pointer;
}
.movie-info:hover {
background-color: #CECE99;
color: black;
}
.movie-info:hover .dropbtn {
background-color: #A7A774;
color: white;
}
<div class="dropdown">
<button class="dropbtn">dropdown button</button>
<div class="dropdown-content">
first redirect
second redirect
</div>
</div>
<form target="_blank">
<button class="movie-info" onmouseover="hoverTrue()" onmouseout="hoverFalse()" type="submit" title="redirect" formaction="https://ticks.co.il"> formaction button
</button>
</form>
Edit for your comment:
like I said, you need to add the onmouseover and onmouseout trigger. Then you give it a function name functionname() of your choice followed with bracket open and close.
the javascript needs a function in this formatting:
function functionname() {
changes
}
for the changes you either can adress an ID document.getElementByID('ID') or a class document.querySelector('.class'). Alternativly youc an use a pre-defined variable.
after that you add a .style and a inline style attribute you want to change like color. so the entire line should like this:
document.querySelector('.class').style.color = "red";
If you got all changes you want, you need to close the function with ;} . Multiple chanegs can be added after a , or ;
I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>
I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});