I have 9 buttons in a board and I want to show an 'X' or an 'O' whenever I press them. However when I press a button it goes down.
$(document).ready(function(){
var against = 'human';
var board = ['-','-','-',
'-','-','-',
'-','-','-'];
var turn = 'X';
$('.xo-btns').click(function(){
$(this).text(turn);
});
});
body{
padding: 0px;
margin: 0px;
width: auto;
height: auto;
background: black;
font-family: 'Raleway', sans-serif;
}
.container{
text-align: center;
}
.board{
display: inline-block;
text-align: center;
background: red;
padding-top: 15px;
padding-left: 10px;
height: 250px;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.xo-btns{
width: 70px;
height: 70px;
padding: 0px;
border-radius: 4px;
background: transparent;
outline: none;
color: white;
/* display: inline-block; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="board">
<button class="xo-btns" id="one" value="1"></button>
<button class="xo-btns" id="two" value="2"></button>
<button class="xo-btns" id="three" value="3"></button>
<br>
<button class="xo-btns" id="four" value="4"></button>
<button class="xo-btns" id="five" value="5"></button>
<button class="xo-btns" id="six" value="6"></button>
<br>
<button class="xo-btns" id="seven" value="7"></button>
<button class="xo-btns" id="eight" value="8"></button>
<button class="xo-btns" id="nine" value="9"></button>
<br>
</div>
</div>
How can I fix it so every time I press one of them, they stay where they started.
Thank you!
This happens because of the vertical-align attribute, which sometimes has a buggy behaviour in my opinion.
Add
vertical-align: middle; to your "xo-btns" class and you should be fine.
Related
I have a project in CS class where we have to clone an app that we use on a daily basis. I chose cashapp. I have a flexbox container holding the balance value, and I want the balance text to be responsive and shit itself to always be centered in the middle of the screen. I've achieved this with justify-content: center, however when I add text it doesn't responsively shift itself to stay centered. Also if you run the snippet you might want to resize it to 720 x 1520 b/c that is the resolution of the android Im making this for. Any suggestions? Dont flame me if the code issn't clean this is my first highschool CS class
document.getElementById('backspace').addEventListener('click', backspace)
let fired_button
let moneyval = document.getElementById('money')
$("button").click(function() {
fired_button = $(this).val();
let emptyArray = []
emptyArray.push(moneyval.textContent)
console.log(emptyArray)
for (var i = 0; i < emptyArray.length; i++) {
if (emptyArray[0] == "$0") {
moneyval.textContent = "$" + fired_button
} else {
moneyval.textContent += fired_button
}
}
});
function backspace() {
console.log(moneyval.textContent)
let string = moneyval.textContent
string = string.substring(0, string.length - 1);
moneyval.textContent = string
}
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: blue;
font-family: 'Inter';
width: 720px;
height: 1520px;
}
#camera,
#search,
#profile {
background-color: blue;
color: black;
border: 0;
}
.camera {
margin-left: 15px;
}
.search {
margin-left: 8px;
}
.head-section {
position: absolute;
top: 60px;
}
.head-right {
position: absolute;
right: 40px;
top: 60px;
}
.money {
color: rgba(255, 255, 255, 0.87);
font-size: 150px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
line-height: 182px;
position: absolute;
width: 198px;
height: 182px;
margin: 0;
}
.usd {
position: absolute;
width: 146.4px;
height: 61px;
background: blue;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
border-radius: 43px;
color: white;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 30px;
border-style: none;
}
.numberpad {
position: absolute;
width: 850px;
height: 540px;
left: -45px;
top: 730px;
}
.row1 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row2 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row3 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row4 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row1,
.row2,
.row3,
.row4 {
margin-top: 80px;
}
button {
border-style: none;
background-color: blue;
color: white;
font-size: 40px;
font-style: normal;
font-weight: 400;
}
.subcta {
border-style: solid;
position: absolute;
top: 1300px;
}
.sub-cta {
display: flex;
position: absolute;
width: 750px;
height: 124px;
left: -2px;
top: 1260px;
justify-content: space-evenly;
}
.sub-button {
border-style: solid;
border-radius: 1.3em;
padding: .3em;
background-color: black;
border-color: #0CC337;
width: 293px;
height: 88px;
}
.balance-container {
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
position: absolute;
width: 720px;
height: 219px;
left: -20px;
top: 323px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="head-section">
<button id="camera"> <img src="/images/image 1.png" alt=""></button>
<button id="search"> <img src="/images/image 2.png" alt=""></button>
</div>
<div class="head-right">
<button id="profile"><img src="/images/image 3.png" alt=""></button>
</div>
<div class="balance-container">
<h1 id="money" class="money">$0</h1>
</div>
<div>
</div>
<section class="numberpad">
<div class="row1">
<button class="numpad" name="1" id="1" value="1">1</button>
<button name="2" id="2" value="2">2</button>
<button name="3" id="3" value="3">3</button>
</div>
<div class="row2">
<button name="4" id="4" value="4">4</button>
<button name="5" id="5" value="5">5</button>
<button name="6" id="6" value="6">6</button>
</div>
<div class="row3">
<button name="7" id="7" value="7">7</button>
<button name="8" id="8" value="8">8</button>
<button name="9" id="9" value="9">9</button>
</div>
<div class="row4">
<button name="." id="." value=".">.</button>
<button name="0" id="0" value="0">0</button>
<button id="backspace"><</button>
</div>
</section>
<section class="sub-cta">
<div>
<button class="sub-button">Request</button>
</div>
<div>
<button id="pay" class="sub-button">Pay</button>
</div>
</section>
<script src="/main.js"></script>
</body>
</html>
Flexbox doesn't organize the absolute positioned items. As a best practise, you should avoid absolute positioning in order to achieve responsive layout in most cases.
As I understand from your question, I have achieved what you want to do like that:
1. I removed all the absolute positioning
2. I removed explicit width styles of the body, .numberpad, .subcta, .sub-cta and .numberpad
3. Wrapped all these elements with <main> tag (except body)
4. Styled <main> with display: flex and align-items: center
Check it here:
document.getElementById('backspace').addEventListener('click', backspace)
let fired_button
let moneyval = document.getElementById('money')
$("button").click(function() {
fired_button = $(this).val();
let emptyArray = []
emptyArray.push(moneyval.textContent)
console.log(emptyArray)
for (var i = 0; i < emptyArray.length; i++) {
if (emptyArray[0] == "$0") {
moneyval.textContent = "$" + fired_button
} else {
moneyval.textContent += fired_button
}
}
});
function backspace() {
console.log(moneyval.textContent)
let string = moneyval.textContent
string = string.substring(0, string.length - 1);
moneyval.textContent = string
}
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: blue;
font-family: 'Inter';
height: 1520px;
}
#camera,
#search,
#profile {
background-color: blue;
color: black;
border: 0;
}
.camera {
margin-left: 15px;
}
.search {
margin-left: 8px;
}
.head-section {
position: absolute;
top: 60px;
}
.head-right {
position: absolute;
right: 40px;
top: 60px;
}
.money {
color: rgba(255, 255, 255, 0.87);
font-size: 150px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
line-height: 182px;
position: absolute;
width: 198px;
height: 182px;
margin: 0;
}
.usd {
position: absolute;
width: 146.4px;
height: 61px;
background: blue;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
border-radius: 43px;
color: white;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 30px;
border-style: none;
}
.numberpad {
position: relative;
width: 850px;
height: 540px;
}
.row1 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row2 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row3 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row4 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row1,
.row2,
.row3,
.row4 {
margin-top: 80px;
}
button {
border-style: none;
background-color: blue;
color: white;
font-size: 40px;
font-style: normal;
font-weight: 400;
}
.subcta {
border-style: solid;
position: relative;
}
.sub-cta {
display: flex;
position: relative;
width: 750px;
height: 124px;
justify-content: space-evenly;
}
.sub-button {
border-style: solid;
border-radius: 1.3em;
padding: .3em;
background-color: black;
border-color: #0CC337;
width: 293px;
height: 88px;
}
.balance-container {
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
position: relative;
width: 720px;
height: 219px;
}
main {
width:100%;
display: flex;
align-items: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="head-section">
<button id="camera"> <img src="/images/image 1.png" alt=""></button>
<button id="search"> <img src="/images/image 2.png" alt=""></button>
</div>
<div class="head-right">
<button id="profile"><img src="/images/image 3.png" alt=""></button>
</div>
<main>
<div class="balance-container">
<h1 id="money" class="money">$0</h1>
</div>
<div>
</div>
<section class="numberpad">
<div class="row1">
<button class="numpad" name="1" id="1" value="1">1</button>
<button name="2" id="2" value="2">2</button>
<button name="3" id="3" value="3">3</button>
</div>
<div class="row2">
<button name="4" id="4" value="4">4</button>
<button name="5" id="5" value="5">5</button>
<button name="6" id="6" value="6">6</button>
</div>
<div class="row3">
<button name="7" id="7" value="7">7</button>
<button name="8" id="8" value="8">8</button>
<button name="9" id="9" value="9">9</button>
</div>
<div class="row4">
<button name="." id="." value=".">.</button>
<button name="0" id="0" value="0">0</button>
<button id="backspace"><</button>
</div>
</section>
<section class="sub-cta">
<div>
<button class="sub-button">Request</button>
</div>
<div>
<button id="pay" class="sub-button">Pay</button>
</div>
</section>
</main>
<script src="/main.js"></script>
</body>
</html>
I made admin panel with HTML CSS and JavaScript and I made buttons to move about menus, but when I test console and player menu that doesn't work like that not changed menu section.
How it looks in full-screen
And for test I put console log 123, but that still doesn't work. May CSS be the problem? Or may it's HTML the problem? Because in console it doesn't give me any error. Just clear Google Chrome console.
const playerMenuButton = document.getElementById('playerMenuButton')
const playerMenu = document.getElementById('playerMenu')
playerMenuButton.addEventListener('click', () => {
console.log(123)
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}
<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>
The problem was in the css, I added position:relative; and z-index:1; to class .button so now you can add event to them and click without problem
const playerMenuButton = document.getElementById('playerMenuButton');
const playerMenu = document.getElementById('playerMenu');
playerMenuButton.addEventListener('click', () => {
console.log(123)
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
position:relative;
z-index:1;
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}
<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>
The thing is I want to create an overlay for every meal we're selling and I want to activate it through the "Order" button but the problem is I can't seem to know how to target each specific button in order to give every button a diffrent overlay
Here is the html
<div class="container">
<div class="MenuItems">
<img src="ribeye.jpg">
<button onclick="on()">Order Now</button>
<img src="Sirloin.jpg">
<button onclick="on()">Order Now</button>
<img src="Skirt.jpg">
<button onclick="on()">Order Now</button>
<img src="T-Bone.jpg">
<button onclick="on()">Order Now</button>
<img src="TomahawkSteak.jpg">
<button onclick="on()">Order Now</button>
<img src="Flank.jpg">
<button onclick="on()">Order Now</button>
<img src="Chuck.jpg">
<button onclick="on()">Order Now</button>
<img src="BBQChuck.jpg">
<button onclick="on()">Order Now</button>
<img src="ribeye.jpg">
<button onclick="on()">Order Now</button>
</div>
<div class="left">
<div class="SideMenu">
<ul>
<li>Steak</li>
<li>Chicken</li>
<li>Appietizers</li>
<li>Bevreges</li>
<li>Desserts</li>
</ul>
</div>
</div>
</div>
This is supposed to be one of the overlays however I need to create multiple others and be able to assign them to any button of my choice
<div id="over">
<img src="r.png">
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<script type="text/javascript" src="MenuJS.js"></script>
</body>
</html>
Javascript :
function on() {
document.getElementById("over").style.display = "block";
}
function off() {
document.getElementById("over").style.display = "none";
}
Here is the CSS:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
#over{
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
cursor: pointer;
}
#over img {
position: relative;
left: 35%;
top: 25%;
border: 2px crimson;
width: fit-content;
border-style: inset;
height: 280px;
width: 280px;
}
.CloseBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
left: 1500px;
border-radius: 5px;
position: relative;
bottom: 220px;
}
.AddBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
border-radius: 5px;
position: relative;
left: 750px;
top: 200px;
width: 30px;
}
.SubtractBtn {
background-color: crimson;
font-size: larger;
color: white;
border: solid 1px crimson;
border-radius: 5px;
position: relative;
left: 760px;
top: 200px;
width: 30px;
}
You can pass this as a parameter when calling the function, and access the element which was clicked via event.target within the function
HTML:
<button onclick="on(this)">Order Now</button>
JS:
function on() {
console.log(event.target)
}
For the functionality you're looking for, your approach will depend on how you structure your HTML.
For the most basic approach, you can do the following:
HTML:
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 1</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 2</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
<button onclick="on(this)">Order Now</button>
<div class="over">
<img src="r.png">
<p>overlay 3</p>
<Button class="AddBtn">-</Button>
<Button class="SubtractBtn">+</Button>
<Button class="CloseBtn" onclick="off()">X</Button>
</div>
JS:
function on() {
event.target.nextElementSibling.style.display = 'block'
}
function off() {
event.target.parentElement.style.display = 'none'
}
This is utilizing nextElementSibling (because the next element after the button is the overlay) and parentElement (the container of closeBtn which is the overlay)
I'm creating a small radio player using jQuery. You can find the code on codepen. I'm having problems with the code when I run it on Firefox (it works on every other browser). Following part of the JS:
$(".back").click(function(){
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
});
doesn't work. I've never experienced that problem. What might cause this?
$(document).ready(
function() {
$(".middle").click(function() {
$(this).children(".guziki").show();
$("h2").hide();
$("hr").hide();
$("#backbutton").show();
});
$(".back").click(function() {
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
console.log($(".back").parent())
});
});
var buttons = $("#one, #two").on("click", function() {
buttons.toggle();
});
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio {
background-color: #e0e0e0;
max-width: 25%;
overflow: hidden;
font-family: helvetica;
}
h2 {
color: #212121;
text-align: center;
font-family: 'Bungee Hairline'
}
h1 {
color: #e0e0e0;
text-align: center;
text-transform: uppercase;
padding-top: 2%;
font-family: 'Bungee Hairline', cursive;
font-size: 2em;
}
.top {
background-color: #212121;
height: 50px;
margin-top: -5%;
}
.bottom {
text-align: center;
background-color: #212121;
color: #e0e0e0;
padding: 5px 0;
}
button {
border: none;
background: transparent;
display: block;
margin: 0 auto;
font-size: 40px;
}
.guziki {
text-align: center;
display: none;
}
#two {
display: none;
}
.fa-chevron-left {
position: absolute;
left: 20px;
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio>
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio>
<div id="radio">
<div class="top">
<h1>radio techno</h1>
<div id="backbutton">
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="middle kinetic">
<h2 id="kinetic">Kinetic</h2>
<div class="guziki" id="guzikione">
<button onclick="document.getElementById('player').volume += 0.1">+</button>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle technofm">
<h2 id="technofm">techno.fm</h2>
<div class="guziki">
<button onclick="document.getElementById('player2').volume += 0.1">+</button>
</button>
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player2').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle">
<h2>uzic</h2>
</div>
<hr>
<div class="middle">
<h2>ballads fm 87,1</h2>
</div>
<hr>
<div class="middle">
<h2>maximum fm 142,2</h2>
</div>
<div class=bottom>
<h4>currently playing</h4>
</div>
</div>
EDIT: I thought it might be a codepen/firefox bug, but even if I run it from my computer, it still doesn't work only in Firefox.
The problem is not with jQuery. The button is so small that you aren't hitting it with your click.
Demo
#backbutton button {
position: absolute;
left: 300px;
min-width: 50px;
min-height: 50px;
background: pink;
}
This is caused by your chevron being repositioned outside the bounds of where Firefox was expecting the button. If you keep the chevron inside the button and position the button then it works.
.fa-chevron-left {
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
position:relative;
}
.back {
position: absolute;
left: 20px;
}
http://codepen.io/anon/pen/GjokQp
As you can see on this website http://www.templategarden.com/preview/tempo/template/index.html In the portfolio section different divs appear on clicking the buttons. And the size of the main Container also increases or decreases accordingly. I guess JS/Jquery will be required. Please help guys I am new to web development and am stuck here.
.wrap {
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
#portone {
text-align: center;
margin-top: 80px;
}
.porttwo {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
#portthree {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 2.1;
}
/*buttons starts here*/
#select {
width: 660px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.buttonz {
margin-left: 9px;
padding: 10px 22px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
cursor: pointer;
}
.buttonz:hover {
background-color: #7cc576;
border-color: #7cc576;
color: #fff;
transition: ease 0.5s;
}
/*buttons end here*/
#portfolio_img {
margin-top: 50px;
}
.project {
margin-left: 16px;
margin-bottom: 90px;
}
<section class="wrap">
<div id="portone">
<h1 class="porttwo" id="portfolio">portfolio</h1>
<h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div>
<!--buttons starts here-->
<div id="select">
<input class="buttonz" name="button" type="button" value="ALL">
<input class="buttonz" name="button" type="button" value="BRANDING">
<input class="buttonz" name="button" type="button" value="WEB DESIGN">
<input class="buttonz" name="button" type="button" value="PRINT DESIGN">
<input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div>
<!--buttons end here-->
<!--portfolio images starts here-->
<div id="portfolio_img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img">
</div>
<!--portfolio images ends here -->
</section>
JS/JQ not required. Check this. U can change the attributes all, web, app, brand belonging to the list
<div class="item" all brand web>1</div>
.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 16px 16px 0;
line-height: 100px;
text-align: center;
color: #08f;
font-size: 100px;
background-color: lightblue;
}
.item,
input[type="radio"] {
display: none;
}
label {
display: inline-block;
border: 1px solid #000;
padding: 1em;
margin-bottom: 16px;
}
label:hover {
background-color: blue;
color: #fff;
}
#rball:checked ~ .item[all] {
display: inline-block;
}
#rbweb:checked ~ .item[web] {
display: inline-block;
}
#rbapp:checked ~ .item[app] {
display: inline-block;
}
#rbbrand:checked ~ .item[brand] {
display: inline-block;
}
hr {
border: transparent;
padding: 0;
margin: 0;
}
<input name="rb" type="radio" id="rball" checked><label for="rball">All</label>
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label>
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label>
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label>
<hr>
<div class="item" all brand web>1</div>
<div class="item" all app>2</div>
<div class="item" all brand>3</div>
<div class="item" all web>4</div>
<div class="item" all app web>5</div>
<div class="item" all web>6</div>
<div class="item" all app>7</div>
<div class="item" all web>8</div>